web前端之移動端：知識匯
- 2019 年 10 月 10 日
- 筆記
一、響應式布局：
// Extra small devices (portrait phones, less than 576px) // No media query for `xs` since this is the default in Bootstrap // Small devices (landscape phones, 576px and up) @media (min-width: 576px) { ... } // Medium devices (tablets, 768px and up) @media (min-width: 768px) { ... } // Large devices (desktops, 992px and up) @media (min-width: 992px) { ... } // Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }二、移動端適配
移動設計圖： 640px，iopne6： 750px
PC屏： 1240px， 960px
概念：
螢幕尺寸： 螢幕對角線（英寸）
螢幕分辯率： 物理像素（像素點） 1024*1980 px
- 1px： 1橫向像素 * 1縱向像素
- 就是賣手機標註的螢幕像素
螢幕像素密度（PPI）： 一英寸內的擁有的像素
設備獨立像素：
是一種可以被程式所控制的虛擬像素，在Web開發中對應CSS像素
- 佔滿螢幕的虛擬的開發像素
像素比： 物理像素/設備獨立像素
2.1 為什麼適配：
像素：
點陣圖像素： 圖片的像素
- 當點陣圖像素 = 物理像素才能完美顯示
視口：
視覺視口： （就是文檔的實際在瀏覽器中的大小）
- 就是html元素
- 隨用戶的縮放改變，即網頁開發配置的尺寸被改變
- 網站設計稿，是小於等於視覺視口的
布局視口：（設備出廠定好了， 不能改變， 就是螢幕大小，不是螢幕分辯率）
- 瀏覽器默認的不出現滾動條的螢幕大小，所以，在移動端， 網頁設計尺寸， 不超過布局視口就不出現滾動條，（即配置的視覺視口大於布局視口）
- 滾動條只於布局視口有關
- 移動端要保證， 視覺視口 = 布局視口 ， 才能完整網頁
<meta name='viewport' width = 'device-width'/> // 布局視口等於視覺視口- width = ‘device-width’ 這個相當於移動端的協議，必須簽， 不簽的話， 調式工具的
像素比, 就會出錯 ； 簽了才是DPR=2, 或者DPR=3； - pc端viewport無效
理想視口：
- 簽了協議的視口
獲取視口的方法：
PC： 只有一個視口
document.docmentElenment.clientWidth (不包空滾動條)
window.inderWidth = 包括滾動條
screen.width = 解析度
完美視口：
<meta name='viewport' width = 'device-width, inition-scale=1.0'/> 移動端：
document.docmentElenment.clientwidth = 布局視口
window.inderWidth = 視覺視口（不用，兼容不好）
screen.width = 布局視口/或理想視口（不用）
縮放：
用戶縮放
PC： 會影響視覺視口，布局視口
移動端： 會影響視覺視口， 不影響布局視口
系統縮放
改變理想視口，做縮放
旋轉:
完美視口，能解決旋轉兼容問題
圖片：（設計 點陣圖像素 == 物理像素（解析度））
銳化： 圖片縮小
失真： 圖片放大
適配： 不同設備等比還原設計圖
1、rem適配：
- 改變了一個元素在不同設備上佔據的css像素的個數
- html的高寬==視覺視口，width，height，只讀；用戶縮放會影響
rem基於html的fontSize的大小; 所以所設計圖與html的font-size進行等比
（function(){ var styleNode = document.createElement('style') var htmlW = document.documenElement.clientWidth / 16 //將視覺視口分成16份 styleNode.innerHtml = `html{font-size:${htmlW} !important}` // 利用css才有！imporant屬性， 將根字體固定，防止誤改 document.head.appendChild(styleNode) }）()- 利用css才有！imporant屬性， 將根字體固定，防止誤改
優點 ： 沒有破壞完美視口
缺點： px到rem太複雜
2、viewport適配
- 改變視覺視口的大小， html的寬度， 使之等於設計圖
- 不同設備css像素一樣， 視覺視口縮放不一樣
(function(targetWidth){ let targetWidth = 640; var scale = documentElement.clientWidth/targetWidth var meta = document.querySelector(meta[name='viewport']) meta.content = `initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale}, user-scaleble=no` })()優點： 所量即所得
缺點： 沒有實現完美視口
3、 百分比適配（頁面簡單可以）
4、vw方案
- vw也是一個相對單位，它相對的是布局視口，1vw就是1%的布局視口寬度。
5、flexible, 是查詢螢幕，生成font-size的大小， 所以在不需要適配的時候， 還是要@media 做限定
一物理像素:
1、 圖片做border線
2、meta標籤：
- rem適配+scale縮放，border用px（taobao方案）
- 這樣會改變，適配， 不推薦
3、css3屬性；
- @media + transform： scale（1/dpr）縮放 （主流：）
4、box-shadow：
- -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
