概述
手機上顯示網頁是將整個網頁縮小，模擬頁面寬度 980px ，可以使用 document.documentElement.clientWidth 來獲取到頁面寬度爲
980px。在移動端加上 <meta> 標籤纔是自適應，否則就是 980px
，即網頁整體縮小。
meta 標籤
1 |
<meta name=' viewport ' content=' width=device-width user-scalable=no initial-scale=1.0 maximum=1.0 minimum-scale=1.0 '> |
說明：
width=device-width==> 網頁寬度默認等於屏幕寬度user-scalable=no==> 用戶是否可以縮放initial-scale=1.0==> 原始縮放比例爲 1.0 ，即網頁初始大小佔屏幕面積的 100%maximum=1.0==> 最大縮放比例minimum-scale=1.0==> 最小縮放比例
<meta> 標籤可以防止手機模擬 980px，防止頁面在用戶雙擊的時候放大和防止用戶橫屏
Media Query （媒體查詢）模塊
由一個可選的媒體類型和零個或多個使用媒體功能的限制了樣式表範圍的表達式組成，即對媒體進行某些條件的查詢
-
目前來說只用兩種模式 ：
- 移動端
- PC 端
-
兩種技術：
- mobiles-first ==> 先做移動端頁面後做 PC 端頁面（推薦）
- desktop-first ==> 先做 PC 端頁面後做移動端頁面
-
兩種方案：
- 移動端和 PC 端分別跳轉不同網站（京東、淘寶）
- 渲染不同的 HTML+CSS（知乎）
元素中的 CSS 媒體查詢
滿足查詢條件，則生效，否則不生效。但是無論生效與否都會下載
1 |
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> |
樣式表中的CSS媒體查詢
滿足查詢條件，則生效，否則不生效。
1 |
<style> |
操作符
-
and 操作符 ==> 把多個媒體屬性組合成一條媒體查詢，對成鏈式的特徵進行請求，只有當每個屬性都爲真時，結果才爲真
1
(min-width: 700px) and (max-width: 960px) { ... }
-
逗號分隔列表 ==> 使用逗號分隔效果等同於or邏輯操作符。當使用逗號分隔的媒體查詢時，如果任何一個媒體查詢返回真，樣式就是有效的
1
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
-
not 操作符 ==> 應用於整個媒體查詢，在媒體查詢爲假時返回真
-
only 操作符 ==> 防止老舊的瀏覽器不支持帶媒體屬性的查詢而應用到給定的樣式
1
<link rel="stylesheet" media="only screen and (color)" href="example.css" />
說明：若使用了not或only操作符，必須明確指定一個媒體類型。
媒體特徵
- device-width ==> 設備寬度
- width ==> 寬度。描述了輸出設備渲染區域的寬度。接受 mix/min 前綴
響應式
響應式即不同的屏幕得到不同的樣式
長度單位
- px ==> 絕對長度單位，像素
- em ==> 相對長度單位，這個單位表示元素的
font-size的計算值。 - rem ==> 相對長度單位，這個單位代表根元素（）的
font-size大小
說明：網頁默認的font-size: 16px - vh ==> viewport hight，相對長度單位，視口高度的 1/100。
- vw ==> viewport width，相對長度單位，視口寬度的 1/100。
說明：vh 和 vw 的兼容性比較差，使用較少
動態 REM
由於手機上分辨率太多，不是做響應式，只能退而求其次
- 百分比佈局：高度問題，寬度不知道具體大小，僅僅知道百分比。造成了寬度不確定導致高度和寬度不能做任何配合
- 動態REM：一切單位以寬度爲基準（vw 啊，但是 vw 兼容性較差），退而求其次：rem
rem ==> html font-size =（JS實現）=> page width（頁面寬度）
1 |
<head> |
將 rem 變爲 pageWidth/100 即可以表示 vw（視口寬度的 1/100），Chrome 瀏覽器默認最小字號 12px，此時的 font-size 被
Chrome 瀏覽器強制爲 12px。所以將 rem 變爲 pageWidth/10 。
最佳實踐 & 套路
SASS 實現將 px 自動變爲 rem
LUNIX 安裝SASS
SASS 文件內容
1 |
@function px( $px ){ |
相關知識點
- 移動端中沒有 hover 事件，但是有 touch 事件
- 移動端中沒有 resize 事件，並且沒有滾動條（隱藏滾動條）
- 使用相對大小的字體 rem
- 流動佈局，各個區塊都是浮動的
- 選擇加載 CSS ，Media Query 模塊（CSS3）自動探測屏幕寬度，然後加載相應的 CSS 文件
- CSS 的 @media 規則
- 圖片自適應 max-width: 100%;
- 很小很小的地方使用 px ==> 1px
- rem 單位和其他單位混用，例如：
font-size: 16px