腳本實(shí)現(xiàn)自動(dòng)創(chuàng)建移動(dòng)端適配的相關(guān)文件
概述
手機(jī)上顯示網(wǎng)頁(yè)是將整個(gè)網(wǎng)頁(yè)縮小，模擬頁(yè)面寬度 980px ，可以使用 document.documentElement.clientWidth 來(lái)獲取到頁(yè)面寬度為 980px。在移動(dòng)端加上 <meta> 標(biāo)簽才是自適應(yīng)，否則就是 980px ，即網(wǎng)頁(yè)整體縮小。
meta 標(biāo)簽
<meta name=' viewport ' content=' width=device-width user-scalable=no initial-scale=1.0 maximum=1.0 minimum-scale=1.0 '>
說(shuō)明：
-
width=device-width==> 網(wǎng)頁(yè)寬度默認(rèn)等于屏幕寬度 -
user-scalable=no==> 用戶是否可以縮放 -
initial-scale=1.0==> 原始縮放比例為 1.0 ，即網(wǎng)頁(yè)初始大小占屏幕面積的 100% -
maximum=1.0==> 最大縮放比例 -
minimum-scale=1.0==> 最小縮放比例
<meta> 標(biāo)簽可以防止手機(jī)模擬 980px，防止頁(yè)面在用戶雙擊的時(shí)候放大和防止用戶橫屏
Media Query （媒體查詢）模塊
由一個(gè)可選的媒體類型和零個(gè)或多個(gè)使用媒體功能的限制了樣式表范圍的表達(dá)式組成，即對(duì)媒體進(jìn)行某些條件的查詢
-
目前來(lái)說(shuō)只用兩種模式 ：
- 移動(dòng)端
- PC 端
-
兩種技術(shù)：
- mobiles-first ==> 先做移動(dòng)端頁(yè)面后做 PC 端頁(yè)面（推薦）
- desktop-first ==> 先做 PC 端頁(yè)面后做移動(dòng)端頁(yè)面
-
兩種方案：
- 移動(dòng)端和 PC 端分別跳轉(zhuǎn)不同網(wǎng)站（京東、淘寶）
- 渲染不同的 HTML+CSS（知乎）
<link> 元素中的 CSS 媒體查詢
滿足查詢條件，則生效，否則不生效。但是無(wú)論生效與否都會(huì)下載
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
樣式表中的CSS媒體查詢
滿足查詢條件，則生效，否則不生效。
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
操作符
- and 操作符 ==> 把多個(gè)媒體屬性組合成一條媒體查詢，對(duì)成鏈?zhǔn)降奶卣鬟M(jìn)行請(qǐng)求，只有當(dāng)每個(gè)屬性都為真時(shí)，結(jié)果才為真
(min-width: 700px) and (max-width: 960px) { ... }
- 逗號(hào)分隔列表 ==> 使用逗號(hào)分隔效果等同于or邏輯操作符。當(dāng)使用逗號(hào)分隔的媒體查詢時(shí)，如果任何一個(gè)媒體查詢返回真，樣式就是有效的
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
not 操作符 ==> 應(yīng)用于整個(gè)媒體查詢，在媒體查詢?yōu)榧贂r(shí)返回真
only 操作符 ==> 防止老舊的瀏覽器不支持帶媒體屬性的查詢而應(yīng)用到給定的樣式
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
說(shuō)明：若使用了not或only操作符，必須明確指定一個(gè)媒體類型。
媒體特征
- device-width ==> 設(shè)備寬度
- width ==> 寬度。描述了輸出設(shè)備渲染區(qū)域的寬度。接受 mix/min 前綴
響應(yīng)式
響應(yīng)式即不同的屏幕得到不同的樣式
長(zhǎng)度單位
- px ==> 絕對(duì)長(zhǎng)度單位，像素
- em ==> 相對(duì)長(zhǎng)度單位，這個(gè)單位表示元素的
font-size的計(jì)算值。 - rem ==> 相對(duì)長(zhǎng)度單位，這個(gè)單位代表根元素（<html>）的
font-size大小
說(shuō)明：網(wǎng)頁(yè)默認(rèn)的font-size: 16px - vh ==> viewport hight，相對(duì)長(zhǎng)度單位，視口高度的 1/100。
- vw ==> viewport width，相對(duì)長(zhǎng)度單位，視口寬度的 1/100。
說(shuō)明：vh 和 vw 的兼容性比較差，使用較少
動(dòng)態(tài) REM
由于手機(jī)上分辨率太多，不是做響應(yīng)式，只能退而求其次
- 百分比布局：高度問(wèn)題，寬度不知道具體大小，僅僅知道百分比。造成了寬度不確定導(dǎo)致高度和寬度不能做任何配合
- 動(dòng)態(tài)REM：一切單位以寬度為基準(zhǔn)（vw 啊，但是 vw 兼容性較差），退而求其次：rem
rem ==> html font-size =（JS實(shí)現(xiàn)）=> page width（頁(yè)面寬度）
<head>
<script>
var pageWidth = window.innerWidth
document.write( '<style>html{font-size:' + pageWidth/10 + 'px;}</style>' )
</script>
<style>
body{
font-size: 16px;
}
</style>
</head>
將 rem 變?yōu)?pageWidth/100 即可以表示 vw（視口寬度的 1/100），Chrome 瀏覽器默認(rèn)最小字號(hào) 12px，此時(shí)的 font-size 被 Chrome 瀏覽器強(qiáng)制為 12px。所以將 rem 變?yōu)?pageWidth/10 。
最佳實(shí)踐 & 套路
SASS 實(shí)現(xiàn)將 px 自動(dòng)變?yōu)?rem
LUNIX 安裝SASS
SASS 文件內(nèi)容
@function px( $px ){
@return $px/$designWidth*10 + rem; // 此處的 10 是 html{font-size:' + pageWidth/10 + 'px;} 中的10
}
$designWidth : 640; // 640 是設(shè)計(jì)稿的寬度，需要根據(jù)設(shè)計(jì)稿的寬度填寫(xiě)
相關(guān)知識(shí)點(diǎn)
- 移動(dòng)端中沒(méi)有 hover 事件，但是有 touch 事件
- 移動(dòng)端中沒(méi)有 resize 事件，并且沒(méi)有滾動(dòng)條（隱藏滾動(dòng)條）
- 使用相對(duì)大小的字體 rem
- 流動(dòng)布局，各個(gè)區(qū)塊都是浮動(dòng)的
- 選擇加載 CSS ，Media Query 模塊（CSS3）自動(dòng)探測(cè)屏幕寬度，然后加載相應(yīng)的 CSS 文件
- CSS 的 @media 規(guī)則
- 圖片自適應(yīng) max-width: 100%;
- 很小很小的地方使用 px ==> 1px
- rem 單位和其他單位混用，例如：
font-size: 16px
