響應式佈局

時間 2019-11-12

標籤響應佈局简体版

原文原文鏈接

一.概念

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>

六.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);
  }
}

相關標籤/搜索

每日一句

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