網頁響應式佈局注意到的點（轉）

時間 2019-11-17

標籤網頁響應佈局注意到欄目 HTML 简体版

原文原文鏈接

一：佈局方式有以下幾種：css

1. 固定佈局：固定佈局以PX(像素)做爲單位的，在PC端，設計稿多少PX就寫多少PX，前幾年都是這種佈局，常見的是以960px或者1000px來設計的，可是這樣設計有以下缺點：html

1.1.頁面很死板，在更大的屏幕上，頁面左右2邊留白。前端

1.2.不適應響應性佈局。node

2. 流式佈局：流式佈局是以百分比做爲單位的，咱們要牢記以下公式：css3

百分比寬度 = 目標元素寬度 / 上下文元素寬度git

這種佈局優勢：能夠自適應佈局，根據不一樣的分辨率顯示不一樣的寬度。github

缺點：在行高或者marginTop在大屏幕下看起來過高，在小屏幕下看起來太窄。web

3 彈性佈局：彈性佈局是以em做爲單位的，一樣彈性佈局也支持以下公式：chrome

百分比尺寸 = 目標元素尺寸 / 上下文元素尺寸json

使用em將文字像素px轉換爲相對單位，如今瀏覽器默認文字的大小是16px，若是一個文字大小是48px，上下文元素是(瀏覽器)，那麼轉換成em 就是 48/16 = 3em. 可是若是一個h1標籤的font-size是48px, h1標籤內部span標籤font-size 是24px,那麼h1標籤的font-size = 48 / 16 = 3em h1 span {font-size = 24/16 =1.5em}.彈性佈局也支持響應性web設計。

二：媒體查詢：

根據特定的環境查詢各類屬性值，好比設備的寬度，是否橫向使用不一樣的css樣式來渲染。

媒體查詢使用以下：好比內聯樣式能夠以下寫：

1. 最大寬度960px一種佈局：

@media screen and (max-width:960px) {<=960}

2. 最小寬度600px 另外一種佈局：

@media screen and (min-width:600px) {>=600}

3. 寬度在600px 到 960px之間，以下:

@media screen (min-width:600px) and (max-width:960px) {600<=x<=900}

4.外聯樣式使用link標籤來引用樣式：

若是對於像ipad來講，咱們能夠在上面增長一個屬性 orientation(landscape或portrait) 橫屏或者豎屏。

理解meta各個屬性的含義：

作h5頁面移動端開發須要在head標籤內引入下面這句話。（若是沒有引入的話，頁面的字體等大小就不正常了）。

具體含義以下：

Width: 控制viewport的大小。如device-width爲設備的寬度。

initial-scale: 初始縮放比例，頁面第一次加載時的縮放比例。

maximum-scale 容許用戶縮放到的最大比例，範圍從0到10.0

minimum-scale: 容許用戶縮放到的最小比例，範圍從0到10.0

user-scalable：用戶是否能夠手動縮放，值能夠是:

1， yes,true容許用戶縮放；

2, no、false不容許用戶縮放。 (只設置這一個屬性，有的瀏覽器並不生效，咱們須要配合maxinum-scale和mininum-scale最大縮放與最小縮放分別爲1:1)。

綜合：流式佈局和彈性佈局及配合媒體查詢是響應性佈局的最好方式。

可是針對響應性web佈局使用媒體查詢也有缺點的,缺點以下：

對於設計師：要針對不一樣的屏幕大小設計不一樣的設計，（例如寬屏下的三欄設計、普通屏幕下的兩欄設計以及移動設備上的單欄設計等）。對於前端對於不一樣的屏幕要寫不一樣的樣式，增長了工做量，同時維護起來不是很方便(要維護幾份不一樣的css)。

三：圖片

1. 對於背景圖片來講，css3有個屬性 background-size能夠等比例縮放背景圖片。

