移動適配 - 基礎筆記梳理

時間 2019-11-17

標籤移動適配基礎筆記梳理欄目無線简体版

原文原文鏈接

備戰秋招，複習基礎。若有錯誤，歡迎批評指正，共同進步！css

桌面瀏覽器的尺寸與座標概念

屏幕尺寸web

screen.width/heightnpm

含義：用戶的屏幕的完整大小。json

度量：設備的pixels。瀏覽器

兼容性問題：IE8裏，無論使用IE7模式仍是IE8模式，都以CSS的pixels來度量bash
瀏覽器尺寸ide

window.innerWidth/Heightpost

含義：包含滾動條尺寸的瀏覽器完整尺寸flex

度量：CSS的pixels

兼容性問題：IE不支持，Opera用設備pixels來度量
滾動移位

window.pageX/YOffset

含義：頁面的移位

度量：CSS的pixels

兼容性問題：pageXOffset 和 pageYOffset 在 IE 8 及以前版本的IE不支持, 使用document.body.scrollLeft and document.body.scrollTop 來取代
viewport

document. documentElement. clientWidth/Height

含義：viewport的尺寸。貌似從元素取值，但實際描述的確是viewport的尺寸。

度量：CSS的pixels

兼容性問題：無

功能：控制你網站的最高塊狀（block）容器：<html>元素。<html>元素爲viewport寬度的100%。viewport嚴格等於瀏覽器的窗口，不包含滾動條。
度量<html>元素

document. documentElement. offsetWidth/Height

含義：<html>的尺寸

度量：CSS的pixels

兼容性問題：IE用這個值標示viewport的尺寸而非<html>
事件座標

event.pageX/Y, event.clientX/Y, event.screenX/Y

含義：見下文

度量：見下文

兼容性問題：IE不支持pageX/Y,IE使用CSSpixels來度量screanX/Y

詳細描述:
- pageX/Y：從原點到事件觸發點的CSS的 pixels
- clientX/Y：從viewport原點（瀏覽器窗口）到事件觸發點的CSS的 pixels
- screenX/Y：從用戶顯示器窗口原點到事件觸發點的設備的 pixels。
Media查詢

div.sidebar { 
    width: 300px; 
} 
@media all and (max-width: 400px) { // styles assigned when width is smaller than 400px;  
    div.sidebar {
        width: 100px; 
    }   
}
複製代碼

* device-width/height使用screen.width/height來作爲的斷定值。該值以設備的pixels來度量
* width/height使用documentElement.clientWidth/Height即viewport的值。該值以CSS的pixels來度量
複製代碼

移動設備瀏覽器

我die了！這什麼鬼啊啊啊啊啊啊啊啊！！！不知所云！！！

其餘概念

物理像素：物理像素又被稱爲設備像素，他是顯示設備中一個最微小的物理部件。每一個像素能夠根據操做系統設置本身的顏色和亮度。正是這些設備像素的微小距離欺騙了咱們肉眼看到的圖像效果。
設備獨立像素：設備獨立像素也稱爲密度無關像素，能夠認爲是計算機座標系統中的一個點，這個點表明一個能夠由程序使用的虛擬像素(好比說CSS像素)，而後由相關係統轉換爲物理像素。
CSS像素： CSS像素是一個抽像的單位，主要使用在瀏覽器上，用來精確度量Web頁面上的內容。通常狀況之下，CSS像素稱爲與設備無關的像素(device-independent pixel)，簡稱DIPs。
屏幕密度：屏幕密度是指一個設備表面上存在的像素數量，它一般以每英寸有多少像素來計算(PPI)。
設備像素比：設備像素比簡稱爲dpr，其定義了物理像素和設備獨立像素的對應關係。它的值能夠按下面的公式計算獲得： 設備像素比＝物理像素 / 設備獨立像素

在JavaScript中，能夠經過window.devicePixelRatio獲取到當前設備的dpr。而在CSS中，能夠經過-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio進行媒體查詢。

flexible

經過Hack手段來根據設備的dpr值相應改變標籤中viewport的值，從而讓頁面達到縮放的效果，也變相的實現頁面的適配功能。

根據dpr的值來修改viewport實現1px的線
根據dpr的值來修改html的font-size，從而使用rem實現等比縮放
使用Hack手段用rem模擬vw特性

<!-- dpr = 1--> 
<meta name="viewport" content="initial-scale=scale,maximum-scale=scale,minimum-scale=scale,user-scalable=no">
<!-- dpr = 2--> 
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"> 
<!-- dpr = 3--> 
<meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333,user-scalable=no">
複製代碼

CSS3新單位 vw

資料參考：談談CSS3的長度單位（vh、vw、rem）

vw 是相對視口（viewport）的寬度而定的，長度等於視口寬度的1/100。

假如瀏覽器的寬度爲200px，那麼1vw就等於2px（200px/100）。
vh是相對視口（viewport）的高度而定的，長度等於視口高度的1/100。

假如瀏覽器的高度爲500px，那麼1vh就等於5px（500px/100）。
vmin和vmax是相對於視口的高度和寬度二者之間的最小值或最大值。

若是瀏覽器的高爲300px、寬爲500px，那麼1vmin就是3px，1vmax就是5px；若是瀏覽器的高爲800px，寬爲1080px，那麼1vmin也是8px，1vmax也是10.8px。

vw適配移動端

資料參考：【移動端適配】用vw、vh＋媒體查詢打造最完美的移動端適配方案

↑ 寫得超全！！一篇完事兒！！

移動端適配神器——postcss-px-to-viewport

npm install postcss-px-to-viewport --save-dev
複製代碼

經過媒體查詢處理邊界狀況
使用selectorBlackList選擇器過濾class，解決組件庫衝突

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。