css 響應式佈局

時間 2019-11-09

標籤 css 響應佈局欄目 CSS 简体版

原文原文鏈接

http://www.missyuan.net/school/web_2013/web_10748.htmlcss

一.使用HTML中的viewport來實現

viewport語法以下：

HTML代碼


<meta name="viewport"
content="
height = [pixel_value | device-height] ,
width = [pixel_value | device-width ] ,
initial-scale = 0.5 ,
minimum-scale = float_value ,
maximum-scale = float_value ,
user-scalable = [yes | no] ," />

（1）width

控制 viewport 的大小，能夠指定的一個值或者特殊的值，如 device-width 爲設備的寬度（單位爲縮放爲 100% 時的 html

CSS 的像素）。

（2）height

和 width 相對應，指定高度。

（3）initial-scale

初始縮放。即頁面初始縮放程度。這是一個浮點值，是頁面大小的一個乘數。例如，若是你設置初始縮放爲「1.0」，那css3

麼，web頁面在展示的時候就會以target density分辨率的1:1來展示。若是你設置爲「2.0」，那麼這個頁面就會放大爲web

2倍。

（4）maximum-scale

最大縮放。即容許的最大縮放程度。這也是一個浮點值，用以指出頁面大小與屏幕大小相比的最大乘數。例如，若是你chrome

將這個值設置爲「2.0」，那麼這個頁面與target size相比，最多能放大2倍。

（5）user-scalable

用戶調整縮放。即用戶是否能改變頁面縮放程度。若是設置爲yes則是容許用戶對其進行改變，反之爲no。默認值是yes瀏覽器

。若是你將其設置爲no，那麼minimum-scale 和 maximum-scale都將被忽略，由於根本不可能縮放。

(6)設置屏幕寬度爲設備寬度，禁止用戶手動調整縮放)
HTML代碼：

<meta name="viewport" content="width=device-width,user-scalable=no" />

(7)設置屏幕密度爲高頻，中頻，低頻自動縮放，禁止用戶手動調整縮放)

HTML代碼:

<meta
name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial- scale=1.0, ide

minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
注：1). 全部的縮放值都必須在0.01–10的範圍以內。
2). minimum-scale、maximum-scale要麼寫值，要不留這兩個

二.不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。這一條很是佈局

重要。
具體說，CSS代碼不能指定像素寬度：
　　width:xxx px;
只能指定百分比寬度：
　　width: xx%;
或者
　　width:auto;字體

三.CSS的@media規則
（1）同一個CSS文件中，也能夠根據不一樣的屏幕分辨率，選擇應用不一樣的CSS規則。

HTML代碼
@media screen and (max-device-width: 400px) {
　　.column {
　　　　float: none;
　　　　width:auto;
　　}
　　#sidebar {
　　　　display:none;
　　}
}

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

（2）media查詢特性：
width 視口寬度flex

height 視口高度

device-width 設備屏幕的寬度

device-height 設備屏幕的高度

orientation 檢測屏幕處於橫屏仍是豎屏

aspect-ratio 基於視口的寬高比例

device-aspect-ratio 基於設備屏幕的寬高比

color 顏色的位數，如min-color：32 匹配設備是否有32位或以上的顏色

color-index 設備的顏色索引表中的顏色數

monochrome 檢測單色振緩衝區中每像素使用的位數。爲非負數，如monochrome：3

resolution 檢測屏幕或打印機的分辨率，如min-resolution：300dpi(dpi後面會介紹)，也能夠是每釐米像素點的度量值，如min-resolution：120dpcm

scan 掃描方式，值爲progressive(逐行掃描)、interlace(隔行掃描)

grid 檢測輸出設備是網格設備仍是位圖設備

（3）針對不一樣分辨率：
中分辨率屏幕：@media(-webkit-min-device-pixel-ratio:1){css代碼}
高分辨率屏幕：@media(-webkit-min-device-pixel-ratio:1.5){css代碼}
超高分辨率屏幕：@media(-webkit-min-device-pixel-ratio:2){css代碼}

四．流動佈局
各個區塊的位置都是浮動的，不是固定不變的。