可是對於小屏幕的移動設備去加載大背景圖片的話，有缺點的，最主要的缺點是要更大的帶寬，浪費流量。因此咱們要想作的更好的話，可使用媒體查詢根據設備的寬度來渲染不一樣大小的背景圖片。

2. 對於頁面上的<img/>標籤圖片的話：

2.1. 若是隻是頁面上靜態圖片的話，不考慮帶寬的狀況下，可使用width=100%」等比例縮放，如：<img src=」XX.png」 width=」100%」/>

2.2. 若是是商品圖或者頁面上有多個的話，考慮不浪費沒必要要的帶寬，須要後臺根據不一樣的設備寬度大小來返回不一樣的json數據的圖片來給咱們前端，以後咱們前端使用JS動態的渲染出來。

在現代瀏覽器中（包括IE8+）中要實現圖片隨着流動佈局相應縮放很是簡單，只須要在css中加上這麼一句代碼：

img { max-width:100%; }

含義是：確保圖片的最大寬度不會超過瀏覽器的窗口或其容器可視部分的寬度，因此當窗口或容器的可視部分變窄時，圖片的最大寬度值也會相應的變小，圖片自己永遠不會覆蓋容器。

四：理解css單位px，em，rem的區別：

1. Px是css中最基本的長度單位，在PC端，設計稿多少像素，頁面css就寫多少像素。

2. em 是相對單位，相對於上下文元素而言，通常狀況下，瀏覽器默認的字體大小是16px，也就是1em等於16px；好比：

3. rem也是相對單位。rem是相對於html根元素來計算的，這就是說只要在根節點設定好參考值，那麼全篇的1rem都相等，計算方式同 em，默認1rem=16px; 同理你能夠設定html { font-size:62.5% } 那麼1rem就等於10px，以此類推。。。

好比設置html根元素以下代碼：

html {font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/}

當一個p元素是24px的話，那麼轉換成rem爲單位的話，那麼只須要以下這樣寫便可：

p {font-size: 2.4rem; /*2.4 × 10px = 24px */ }

五：元素未知寬度居中。

咱們先來介紹一下未知寬度，元素居中的方法，對於響應性web設計是有幫助的，咱們能夠來了解下。

第一種方法：

假如頁面html結構以下：

<div>

</div>

只須要給父級元素div 設置文本對齊是居中對齊。子元素設定display:inline-block便可。以下代碼：

div{text-align:center}

p{display:inline-block}

第二種方法以下：

div{position:relative; left:50%; float:left;}

p{position:relative; left:-50%;}

六：媒體查詢標準寫法：media queries

@media 設備類型 and (設備特性-寬度) {

// css 樣式

}

在css2.1中定義了10種設備類型，分別以下：

能夠指定的值含義

all 全部設備

screen 顯示器

print 打印用紙或打印預覽視圖

handled 便攜設備

tv 電視機類型的設備

speech 語音和音頻合成器

braille 盲人用點字法觸覺回饋設備

embossed 盲人打印機

projection 各類投影設備

tty 使用固定密度字母柵格的媒介，好比電傳打字機和終端

Css設備特性共有13種，是一個相似於CSS屬性的集合。但與CSS屬性不一樣的是，大部分設備特性的指定值接受min/max的前綴，用來表示大於等於或小於等於的邏輯，以此避免使用<和>這些字符。

設備特性以下表：

特性可指定的值是否容許使用min/max前綴特性說明

width 帶單位的長度數值容許瀏覽器窗口的寬度 css

height 帶單位的長度數值容許瀏覽器窗口的高度

device-width 帶單位的長度數值容許設備屏幕分辨率的寬度值

device-height 帶單位的長度數值容許設備屏幕分辨率的高度值

orientation 只能指定兩個值:portrait或landscape 不容許窗口的方向是縱向仍是橫向

aspect-ratio 比例值，例如：16/9 容許窗口的縱橫比，比例值爲瀏覽器窗口的寬度值/高度值

