常用css自適應方法_css怎麼自適應寬度

A. css高度自適應怎麼實現

不設置高度就是高度自適應,會根據其子元素的高度自動變化,但是子元素設置了浮動的話記得要清除浮動,不然父元素的高度會變成0

B. css樣式自適應解析度

高度和寬度盡量使用百分百，像素px換成em、rem這種，網頁會根據大小來自適應，要想使用效果好，就需要根據不同解析度來設置層的高寬、字體大小，設置幾套樣式來應用
@media screen and (min-width:640px) {
/*屏幕大於640像素應用該樣式*/
}
@media screen and (min-width:460px) and (max-width:640px) {
/*屏幕小於640大於460像素應用該樣式*/
}
@media screen and (max-width:460px) {
/*屏幕小於460像素應用該樣式*/
}

C. css怎麼自適應寬度

css自適應寬度有2種方式：
1.是通過百分比來控制寬度；
2.可以通過塊狀元素自動占滿父級的寬度的特性來實現
PS：當然還有一些方法，比如css3的flex-box布局，用flex布局的話，非常的方便可以實現多種自適應布局，但是，只適用於移動端，PC端上面只有高版本的瀏覽器才兼容，低版本的瀏覽器是不兼容的。

D. css中怎麼調試電腦的解析度自適應

你用媒介查詢

CSS3 Media Queries

或者這樣的形式：

不知道大家留意沒有，其中兩種方式引入CSS樣式都有一個共同的屬性「media」，而這個「media」就是用來指定特定的媒體類型，在HTML4和CSS2中充許你使用「media」來指定特定的媒體類型，如屏幕（screen）和列印（print）的樣式表，當然還有其他的，比如說「TV」,「handheld」等，其中「all」表示的是支持所有媒體介質。有關於更多的Media類型，可以點擊這里。

上
面簡單說了一下HTML4和CSS2的「Media Queries」,而今天的主要是來學習CSS3中的"Media
Queries"的更多使用方法和相關知識，下面我們開始進入今天的主題。CSS3中的Media
Queries增加了更多的媒體查詢，同時你可以添加不同的媒體類型的表達式用來檢查媒體是否符合某些條件，如果媒體符合相應的條件，那麼就會調用對應的
樣式表。換句簡單的說，「在CSS3中我們可以設置不同類型的媒體條件，並根據對應的條件，給相應符合條件的媒體調用相對應的樣式表」。現在最常見的一個
例子，你可以同時給PC機的大屏幕和移動設備設置不同的樣式表。這功能是非常強大的，他可以讓你定製不同的解析度和設備，並在不改變內容的情況下，讓你制
作的web頁面在不同的解析度和設備下都能顯示正常，並且不會因此而丟失樣式。

首先來看一個簡單的實例：

上面的media語句表示的是：當頁頁寬度小於或等於600px,調用small.css樣式表來渲染你的Web頁面。首先來看media的語句中包含的內容：

1、screen：這個不用說大家都知道，指的是一種媒體類型；

2、and：被稱為關鍵詞，與其相似的還有not,only，稍後會介紹；

3、（max-width:600px）：這個就是媒體特性，說得通俗一點就是媒體條件。

前面這個簡單的實例引出兩個概念性的東西，一個就是媒體類型（Media Type）和媒體特性（Media Query），首先一起來理解一下這兩個概念：

一、媒體類型(Media Type)

媒
體類型(Media
Type)在css2中是一個常見的屬性，也是一個非常有用的屬性，可以通過媒體類型對不同的設備指定不同的樣式，在css2中我們常碰到的就是
all（全部）,screen（屏幕）,print（頁面列印或打邱預覽模式）,其實在媒體類型不止這三種，w3c總共列出了10種媒體類型。

頁面中引入媒體類型方法也有多種：

1、link方法引入

2、xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

@import
引入有兩種方式，一種是在樣式文件中通過@import調用別一個樣式文件；另一種方法是在<head></head>中
的<style>...</style>中引入，單這種使用方法在ie6-7都不被支持如

樣式文件中調用另一個樣式文件：

@import url("css/reset.css") screen; @import url("css/print.css") print;

在<head></head>中的<style>...</style>中調用：

<head> <style type="text/css"> @import url("css/style.css") all; </style> </head>

4、@media引入

這種引入方式和@import是一樣的，也有兩種方式：

樣式文件中使用：

@media screen{ 選擇器{ 屬性：屬性值； } }

在<head>>/head>中的<style>...</style>中調用：

<head> <style type="text/css"> @media screen{ 選擇器{ 屬性：屬性值； } } </style> </head>