HTML代碼

　.main {
　　　　float: right;
　　　　width: 70%;
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}

float的好處是，若是寬度過小，放不下兩個元素，後面的元素會自動滾動到前面元素的下方，不會在水平方向

overflow（溢出），避免了水平滾動條的出現。
另外，絕對定位（position: absolute）的使用，也要很是當心。

五. 圖片的自適應
圖片的寬度和高度要按百分比來設定，千萬不能夠設定成固定大小。

HTML代碼

<img width="95%" src="" alt="" />

六.css3的新屬性: display：-webkit-box

(1)屬性：
webkit-box-orient：子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit，其中默認值是inline-axis，即橫向排列
-webkit-box-flex ：子元素之間比例，僅做一個係數
-webkit-box-direction ：子元素排列順序 normal | reverse | inherit，其中默認值是normal
-webkit-box-flex-group ：以組爲單位的流體系數
-webkit-box-ordinal-group ：以組爲單位的子元素排列方向
-webkit-box-lines：子元素是否換行，相似word-wrap和word-break的做用
-webkit-box-align ：子元素垂直方向的對其方式
-webkit-box-pack ：子元素水平方向的對其方式

（2）例子：父元素被一、二、3均分，且2和1之間間隔10px
HTML:
CSS:

怎麼理解上面的代碼呢，父親有一塊地，要分給兄弟幾個，除去老大和老二之間的分割線所佔的那塊，剩下的部分均分的分數由li的兄弟個數和box-flex的總數肯定，如今一共三兄弟，每兄弟的box-flex都是1，因此就總分數=1*1+1*1+1*1=3.
若是代碼稍做修改:

那麼如今老二的box-flex是2了，總分數就是1*1+1*2+1*1=4，其中老大老三各佔一份，老二佔兩份，顯示效果以下：

-webkit-text-size-adjust:none
設置在屏幕橫屏的時候字體不自動變大
字級單位：rem
咱們以前用em、百分比的時候遇到的問題就是計算，並且當嵌套的層級太多時就會很是難以把控，而用px則被固定死了，
如今咱們用rem徹底不用擔憂這個問題，由於rem的參照對象只有根節點。咱們只需設置根節點的大小，全部子節點都只需參照它來設計就能夠，下面是px、em、百分比和pt的對比

咱們只需設置html根元素字體大小爲75%，對應的px值就是12，這樣咱們能夠很方便的設置頁面的寬高和字體大小，固然單位是rem，這樣參考對象纔會永遠是html而不是父元素，當須要變化的時候，只需改變html的大小其餘的元素都會相應變化，方便極了。
Px,em,rem的區別
PX特色
1. IE沒法調整那些使用px做爲單位的字體大小；
2. 國外的大部分網站可以調整的緣由在於其使用了em或rem做爲字體單位；
3. Firefox可以調整px和em，rem，可是96%以上的中國網民使用IE瀏覽器(或內核)。
px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。
任意瀏覽器的默認字體高都是16px。全部未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em,10px=0.625em。爲了簡化font-size的換算，須要在css中的body選擇器中聲明Font-size=62.5%，這就使em值變爲 16px*62.5%=10px, 這樣12px=1.2em, 10px=1em, 也就是說只須要將你的原來的px數值除以10，而後換上em做爲單位就好了。

EM特色：
1. em的值並非固定的；
2. em會繼承父級元素的字體大小。

好比說你在#content中聲明瞭字體大小爲1.2em，那麼在聲明其子元素p的字體大小時就只能是1em，而不是1.2em, 由於此em非彼em，它因繼承#content的字體高而變爲了1em=12px。避免1.2*1.2 = 1.44

rem特色
使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素
它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。

-webkit-box-sizing:border-box: 指定該盒子的大小包括邊框的寬度當咱們指定了一個塊級元素時，而且爲其定義了邊框，設置了其寬度爲100%。按照盒子模型，就會發現該元素的左右邊框各1個像素會溢了，致使出現橫向滾動條，這時候咱們能夠爲其添加-webkit-box-sizing:border-box用來指定該盒子的大小包括邊框的寬度。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。