? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 今天給大家分享“如何進行自適應(yīng)網(wǎng)頁設(shè)計？”
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?目錄
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?1.背景介紹
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?2.知識剖析
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?3.常見問題
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?4.解決方案
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?5.編碼實戰(zhàn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?6.擴展思考
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?7.參考文獻
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?8.更多討論
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 1.背景介紹
隨著筆記本的普及，顯示器分辨率越來越多，一些針對固定分辨率而設(shè)計的頁面出現(xiàn)在不同分辨 率設(shè)備上打開出現(xiàn)了問題，于是出現(xiàn)了一種新的布局方式：寬度自適應(yīng)布局。我們平時談?wù)摰淖赃m應(yīng)布局，大 多指的就是寬度自適應(yīng)布局。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 2.知識剖析
自適應(yīng)的概念
自適應(yīng)通俗的說就是讓同一個html文件能夠在不同大小不同分辨率的設(shè)備上的顯示相同的效果。
如何實現(xiàn)自適應(yīng)
自適應(yīng)的概念
自適應(yīng)通俗的說就是讓同一個html文件能夠在不同大小不同分辨率的設(shè)備上的顯示相同的效果。
自適應(yīng)網(wǎng)站
如何實現(xiàn)自適應(yīng)
【1】允許網(wǎng)頁寬度根據(jù)屏幕寬度自動調(diào)整
首先，在網(wǎng)頁代碼的頭部，加入一行viewport標簽。
meta name="viewport" content="width=device-width, initial-scale=1"
viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度 （width=device-width），原始縮放比例（initial-scale=1）為1.0，即網(wǎng)頁初始大小占屏幕面積的100%。
【2】盡量少使用絕對寬度
由于網(wǎng)頁會根據(jù)屏幕寬度調(diào)整布局，所以不能使用絕對寬度的布局，也不能使用具有絕對寬度的元素。這一條非常重要。 具體說，CSS代碼不能指定像素寬度,通過指定百分比寬度來替代：同時還可以配合css的cal，進行計算寬度.
width: xx%; width:auto;
【3】相對大小的字體
字體也不能使用絕對大?。╬x），而只能使用相對大?。╡m）或者高清方案（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）。
【4】 流動布局（fluid grid） "流動布局"的含義是，各個區(qū)塊的位置都是浮動的，不是固定不變的。
[html] view plain copy
.main {
float: right;
width: 70%;
}
.leftBar {
float: left;
width: 25%;
}
float的好處是，如果寬度太小，放不下兩個元素，后面的元素會自動滾動到前面元素的下方，不會在水平方向overflow（溢出），避免了水平滾動條的出現(xiàn)。 另外，絕對定位（position: absolute）的使用，也要非常小心。
【5】選擇加載CSS
"自適應(yīng)網(wǎng)頁設(shè)計"的核心，就是CSS3引入的Media Query模塊。 它的意思就是，自動探測屏幕寬度，然后加載相應(yīng)的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文件，還可以在現(xiàn)有CSS文件中加載。
【6】CSS的@media規(guī)則
同一個CSS文件中，也可以根據(jù)不同的屏幕分辨率，選擇應(yīng)用不同的CSS規(guī)則。
@media? screen and (max-device-width: 400px) {
.column {
float: none;
width:auto;
}
#sidebar {
display:none;
}
}
上面的代碼意思是，如果屏幕寬度小于400像素，則column塊取消浮動（float:none）、 寬度自動調(diào)節(jié)（width:auto），sidebar塊不顯示（display:none）。
【7】 圖片的自適應(yīng)（fluid image）
除了布局和文本，"自適應(yīng)網(wǎng)頁設(shè)計"還必須實現(xiàn)圖片的自動縮放。 這只要一行CSS代碼：
img { max-width: 100%;}
這行代碼對于大多數(shù)嵌入網(wǎng)頁的視頻也有效，所以可以寫成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好寫成：
img { width: 100%; }
此外，windows平臺縮放圖片時，可能出現(xiàn)圖像失真現(xiàn)象。這時，可以嘗試使用IE的專有命令：
img { -ms-interpolation-mode: bicubic; }
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3.常見問題
自適應(yīng)與響應(yīng)式布局有什么區(qū)別？
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 4.解答
自適應(yīng)的體驗https://www.tmall.com/#/main
響應(yīng)式的體驗 http://www.jnshu.com/home
響應(yīng)式的概念應(yīng)該覆蓋了自適應(yīng)，而且涵蓋的內(nèi)容更多。
自適應(yīng)還是暴露出一個問題，如果屏幕太小，即使網(wǎng)頁能夠根據(jù)屏幕大小進行適配， 但是會感覺在小屏幕上查看，內(nèi)容過于擁擠，響應(yīng)式正是為了解決這個問題而衍生出來的概念。 它可以自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計，布局和展示的內(nèi)容可能會有所變動。 響應(yīng)式布局被大家熟知的一個重要原因就是 twitter 開源了 bootstrap。 相比自適應(yīng)網(wǎng)站，響應(yīng)式網(wǎng)站省去了很多的控件，同時也省去了不少建立和維護的功夫。 響應(yīng)式布局就是一種流體，在按百分比縮放時也能相當?shù)牧鲿场?使用響應(yīng)式設(shè)計，你要記住所有的布局。這當然可能會使過程混亂，并且使設(shè)計更加復雜。 這就意味著你應(yīng)該專注于中等分辨率的視圖，然后再用media querie調(diào)整為更低或更高的分辨率。 所以通常的做法是，在一個新的項目中使用響應(yīng)式設(shè)計，在后期的改造中使用自適應(yīng)設(shè)計。 自適應(yīng)可用于改造現(xiàn)有的網(wǎng)站使其更好地適應(yīng)移動端。這使你的設(shè)計可控制和開發(fā)多個特定的視圖。 你開發(fā)視圖的數(shù)量完全取決于你，你的公司和全面的預(yù)算。然而，它也提供了一定量的控件 （例如在內(nèi)容和布局上），如此你便無須使用響應(yīng)式設(shè)計。 自適應(yīng)網(wǎng)站可以用于設(shè)計和開發(fā)一個擁有多個自適應(yīng)視圖的網(wǎng)站。所以這種設(shè)計通常用于改造網(wǎng)站。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?5.編碼實戰(zhàn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?6.擴展思考
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?做自適應(yīng)時話需要注意哪些點。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?7.參考文獻
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?zxl1033394132的專欄?bboyjoe的博客
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?8.更多討論
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 響應(yīng)式該如何布局
視頻：視頻
ppt鏈接：ppt
? ? 鳴謝
感謝大家觀看
BY : 聶義中