device-aspect-ratio 比例值，例如：16/9 容許設備屏幕分辨率的縱橫比，比例值爲設備屏幕分辨率的寬度值/高度值

color 整數值容許設備使用多少位的顏色值，若是不是彩色設備，該值爲0

color-index 整數值容許色彩表中的色彩數

monochrome 整數值容許單色幀緩衝器中每像素的字節數

resolution 分辨率值，譬如300dpi 容許設備的分辨率

scan 只能指定兩個值：progressive或interlace 不容許電視機類型設備的掃描方式，progressive表示逐行掃描，interlace表示隔行掃描

grid 只能指定兩個值:0或1 不容許設備是基於柵格仍是基於位圖。基於柵格時該值爲1，不然該值爲0

上面是一些響應式web設計的基本知識點，下面咱們能夠詳細講解下響應式web設計如何實踐？

1. 首先須要在頁面頭部引入這行meta代碼，以下：

還要引入這一句：

咱們的代碼有相似於電話這樣的數字的時候，由於有的手機上它會自動轉換成能夠撥打電話，因此咱們加上這句就不會了。

2. 響應性web設計須要使用css3媒體查詢media來寫不一樣的css樣式。

在移動端瀏覽器中或者某些桌面瀏覽器中，window對象有一個devicePixelRatio屬性，它的官方定義爲，設備的物理像素與設備的獨立像素的比例，也就是 devicePixelRatio = 設備的物理像素/ 設備的獨立像素。這三個參數不是固定的，只要其中2個肯定了，那麼就能夠知道第三個參數了，設備的物理像素咱們能夠映射到設備的分辨率的寬度，獨立像素咱們能夠映射到媒體查詢media定義的寬度。而比列devicePixelRatio咱們能夠理解爲css中的1像素(px)在設備上佔用多少個物理像素。好比咱們目前常見的手機分辨率以下：

手機類型：分辨率

小米3 1080*1920

小米2 720*1280

紅米Note 720*1280

魅族4 1152*1920

魅族3 1080*1800

魅族2 800*1280

iphone6 750*1334

iphone5s 640*1136

iphone4s 480*800

iphone3s 320*480

三星 720*1280

三星 480*800

如上小米3分辨率爲1080，獨立像素爲360px，那麼比列爲3，也就是一個css的1px，佔用3個物理像素，小米2和紅米Note分辨率爲720，獨立像素仍是360px，因此比列爲2，因此小米3相對於小米2與紅米Note更清晰。同理iphone和其餘類型的手機也同樣。

而上面說的獨立像素就是360px，正是咱們css中的媒體查詢關聯的。

以下咱們能夠在css加上這樣的媒體查詢就能夠匹配到樣式了；以下：

/* 針對手機屏幕的寬度是360 384等屏幕的寬度

*width(寬度能夠設置爲384px) max-width:384來計算可是邊距字體大小等仍是安裝360px來計算

*****************************************/

@media (min-width:360px) and (max-width: 399px) {}

而咱們目前的獨立像素有320,400的，咱們也能夠增長css媒體查詢。以下：

/* min-width:320px

* 針對設備獨立像素爲320px 的css

* min-width:320 和 max-width:639之間 320-639公用樣式也包含在裏面

============================*/

@media (min-width: 320px) and (max-width:639px){}

* 針對設備獨立像素爲400px

========================*/

@media (min-width: 400px) and (max-width:401px){}

可是也還有些目前還未知的獨立像素，好比將來的某時刻有大於640px的獨立像素，或者是說咱們手機移到豎屏時候，咱們也能夠針對適應的作一點匹配。以下咱們針對640px-999px作一個匹配。

/* min-width:640px

* 針對設備獨立像素爲640px 的css

* min-width:640 和 max-width:999之間

============================*/

@media (min-width: 640px) and (max-width:999px){}

可是在PC端，咱們爲了適應PC端，因此針對寬度爲1000以上也作一個顯示處理。

