大家好昌犹，我是IT修真院鄭州分院第一期的學(xué)員胡嘉杰澈吨，一枚正直純潔善良的WEB前端程序員窃判。
今天給大家分享一下，修真院官網(wǎng)CSS任務(wù)11惠窄，深度思考中的知識(shí)點(diǎn)——自適應(yīng)和響應(yīng)式的區(qū)別
1.背景介紹
最開始的電腦顯示器分辨率種類不多蒸眠，網(wǎng)頁(yè)設(shè)計(jì)者都會(huì)設(shè)計(jì)固定寬度的頁(yè)面。隨著顯示器越來(lái)越多杆融，這種方式的頁(yè)面出現(xiàn)了問題楞卡。于是出現(xiàn)了自適應(yīng)布局。
再后來(lái)脾歇，Google 發(fā)布了 Android蒋腮，還有 HTML5 標(biāo)準(zhǔn)的發(fā)布。手機(jī)雖然屏幕變小了藕各，但是卻提供了更豐富的功能池摧，為了讓網(wǎng)頁(yè)適應(yīng)小屏幕顯示，出現(xiàn)了響應(yīng)式布局激况。
2.知識(shí)剖析
什么是自適應(yīng)
自適應(yīng)作彤，英文名稱Adaptive Design，縮寫AWD,即為不同大小的屏幕上呈現(xiàn)同樣網(wǎng)頁(yè)內(nèi)容乌逐。
示例：攜程旅行
什么是響應(yīng)式
Responsive design,簡(jiǎn)稱RWD
自適應(yīng)暴露出一個(gè)問題宦棺，如果屏幕太小，即使網(wǎng)頁(yè)能夠根據(jù)屏幕大小進(jìn)行適配黔帕，但是會(huì)感覺在小屏幕上查看代咸，內(nèi)容過于擁擠，響應(yīng)式正是為了解決這個(gè)問題而衍生出來(lái)的概念成黄。它可以自動(dòng)識(shí)別屏幕寬度呐芥、并做出相應(yīng)調(diào)整的網(wǎng)頁(yè)設(shè)計(jì)，布局和展示的內(nèi)容可能會(huì)有所變動(dòng).
響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念奋岁，簡(jiǎn)而言之思瘟，就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的闻伶。
響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)滨攻，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用“大勢(shì)所趨”來(lái)形容也不為過蓝翰。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)光绕，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式畜份。
通俗得講是：css根據(jù)屏幕寬度诞帐，自動(dòng)調(diào)整網(wǎng)頁(yè)div顯示和布局，以適應(yīng)不同尺寸屏幕優(yōu)化瀏覽體驗(yàn)爆雹。 （根據(jù)屏幕寬度停蕉，自動(dòng)調(diào)整布局）
示例：IT修真院
自適應(yīng)與響應(yīng)式區(qū)別
自適應(yīng)最早通過寫不同分辨率的網(wǎng)頁(yè)來(lái)實(shí)現(xiàn),知道你的用戶將會(huì)使用哪些設(shè)備而進(jìn)行的有針對(duì)性的設(shè)計(jì)愕鼓。
響應(yīng)式是針對(duì)所謂普遍設(shè)備(universal)進(jìn)行的頁(yè)面設(shè)計(jì)，并不是針對(duì)指定的瀏覽設(shè)備慧起。
RWD,一般來(lái)說(shuō)在網(wǎng)頁(yè)設(shè)計(jì)初期就開始菇晃，所以舊網(wǎng)站要實(shí)現(xiàn)RWD 很可能要完全重建。而 AWD 則采用保留現(xiàn)有桌面網(wǎng)站而對(duì)于更小的分辨率做針對(duì)性的優(yōu)化（適應(yīng)）蚓挤，這點(diǎn)對(duì)于很多老的網(wǎng)站來(lái)說(shuō)很重要磺送，因?yàn)橹貥?gòu)成本太大。
其實(shí)RWD和AWD都是響應(yīng)式設(shè)計(jì)屈尼，從外觀上很難分辨册着，但他們自己運(yùn)行機(jī)理不同
RWD是主動(dòng)式的響應(yīng)設(shè)計(jì)，AWD是被動(dòng)式的響應(yīng)式設(shè)計(jì)
RWD不管用戶使用的是什么設(shè)備都是在服務(wù)器把數(shù)據(jù)推送到瀏覽器后脾歧，腳本或CSS自行偵測(cè)屏幕大小后執(zhí)行對(duì)應(yīng)的樣式表內(nèi)容甲捏，并且一直通過本地腳本在監(jiān)聽屏幕大小的變化，隨時(shí)做出樣式響應(yīng)的變化鞭执，所以是主動(dòng)的
AWD是用戶通過瀏覽器發(fā)送請(qǐng)求后司顿，服務(wù)器根據(jù)請(qǐng)求中夾帶的用戶設(shè)備設(shè)備信息做出判斷，調(diào)用已經(jīng)在服務(wù)器里準(zhǔn)備好的兄纺，適應(yīng)對(duì)應(yīng)設(shè)備樣式文件+HTML內(nèi)容+JS大溜，返回給瀏覽器以這種方式響應(yīng)不同設(shè)備。
3估脆、常見問題
自適應(yīng)要注意什么钦奋？
自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)到底是怎么做到的？在網(wǎng)頁(yè)代碼的頭部疙赠，加入一行viewport元標(biāo)簽付材。viewport是網(wǎng)頁(yè)默認(rèn)的寬度和高度，我們?cè)O(shè)置網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度（width=device-width）圃阳，原始縮放比例（initial-scale=1）為1.0厌衔，即網(wǎng)頁(yè)初始大小占屏幕面積的100%。我們還可以設(shè)置允許用戶縮放到的最大（maximum-scale）和最泻丛馈（minimum-scale）比例富寿。
metaname="viewport"content="width=device-width, initial-scale=1"
同時(shí)，由于網(wǎng)頁(yè)會(huì)根據(jù)屏幕寬度調(diào)整布局锣夹，所以不能使用絕對(duì)寬度的布局页徐，也不能使用具有絕對(duì)寬度的元素，而通過百分比來(lái)設(shè)置寬度晕城。
width: xx%;width:auto;
為了自適應(yīng)頁(yè)面的顯示效果泞坦，字體盡量不使用絕對(duì)大小（px）砖顷，而去使用相對(duì)大蟹∷（em）或者高清方案（rem）。
body {
font: normal 100% Helvetica, Arial, sans-serif;
}
p {
font-size: 1.5em;
}
html {
font-size: 62.5%;
}
p {
font-size: 1rem;
}
對(duì)于圖片的自適應(yīng)滤蝠，我們一般只需要一行css代碼img{max-width:100%;}就可以讓圖片較好地適應(yīng)div或table豌熄。
媒體查詢可以在同一個(gè)css文件中，根據(jù)不同的屏幕分辨率物咳，選擇應(yīng)用不同的CSS規(guī)則锣险。盡量將媒體查詢的位置靠近他們相關(guān)的規(guī)則。不要放到一個(gè)獨(dú)立的樣式文件中,或者丟在文檔的最底部览闰。 這樣做容易忘記芯肤。
媒體查詢的使用
.element{...}
@media screen and (min-width: 768px) {
.element {...}
}
1. 允許網(wǎng)頁(yè)自適應(yīng)寬度
2. 不固定寬度
3. 相對(duì)大小的字體
4. 流動(dòng)布局
5. 選擇加載CSS
6. CSS的@media規(guī)則
7. 圖片的自適應(yīng)
響應(yīng)式要注意什么？
響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)應(yīng)該注意的9個(gè)原則
為什么響應(yīng)式（自適應(yīng)）網(wǎng)站是一個(gè)坑
5.編碼實(shí)戰(zhàn)
6.擴(kuò)展思考
如何更好地處理自適應(yīng)和響應(yīng)式的應(yīng)用
什么時(shí)候使用Responsive design或Adaptive design很大程度取決于你的開發(fā)時(shí)間和預(yù)計(jì)的開發(fā)成本压鉴。如果在開發(fā)時(shí)間較為緊張的時(shí)候崖咨，同時(shí)也希望盡可能的讓網(wǎng)頁(yè)自適應(yīng)于多種設(shè)備，爭(zhēng)取在不同類型的屏幕上都保持良好的用戶體驗(yàn)油吭，那么使用Adaptive design的方式也是不錯(cuò)的選擇击蹲。
7.參考文獻(xiàn)
參考一：響應(yīng)式和自適應(yīng)的區(qū)別
參考二：知乎
參考三：響應(yīng)式和自適應(yīng)的區(qū)別
參考四：響應(yīng)式網(wǎng)站注意要點(diǎn)
8.更多討論
討論點(diǎn)一：自適應(yīng)和響應(yīng)式網(wǎng)頁(yè)的性能優(yōu)化
討論點(diǎn)二：怎么實(shí)現(xiàn)更大分辨率的良好顯示效果
------------------------------------------------------------------------------------------------------------------------
技能樹.IT修真院
“我們相信人人都可以成為一個(gè)工程師，現(xiàn)在開始婉宰，找個(gè)師兄歌豺，帶你入門，掌控自己學(xué)習(xí)的節(jié)奏心包，學(xué)習(xí)的路上不再迷美噙郑”。
這里是技能樹.IT修真院蟹腾，成千上萬(wàn)的師兄在這里找到了自己的學(xué)習(xí)路線痕惋，學(xué)習(xí)透明化，成長(zhǎng)可見化岭佳，師兄1對(duì)1免費(fèi)指導(dǎo)血巍。快來(lái)與我一起學(xué)習(xí)吧~
我的邀請(qǐng)碼：64290793珊随，或者你可以直接點(diǎn)擊此鏈接：http://www.jnshu.com/login/1/64290793
