關於響應式佈局的總結與思考(一)-常識介紹

時間 2019-11-10

原文原文鏈接

一.概念

Responsive Web Design（響應式佈局）這個名詞是Ethan Marcotte在2010年提出.簡單說呢就針對不一樣的屏幕分辨率應用不一樣的CSS樣式。好比在電腦、Pad設備上，屏幕比較寬，就能夠一行放多個Div。到了手機上，或者Pad豎着拿的的時候，一行就只放1到2個Div就差很少了。這樣在移動設備上,不管是字體大小仍是頁面佈局就不會顯得很侷促.一切都是爲了客戶的體驗度.javascript

首先,要實現響應式佈局,至少須要知道下面幾個知識點css

2、meta標籤設置

下面的這段話在響應式佈局裏面必不可少html

網頁寬度調整

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

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

固然這裏除了這兩個屬性以外,還能夠加上其餘幾個屬性,比較完整的是這個樣子:css3

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

maximum-scale=1.0, minimum-scale=1.0;可視區域的縮放級別，maximum-scale用戶可將頁面放大的程序，1.0將禁止用戶放大到實際尺寸之上,minimum-scale=1.0固然就是禁止縮小了。user-scalable:是否可對頁面進行縮放，no 禁止縮放git

全部主流瀏覽器都支持這個設置，包括IE9。對於那些老式瀏覽器（主要是IE六、七、8），須要另外重寫。github

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

這個js文件在google上獲取困難的話,能夠直接在github上搜索相關資源,你們須要的話能夠點擊這裏直接下載web

常見的一些其餘meta標籤設置

不少觸屏版的頁面上都會加上下面幾句meta標籤,雖然和響應式關係不是太大,這裏一併說了吧windows

<meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection">

第一個meta標籤是iphone設備中的safari私有meta標籤，它表示：容許全屏模式瀏覽；
第二個meta標籤也是iphone的私有標籤，它指定的iphone中safari頂端的狀態條的樣式；在web app應用下狀態條（屏幕頂部條）的顏色；默認值爲default（白色），能夠定爲black（黑色）和black-translucent（灰色半透明）。注意：若值爲「black-translucent」將會佔據頁面px位置，浮在頁面上方（會覆蓋頁面20px高度–iphone4和itouch4的Retina屏幕爲40px）。
第三個meta標籤表示：告訴設備忽略將頁面中的數字識別爲電話號碼。

三.不使用絕對寬度和字體

不使用絕對寬度

因爲網頁會根據屏幕寬度調整佈局，因此不能使用絕對寬度的佈局，也不能使用具備絕對寬度的元素。瀏覽器

CSS代碼不能指定像素寬度：

width:number px;

只能指定百分比寬度：

width: x%;

或者自動：

width: auto;

不使用絕對大小字體

只使用相對大小（em）字體，不能使用絕對大小（px）字體。下面這段代碼的意思是：字體大小是頁面默認大小的100%，即16像素；h1的大小是默認大小的1.5倍，即24像素（24/16=1.5）；small元素的大小是默認大小的0.875倍，即14像素（14/16=0.875）。

body { font: normal 100% Helvetica, Arial, sans-serif; } h1 { font-size: 1.5em; }

固然不管是絕對寬度仍是字體還不止這些,可是這又涉及到另外的知識和佈局方式,放在下一章講解.

四.圖片縮放

除了佈局和文本，響應式佈局還必須實現圖片的自動縮放。這隻要一行CSS代碼，對於大多數嵌入網頁的視頻也有效。

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

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

img { width: 100%; }

windows平臺縮放圖片時，可能出現圖像失真現象。這是能夠嘗試針對IE瀏覽器內核寫：

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

一扯到IE就很頭痛,可是既然已經要作響應式了,其實我我的的意見是還兼容IE幹嗎?還在使用老式IE瀏覽器的用戶,幾乎也能夠忽略掉了.有時間浪費在這上面,還不如多想一想功能和頁面設計.

前面這三個是響應式佈局必需要遵照或者應用的方式

五.流式佈局

其實這個是響應式裏面用得最多的一種表現方式.

什麼意思呢?咱們來回顧一下,一開始提出的例子.爲了提升移動端用戶的體驗,原本頁面在電腦上顯示的效果是一行三個div,可是在移動端,爲了字體和佈局不顯得侷促,使用一行一個div,這個怎麼作呢?咱們先來看看效果.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ margin: 0; padding: 0; } div{ float: left; width: 30%; height: 100px; margin: 10px; } #div1{ background-color: #006699; } #div2{ background-color: #ff6666; } #div3{ background-color: #ffff00; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> </body> </html>

整個html代碼如上,上面這個代碼,你們應該都知道.無非就是left:left塊級標籤浮動了而已.顯示效果以下:

當縮小瀏覽器寬度到必定程度時,就會出現以下效果:

固然爲何你們應該都想獲得,由於 magin:10px;是固定的,當縮小到必定程度,width:30%已經不能填滿整個100%的寬度了.

其實,響應式聽名字好像挺高大上,其實最重要的表現形式就是這種.借用流動佈局讓界面顯得不侷促.好比,當界面縮小到必定程度的時候,直接顯示成下面這種效果:

其實,就是css裏面修改每個div的width就好:

div{
	float: left;
	width: 95%;
	height: 100px;
	margin: 10px;
}

這裏就是把 width:30%; 修改爲了: width:100%;.

那剩下的問題就是判斷窗口大小了,首先想到的就是使用js,其實這裏不必,能夠直接使用媒體查詢

六.media query 媒體查詢

講到響應式,那麼媒體查詢(media query)確定是不能避過的,概念就很少講,其實直接看代碼實驗

div{
	float: left;
	width: 30%;
	height: 100px;
	margin: 10px;
}
@media only screen and (max-width: 600px) {
	div{
		width: 95%;
	}
}

上面的代碼,表示正常狀況下div的width仍是維持在30%沒有變化,可是當檢測到screen的最大寬度是600px的時候,就將執行@media裏面的css,其實就是至關於利用了層疊樣式表的特性,@media裏面的代碼將原來的覆蓋了.因而可知,@media放在div樣式前面能夠嗎?

固然,既然又max-width,就會有min-width,不少初學者一直沒搞清楚這兩個的區別,總是搞混淆.其實記住一點. max-width就是當屏幕小於等於多少的時候執行(<=) min-width就是當屏幕大於等於多少的時候執行(>=)

因此,有時候精確判斷的時候,能夠寫屏幕>=多少 and 屏幕 <= 多少的時候執行:

div{ float: left; width: 30%; height: 100px; margin: 10px; } @media only screen and (min-width: 601px) and (max-width: 980px) { div{ width: 45%; } } @media only screen and (max-width: 600px) { div{ width: 95%; } }

上面的代碼至關於,當 屏幕寬度 >= 601px && 屏幕寬度 <= 980px的時候,頁面上實際上在一行顯示2個div,由於2個45%就已是90%,剩下的那個確定就被擠下去了.

當屏幕寬度<=600px的時候,就讓一個div佔滿一行(95%)

媒體查詢固然不僅是這些,不過上面的部分是最重要最經常使用的,媒體查詢其實還有不少其餘屬性

七.使用 Media Queries 適配對應樣式

經常使用於佈局的CSS Media Queries有如下幾種

設備類型(media type): all全部設備 screen 電腦顯示器 print 打印用紙或打印預覽視圖 handheld 便攜設備 tv 電視機類型的設備 speech 語意和音頻盒成器 braille 盲人用點字法觸覺回饋設備 embossed 盲文打印機 projection 各類投影設備 tty 使用固定密度字母柵格的媒介，好比電傳打字機和終端

設備特性(media feature): width 瀏覽器寬度 height 瀏覽器高度 device-width 設備屏幕分辨率的寬度值 device-height設備屏幕分辨率的高度值 orientation 瀏覽器窗口的方向縱向仍是橫向，當窗口的高度值大於等於寬度時該特性值爲portrait，不然爲landscape aspect-ratio 比例值，瀏覽器的縱橫比 device-aspect-ratio 比例值，屏幕的縱橫比

注意device-width/height與width/height的區別.下面都是判讀的設備的寬高而不是瀏覽器

/* for 240 px width screen */ @media only screen and (max-device-width:240px){ selector{ ... } } /* for 320px width screen */ @media only screen and (min-device-width:241px) and (max-device-width:320px){ selector{ ... } } /* for 480 px width screen */ @media only screen (min-device-width:321px)and (max-device-width:480px){ selector{ ... } }

關於響應式其實在工做中有不少細節,這裏說的很簡單,可是實際卻有不少的坑,因此只有多練習多作.好比圖片的問題,高分辨率(DPI)的問題等等,這裏就再也不細說.

下面說一個工做中常常會遇到的問題:

高分辨率下的1px border,這是在蘋果的設備上常常會遇到的問題,你們能夠留做備份查詢

因爲高清屏的特性，1px是由2×2個像素點來渲染，那麼咱們樣式上的border:1px在Retina屏下會渲染成2px的邊框，與設計稿有出入，爲了追求1px精準還原，咱們就不得不拿出一個完美的解決方案

在Photoshop中，若是須要看似0.5px的邊框，常見的方法就是對1px邊框加上陰影模糊1px。同理，咱們在retina屏下須要作到真實的1px邊框，可利用box-shadow屬性模擬。

@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) { button { border:none; padding:0 16px; box-shadow: inset 0 0 1px #000, inset 0 1px 0 #75c2f8, 0 1px 1px -1px rgba(0, 0, 0, .5); }