/* 最小寬度1000樣式

*爲了適應PC端因此PC端在設計時候默認以1000px來設計的

=======================*/

@media screen and (min-width:1000px) {}

咱們都知道在IE6-8下 IE是不支持css3中的媒體查詢的，因此在網上有大牛已經幫咱們考慮到這個問題了，因此只須要在網上下載 respond.js下來放到咱們本地，而後頁面上引入便可。respond.js的github地址以下：

https://github.com/scottjehl/Respond/

經過以上：咱們能夠對編寫css響應性web設計有一個規範，以下：(固然若是你們有更好的方法也能夠提出來。)

1. 頭部reset.css 是否要獨立出來一個css文件，或者不獨立出來直接放在css頂部。

2. 公用的頭部或者尾部樣式直接放在css文件頂部，及公用的頁面css樣式放在頂部(添加註釋。)

3. 媒體查詢css樣式分別以下組織：

1. 移動端開發css媒體查詢代碼組織以下：

/* min-width:320px

* 針對獨立像素爲320px 的css

=======================================================================================================*/

@media (min-width: 320px) and (max-width:639px){

/* css style*/

}

/* 針對獨立像素的寬度是360 384等

* max-width:384來計算可是邊距字體大小等仍是安裝360px來計算

*****************************************/

@media (min-width:360px) and (max-width: 399px) {

/* css style*/

}

/* 針對獨立像素爲400px

=======================================================================================================*/

@media (min-width: 400px){

/* css style*/

}

/* 針對獨立像素大於640以上的小於999的

=======================================================================================================*/

@media (min-width: 640px) and (max-width:999){

/* css style*/

}

2. 在PC端 1000以上的媒體查詢寫在以下里面：

@media screen and (min-width:1000px) {

/* css style*/

}

4. 基本的編碼規範注意事項以下：

1.給html根元素字體大小定義相對單位(rem)以下：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}

以後的元素字體使用rem做爲單位。好比h2字體大小是24px，那麼在移動端字體大小設置爲 font-size:2.4rem 在媒體查詢@media (min-width:1000) {}內字體大小但願能夠寫2個，font-size:24px;font-size:2.4rem,這是爲了將來的移動設備獨立像素超過1000後能使用rem做單位。

2.根據設計稿給body元素設置默認的font-size及color，以後的媒體查詢根據自身的條件須要覆蓋font-size及color的話就覆蓋掉。

3.在對應的設備媒體查詢內，有不少公用的css樣式但願合併，好比這樣的：

.six-qa li .q{line-height:26px;font-size:1.6rem;}

.six-qa li .a{line-height:26px;font-size:1.6rem;}

能夠直接合併成以下：

.six-qa li .q,.six-qa li .a{line-height:26px;font-size:1.6rem;}

編寫響應性web設計css媒體查詢更好的方案思考？

咱們都知道，爲了自適應各類設備，咱們須要編寫不一樣的css進行適配，好比寬度，外邊距，內邊距，字體大小等不一樣，須要不一樣的適配，那麼咱們如今能不能編寫一份css呢，好比我編寫一份針對：獨立像素爲400屏幕寬度的編寫一份css樣式，而後其餘的樣式，好比320的，384的，360的或者640以上的，針對這些css樣式，咱們能不能使用NodeJS來自動讀取400的css，而後分別對上面獨立像素大小的屏幕進行比例一下，好比屏幕400像素的 font-size:24px 那麼 320px的屏幕字體大小就是 font-size = Math.floor(320*24/400),其餘css屬性都按照這種方式來作，那麼在本地就能夠生成不一樣的版本css了(好比針對320版本的，針對640以上css版本的)，而後在head頭部分別引入不一樣的css版本，好比以下引入：

咱們知道，只要設備的寬度在以上任何一種的時候只會渲染一份css，其餘的css不渲染，因此咱們能夠按照這種方式來作一份css。至於這種方案我之後會使用nodeJS來作出來的