以上幾種方法都有其各自的利弊，在實際應用中我建議使用第一種和第四種，因為這兩種方法是在項目製作中是常用的方法，對於他們的具體區別，我就不說了，想了解的大家可以去找度娘或G爸，他們能幫你解決。

二、媒體特性（Media Query）

前面有簡單的提到，Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。具體的可以參閱：Media features。為了更能理解Media Query，我們在次回到前面的實例上：

轉換成css中的寫法為：

@media screen and (max-width: 600px) { 選擇器 { 屬性：屬性值； } }

其實就是把small.css文件中的樣式放在了@media srceen and (max-width;600px){...}的大括弧之中。在語句上面的語句結構中，可以看出Media query和css的屬性集合很相似，主要區別在：

1、Media query只接受單個的邏輯表達式作為其值，或者沒有值；

2、css屬性用於聲明如何表現頁頁的信息；而Media Query是一個用於判斷輸出設備是否滿足某種條件的表達式；

3、Media Query其中的大部分接受min/max前綴，用來表示其邏輯關系，表示應用於大於等於或者小於等於某個值的情況

4、CSS屬性要求必須有屬性值，Media Query可以沒有值，因為其表達式返回的只有真或假兩種

常用的Media Query如下表所示：

兼容的瀏覽器：

下面我們一起來看看Media Queries的具體使用方式

一、最大寬度Max Width

上面表示的是：當屏幕小於或等於600px時，將採用small.css樣式來渲染Web頁面。

二、最小寬度Min Width

上面表示的是：當屏幕大於或等於900px時，將採用big.css樣式來渲染Web頁面。

三、多個Media Queries使用

Media
Query可以結合多個媒體查詢，換句話說，一個Media Query可以包含0到多個表達式，表達式又可以包含0到多個關鍵字，以及一種Media
Type。正如上面的其表示的是當屏幕在600px-900px之間時採用style.css樣式來渲染web頁面。

四、設備屏幕的輸出寬度Device Width

上面的代碼指的是iphone.css樣式適用於最大設備寬度為480px，比如說iPhone上的顯示，這里的max-device-width所指的是設備的實際解析度，也就是指可視面積解析度

五、iPhone4

上面的樣式是專門針對iPhone4的移動設備寫的。

六、iPad

在
大數情況下，移動設備iPad上的Safari和在iPhone上的是相同的，只是他們不同之處是iPad聲明了不同的方向，比如說上面的例子，在縱向
(portrait)時採用portrait.css來渲染頁面；在橫向（landscape）時採用landscape.css來渲染頁面。

七、android

/*240px的寬度*/ <link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" /> /*360px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" /> /*480px的寬度*/ <link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我們可以使用media query為android手機在不同解析度提供特定樣式，這樣就可以解決屏幕解析度的不同給android手機的頁面重構問題。

八、not關鍵字

not關鍵字是用來排除某種制定的媒體類型，換句話來說就是用於排除符合表達式的設備。

九、only關鍵字

only
用來定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器。其實only很多時候是用來對那些不支持Media Query但卻支持Media
Type的設備隱藏樣式表的。其主要有：支持媒體特性（Media
Queries）的設備，正常調用樣式，此時就當only不存在；對於不支持媒體特性(Media Queries)但又支持媒體類型(Media
Type)的設備，這樣就會不讀了樣式，因為其先讀only而不是screen；另外不支持Media
Qqueries的瀏覽器，不論是否支持only，樣式都不會被採用。

十、其他

在Media Query中如果沒有明確指定Media Type，那麼其默認為all，如：

另外還有使用逗號（，）被用來表示並列或者表示或，如下

上面代碼中style.css樣式被用在寬度小於或等於480px的手持設備上，或者被用於屏幕寬度大於或等於960px的設備上。

關於Media Query的使用這一節就介紹到此，最後總體規納一下其功能，個人認為就是一句話：Media Queries能在不同的條件下使用不同的樣式，使用頁面達到不同的渲染效果。下一節將會針對Media Queries介紹幾個實例，如果感興趣的朋友記得觀注本站的更新。

如需轉載煩請註明出處：W3CPLUS

@media(max-width:1186px){

}
@media(max-width:979px){
}
@media(min-width:768px)and(max-width:979px){
}
@media(max-width:767px){
}

/*Smallerscreens-----------*/
@media(max-width:480px){
}

/*Smartphones(portraitandlandscape)-----------*/
@mediaonlyscreenand(min-device-width:320px)and(max-device-width:480px){
}

根據不同，樣式可以寫在其中，你可以去哪個網站上看看，他那裡也有更詳細的介紹

