響應(yīng)式
什么是響應(yīng)式頁面呢？
顧名思義響應(yīng)式頁面就是能做出響應(yīng)的頁面，它的頁面效果不是定死的，會隨著用戶的改變而改變酝枢。
如何著手響應(yīng)式有以下幾個思考的方向
- 找一份設(shè)計圖
- 使用Media Query
- 隱藏元素
- 添加meta viewport
- 明白手機端交互方式的區(qū)別
Media Query
是什么
Media query 翻譯過來就是媒介查詢匈仗，媒介就是我們查看這個網(wǎng)頁的設(shè)備底哗。
媒介查詢源于CSS3，它可以根據(jù)用戶的設(shè)備所具有的某些特征锚沸，來提供不同的樣式用于顯示跋选。
用法
引用方式
它的引用方式一共有兩種
- <link>元素中媒介查詢
- 樣式表中媒介查詢
<!-- link元素中的CSS媒體查詢 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 樣式表中的CSS媒體查詢 -->
<style>
@media (max-width: 600px) {
body{
background: red;
}
}
</style>
在link中使用媒介查詢后，即使不滿足樣式條件哗蜈，這個樣式文件依然會被下載前标。
條件判斷
媒介查詢的條件判斷的邏輯操作符只有and, only, not三種，多個判斷條件用()包裹后操作符隔開距潘。
//當媒介最大寬度為800px且是橫屏時里面的樣式生效
@media (max-width: 800px) and (orientation: landscape){
......
}
Mobile First
目前web前端開發(fā)項目類型可以分為兩種方式炼列，Mobile First 和 Desktop First。Mobile First就是優(yōu)先開發(fā)移動端后開發(fā)PC端音比，后者反之俭尖。
不同的Fist中我們Media Query針對的也不同，Mobile First中洞翩，因為我們以移動端為主稽犁，所以我們的Media Query應(yīng)該是針對PC的條件去控制，Desktop Fist則針對移動端設(shè)置條件樣式骚亿。
這里就用到了一開始所說隱藏
meta viewport
現(xiàn)在已亥，你已經(jīng)寫好了你的響應(yīng)式網(wǎng)頁，那么已經(jīng)可以了嗎来屠？
別急虑椎，你離完成僅剩最后一步。
由于歷史的原因俱笛，我們的手機在訪問網(wǎng)頁時捆姜，不管你是響應(yīng)式網(wǎng)頁還是非響應(yīng)式，瀏覽器都會將你的寬度改為980px迎膜。
這是歷史遺留的問題泥技，因為最早的智能手機為了完整的顯示一個網(wǎng)頁，直接將PC上的網(wǎng)頁縮放塞進手機瀏覽器中星虹，經(jīng)過調(diào)研零抬，發(fā)現(xiàn)大部分的網(wǎng)頁都是980px左右镊讼，所以當我們用手機訪問網(wǎng)頁時寬度都會被縮放到980px宽涌。
我們只需要加上這樣一行代碼就可以解決問題
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width設(shè)置頁面寬度為設(shè)備寬度。
user-scalable=no不允許用戶縮放
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0最大最小默認縮放比例都為1蝶棋。
這樣我們的響應(yīng)式網(wǎng)頁才完全生效了卸亮。
移動端特點
- 沒有hover
- 有touch
- 沒有滾動條
- 沒有IE
- 沒有resize
因為移動端是沒有hover事件的所以當我們在需要兼容移動端的頁面中應(yīng)該盡量少用hover事件。
移動端一般很少監(jiān)聽click事件玩裙，都是以touch事件為主兼贸，JS沒有滑動事件段直，但是可以通過touch事件模擬
沒有IE意味著我們可以為所欲為放飛自我，使用最新的CSS和HTML溶诞。
為什么需要響應(yīng)式鸯檬？
當我們需要給不同的設(shè)備顯示不同網(wǎng)頁（樣式）時，為什么不可以一開始就寫好多個網(wǎng)頁再由后端負責根據(jù)用戶設(shè)備來跳轉(zhuǎn)呢螺垢？
我們寫響應(yīng)式需要思考非常多的問題喧务，在一個頁面里html css需要考慮很多判斷邏輯，這些多出來代碼以及設(shè)計的時間可能已經(jīng)能夠?qū)懸粋€新的網(wǎng)頁枉圃，那為什么不一開始就寫兩個網(wǎng)頁就好了呢功茴？
確實，現(xiàn)在大部分互聯(lián)公司現(xiàn)在幾乎都不會去使用響應(yīng)式頁面孽亲。
- 博客園：響應(yīng)式
- 百度：非響應(yīng)式
- 谷歌：非響應(yīng)式
- 淘寶：非響應(yīng)式
- 頭條：非響應(yīng)式
- 知乎：非響應(yīng)式
國內(nèi)大型公司可以說基本上都是非響應(yīng)式網(wǎng)頁坎穿，只有那些交互性較弱比如個人blog，小型企業(yè)站點以展示內(nèi)容為主的網(wǎng)站還會應(yīng)用響應(yīng)式設(shè)計返劲。
動態(tài)REM自適應(yīng)
在了解rem之前需要先知道
- 瀏覽器的默認font-size是16px
- Font-size最優(yōu)先用戶在瀏覽器中設(shè)置的大小玲昧，chrome默認最小12px。
什么是rem篮绿？
rem是眾多number單位中的其中一個酌呆，它的值為根元素font-size的值。
<style>
body{font-size: 40px;}
p{font-size: 2rem;}
</style>
<body>
<p>hello</p>
word
<div>!!</div>
</body>
因為給body標簽設(shè)置了40px搔耕，所以body里面的內(nèi)容應(yīng)該都是40px隙袁。但是由于p在后面優(yōu)先設(shè)置了2rem，瀏覽器的默認font-size為16px弃榨，也就是html標簽的font-size就是16px菩收，所以現(xiàn)在的hello是32px。
也就是說rem的根元素的值指的就是html 的font-size的值鲸睛。
rem有什么用娜饵？
上面扯了那么多介紹rem，那肯定是有用的官辈。
別急箱舞，讓我細細道來。
我們是希望在所有的手機上看到的頁面都是一個樣子的，頁面內(nèi)每個元素在固定的位置肺魁。但是按照常規(guī)方法电湘，一個樣式能做到讓所有手機完美（90%）還原設(shè)計稿的樣子嗎？
答曰：可以，用media寫響應(yīng)式寂呛，針對不同的設(shè)備寬度怎诫，展現(xiàn)不同的樣式。
好的贷痪，那讓我們打開開發(fā)者工具模擬手機看看幻妓。
- iPhone X : 375 x 812
- iPhone 6/7/8 Plus : 414 x 736
- iPhone 6/7/8 : 375 x 667
- iPhone 5/SE : 320 x 568
- Galaxy S5 : 360 x 640
- Pixel 2 : 411 x 731
看到這些你還想用media嗎？你要寫多少個media劫拢？光是一個iPhone就可以搞死你更別說還有一堆的國產(chǎn)機等著你適配涌哲。
那怎么辦呢，有沒有辦法可以讓一個CSS適應(yīng)“所有”的手機呢尚镰？
辦法肯定有阀圾，那就是自適應(yīng)，我們不需要知道用戶的手機的長寬是多少狗唉，我們讓網(wǎng)頁自己匹配用戶的手機長寬就好了啊初烘。
自適應(yīng)布局
自適應(yīng)布局有下面兩種常規(guī)方法
- 百分比布局：寬度百分比。
- 縮放布局：按比例設(shè)置網(wǎng)頁寬高分俯。
這兩個布局一個百分一個比例看上去意思是一樣肾筐，其實不然。百分比布局中的寬度樣式不是一個具體的值缸剪，而縮放是在已知寬度的情況下定死的值吗铐。
/*device-width = 320*/
body{
width: 50% /*160px*/
}
body{
width: 160px /*160px*/
}
如果我們的目的是在手機上展現(xiàn)body占據(jù)屏幕一半的效果的話，上面兩種寫法在寬度為320px的手機上效果是一樣的杏节，都是將body的寬度設(shè)置為手機的一半長唬渗。
現(xiàn)在只是在寬度為320px的手機上展現(xiàn)了1/2的效果，那么當我們的手機是寬度300px的時候呢奋渔？
/*device-width = 300*/
body{
width: 50% /*150px*/
}
body{
width: 150px /*150px*/
}
如果是百分比布局是不是不需要改動镊逝，而按比例布局需要改動。
那么百分比布局能解決問題嗎嫉鲸？
不行撑蒜，百分比布局有個缺陷，高度是未知的玄渗，因為高度沒有辦法百分比座菠，如果定死了高度那么就沒有辦法與寬度適應(yīng)了。一旦我們的頁面一復(fù)雜藤树，未知的高度會帶來更多的問題浴滴。
總的來說我們的頁面需要靠寬度適配，再用這個寬度來決定自身的高度以達到寬高都成比例也榄，在不同的手機上都可以按同樣的比例展現(xiàn)巡莹。
那有什么方法可以準確獲取手機的寬度嗎？
這時我們的英雄登場了甜紫，rem降宅。
上面說到rem是根元素font-size的值，那么我們只需要將根元素html的font-size為手機的寬度囚霸，這時不就可以通過rem來設(shè)置有比例的寬高樣式了嗎腰根。
rem怎么用？
var width=document.documentElement.clientWidth;
document.write(`<style>html{font-size:${width / 10}px}</style>`)
JS代碼就兩行拓型，將rem設(shè)置為手機寬度的的10%额嘿，雖然設(shè)置width / 100可以完全模擬vw（自適應(yīng)不用vw是因為vw兼容性太差了），但是當em為1%時劣挫，一但寬度小于120px時册养，font-size就會小于12px，低于chrome默認的最小font-size就會出現(xiàn)bug压固，所以我們設(shè)置rem為10%球拦。
還需要注意的是雖然width和height是用rem使用，但是不代表別的大小也需要用rem（如果字體的font-size也用rem帐我，那當寬度很小時坎炼，字會小的看不清），我們應(yīng)該搭配別的單位以獲得更美觀的效果拦键。
使用SCSS自動轉(zhuǎn)換px
為了減少我們計算量谣光，我們可以直接使用scss寫一個function幫我們解決轉(zhuǎn)換的問題。
@function px( $px ){
@return $px/$designWidth*10 + rem;
}
$designWidth : 640芬为。
.box{
background: grey;
width: px(256);
height: px(128);
margin: px(32) px(32);
float: left;
}
