響應式和自適應的區別?教你初玩響應式!
阿新 • • 發佈:2018-12-23
隨著移動裝置的不斷髮展,移動裝置已經趕超傳統pc。隨之而來的就是傳統pc網站的變革。隨之出現的html5 + css3.推動了這一變革!
所以我花幾天時間,把去轉盤的傳統網頁修改成為響應式網站。
點選看效果:去轉盤網 【www.quzhuanpan.com】(注意pc端和手機端不同喲!)
好!下面給出我的一些總結!希望能幫助到大家!
1.允許網頁寬度自動調整
"自適應網頁設計"到底是怎麼做到的?其實並不難。首先,在網頁程式碼的頭部,加入一行viewport元標籤
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網頁預設的寬度和高度,上面這行程式碼的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。
所有主流瀏覽器都支援這個設定,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2、儘量少使用絕對寬度
由於網頁會根據螢幕寬度調整佈局,所以不能使用絕對寬度的佈局,也不能使用具有絕對寬度的元素。這一條非常重要。
具體說,CSS程式碼不能指定畫素寬度:
width:xxx px;
通過指定百分比寬度來替代:同時還可以配合css的cal,進行計算寬度
width: xx%;
或者
width:auto;
3、相對大小的字型
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)。
字型不是必須的,這個關鍵看需求!自己把握吧!嘿嘿。。。
4、流動佈局(fluid grid)
"流動佈局"的含義是,各個區塊的位置都是浮動的,不是固定不變的。更多內容請檢視流動佈局的文章。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢位),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
5、選擇載入CSS
"自適應網頁設計"的核心,就是CSS3引入的Media Query模組。它的意思就是,自動探測螢幕寬度,然後載入相應的CSS檔案。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的程式碼意思是,如果螢幕寬度小於400畫素(max-device-width: 400px),就載入tinyScreen.css檔案。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果螢幕寬度在400畫素到600畫素之間,則載入smallScreen.css檔案。
除了用html標籤載入CSS檔案,還可以在現有CSS檔案中載入。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
6、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)。
7、圖片的自適應(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);
});
不過,有條件的話,最好還是根據不同大小的螢幕,載入不同解析度的圖片。有很多方法可以做到這一條,伺服器端和客戶端都可以實現。
上面基本上就是,我總結的響應式的注意點。在一個網站設計的時候,就要想到移動端要怎麼展示。考慮充分了在開寫,不然後面統一移動裝置的時候,就很麻煩,而且程式碼不好維護!做前端的應該懂得。
所以我花幾天時間,把去轉盤的傳統網頁修改成為響應式網站。
點選看效果:去轉盤網 【www.quzhuanpan.com】(注意pc端和手機端不同喲!)
好!下面給出我的一些總結!希望能幫助到大家!
1.允許網頁寬度自動調整
"自適應網頁設計"到底是怎麼做到的?其實並不難。首先,在網頁程式碼的頭部,加入一行viewport元標籤
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport是網頁預設的寬度和高度,上面這行程式碼的意思是,網頁寬度預設等於螢幕寬度(width=device-width),原始縮放比例(initial-scale=1)為1.0,即網頁初始大小佔螢幕面積的100%。
所有主流瀏覽器都支援這個設定,包括IE9。對於那些老式瀏覽器(主要是IE6、7、8),需要使用css3-mediaqueries.js。
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
2、儘量少使用絕對寬度
由於網頁會根據螢幕寬度調整佈局,所以不能使用絕對寬度的佈局,也不能使用具有絕對寬度的元素。這一條非常重要。
具體說,CSS程式碼不能指定畫素寬度:
width:xxx px;
通過指定百分比寬度來替代:同時還可以配合css的cal,進行計算寬度
width: xx%;
或者
width:auto;
3、相對大小的字型
字型也不能使用絕對大小(px),而只能使用相對大小(em)或者高清方案(rem),rem不侷限於字型大小,前面的寬度width也可以使用,代替百分比。
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)。
字型不是必須的,這個關鍵看需求!自己把握吧!嘿嘿。。。
4、流動佈局(fluid grid)
"流動佈局"的含義是,各個區塊的位置都是浮動的,不是固定不變的。更多內容請檢視流動佈局的文章。
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是,如果寬度太小,放不下兩個元素,後面的元素會自動滾動到前面元素的下方,不會在水平方向overflow(溢位),避免了水平滾動條的出現。
另外,絕對定位(position: absolute)的使用,也要非常小心。
5、選擇載入CSS
"自適應網頁設計"的核心,就是CSS3引入的Media Query模組。它的意思就是,自動探測螢幕寬度,然後載入相應的CSS檔案。
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" />
上面的程式碼意思是,如果螢幕寬度小於400畫素(max-device-width: 400px),就載入tinyScreen.css檔案。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" />
如果螢幕寬度在400畫素到600畫素之間,則載入smallScreen.css檔案。
除了用html標籤載入CSS檔案,還可以在現有CSS檔案中載入。
@import url("tinyScreen.css") screen and (max-device-width: 400px);
6、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)。
7、圖片的自適應(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);
});
不過,有條件的話,最好還是根據不同大小的螢幕,載入不同解析度的圖片。有很多方法可以做到這一條,伺服器端和客戶端都可以實現。
上面基本上就是,我總結的響應式的注意點。在一個網站設計的時候,就要想到移動端要怎麼展示。考慮充分了在開寫,不然後面統一移動裝置的時候,就很麻煩,而且程式碼不好維護!做前端的應該懂得。