E. CSS使圖片自適應顯示寬度代碼怎麼用

自適應顯示寬度代碼方法：

一、首先，在網頁代碼的頭部，加入一行viewport元標簽。

viewport是網頁默認的寬度和高度，上面這行代碼的意思是，網頁寬度默認等於屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為1.0，即網頁初始大小占屏幕面積的100%。

所有主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js。

二、不使用絕對寬度

由於網頁會根據屏幕寬度調整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。

具體說，CSS代碼不能指定像素寬度：

width:xxx px;

只能指定百分比寬度：

width: xx%;

或者

width:auto;

三、相對大小的字體

字體也不能使用絕對大小（px），而只能使用相對大小（em）。

body {
font: normal 100% Helvetica, Arial, sans-serif;
}

上面的代碼指定，字體大小是頁面默認大小的100%，即16像素。

h1 {
font-size: 1.5em;
}

然後，h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）。

small {
font-size: 0.875em;
}

small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

四、流動布局（fluid grid）

"流動布局"的含義是，各個區塊的位置都是浮動的，不是固定不變的。

.main {
float: right;
width: 70%;
}

.leftBar {
float: left;
width: 25%;
}

float的好處是，如果寬度太小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現。

另外，絕對定位（position: absolute）的使用，也要非常小心。

五、選擇載入CSS

"自適應網頁設計"的核心，就是CSS3引入的Media Query模塊。

它的意思就是，自動探測屏幕寬度，然後載入相應的CSS文件。

上面的代碼意思是，如果屏幕寬度小於400像素（max-device-width: 400px），就載入small.css文件。

如果屏幕寬度在400像素到600像素之間，則載入smallScreen.css文件。

除了用html標簽載入CSS文件，還可以在現有CSS文件中載入。

六、CSS的@media規則

同一個CSS文件中，也可以根據不同的屏幕解析度，選擇應用不同的CSS規則。

@media screen and (max-device-width: 400px) {

.column {
float: none;
width:auto;
}

#sidebar {
display:none;
}

}

上面的代碼意思是，如果屏幕寬度小於400像素，則column塊取消浮動（float:none）、寬度自動調節（width:auto），sidebar塊不顯示（display:none）。

七、圖片的自適應（fluid image）

除了布局和文本，"自適應網頁設計"還必須實現圖片的自動縮放。

這只要一行CSS代碼：

img { max-width: 100%;}

這行代碼對於大多數嵌入網頁的視頻也有效，所以可以寫成：

img, object { max-width: 100%;}

老版本的IE不支持max-width，所以只好寫成：

img { width: 100%; }

此外，windows平台縮放圖片時，可能出現圖像失真現象。這時，可以嘗試使用IE的專有命令：

img { -ms-interpolation-mode: bicubic; }

或者，Ethan Marcotte的imgSizer.js。

addLoadEvent(function() {

var imgs = document.getElementById("content").getElementsByTagName("img");

imgSizer.collate(imgs);

});

不過，有條件的話，最好還是根據不同大小的屏幕，載入不同解析度的圖片。有很多方法可以做到這一條，伺服器端和客戶端都可以實現。

F. css實現高度自適應

很簡單，利用table的自適應的屬性即可。最外層定義一個dispaly:table就好，如果要寬度到左右兩邊，高度自適應的話，可以這樣設置，代碼如下：

.ctn{width:100%;display:table;}

G. css高度自適應

方法好些
可以使用js，獲取右側高度然後css賦值左側這是常用的
其他的方法也有暫時不說了

H. css3怎麼實現屏幕自適應

試用css3 語法@media screen and (判斷屬性){ CSS樣式選擇器 }
1、DIV+CSS小案例描述
根據整體來設置，設置他們的最大寬度(width)為640px，最小寬度為320px，此類設置適用於手機移動端；要實現屏幕自適應，那麼就要用百分比來實現；所以設置width整體100%；img寬度100%；這樣實現圖片的自由縮放；

HTML代碼如下：且仔細看清每一行的注釋：

自定義縮放其實主要就是判斷瀏覽器的寬度，高度需要的話可以設置，還有設置內部區域塊兒的寬度以及圖片展示用百分比來控制；

I. css設置div高度自適應

div 默認就是自適應高度，隨內容的高度增加，也可以使用樣式：<style>.div{ height:auto;}</style>來定義自適應

J. 怎樣用css控制圖片自適應大小

1、首先用dw編輯器建立了一個靜態頁面

導航:首頁 > 使用方法 > 常用css自適應方法

常用css自適應方法

與常用css自適應方法相關的資料