一、前端開發常用單位

1.像素(Pixel)

在前端開發中視口的水平方向和垂直方向是由很多小方格組成的,一個小方格就是一個像素,
不會隨著視口大小的變化而變化,像素是一個固定的單位(絕對單位);

2.百分比

百分比是前端開發中的一個動態(相對)單位,永遠都是以當前元素的父元素作為參考進行計算 子元素高寬度都是參考父元素高寬計算的
子元素padding/margin無論是水平還是垂直方向都是參考父元素寬度計算的
不能用百分比設定border

3.em

em是前端開發中的一個動態單位,是一個相對于元素字體大小的單位. 例如:font-size:12px; 那么1em=12px
當前元素設定了字體大小,那么就相對于當前元素的字體大小 當前元素沒有設定字體大小,那么就相對于第一個設定字體大小的祖先元素的字體大小
如果當前元素和所有祖先元素都沒有設定大小,那么就相當于瀏覽器默認的字體大小(1em=16px)

4.rem

rem就是root em,和em一樣是前端開發中的一個動態單位,rem與em的區別在于rem是一個相對于根元素字體大小的單位,例如根元素(html)
font-size:12px;那么1rem=12px 除了根元素以外,其它祖先元素的字體大小不會影響rem大小
如果根元素沒有設定字體大小,那么1rem=16px;

5.vw(Viewport Width)和vh(Viewport Height)

vw和vh是一個前端開發中的動態單位,是一個相對于網頁視口的單位 系統會將視口的寬度和高度分為100份,1vw就占視口寬度的百分之一
vw、vh和百分比不同的是,百分比永遠都是以父元素作為參考,vw和vh永遠都以視口作為參考
vmin:vw和vh中較小那個

vmax:vw和vh中較大那個 使用場景:保證移動開發中螢屏旋轉后尺寸不變

二、視口

視口簡單理解就是可視區域大小 在PC端,視口大小就是瀏覽器視窗可視區域大小
在移動端,視口大小并不等于視窗大小,移動端視口寬度被人為定義成了980

為什么是980?
因為過去網頁的版心都是980
喬布斯為了能夠讓網頁在移動端完美的顯示,所以將ios手機視口大小定義為980
后來谷歌也將Android手機定義成了980

移動端自動將視口寬度設定為980帶來的問題
雖然移動端自動將視口寬度設定為980之后讓我們可以完美地看到整個網頁
但是由于移動端的物理尺寸(設備寬度)是遠遠小于視口寬度的
所以為了能夠在較小范圍內看到視口中所有內容,那么就必須將內容縮小

如何保證在移動端不自動縮放網頁的尺寸

通過meta設定的視窗大小 width=device-width
設定視口寬度等于設備的寬度 initial-scale=1.0 初始縮放比例,1不縮放 maximum-scale:允許用戶縮放到最大比例
minimum-scale:允許用戶縮放到的最小比例 user-scalable:用戶是否可以手動縮放比例

三、設備像素和CSS像素

1.什么是設備像素和CSS像素?

1.1設備像素又稱為物理像素, 是"物理螢屏"上真實存在的發光點，只有螢屏一經出廠就固定不會改變
1.2CSS像素又稱為邏輯像素，是編程世界中虛擬的東西, 我們通過代碼設定的像素都是邏輯像素
例如: iPhone3G/iPhone3GS 3.5英寸/ 邏輯像素320480 / 設備像素320480
iPhone4/4S 3.5英寸/ 邏輯像素320480 / 設備像素640960
也就是說CSS像素和設備像素在有的時候是不一樣的

什么時候不一樣?為什么不一樣?

在PC端，1個CSS像素往往都是對應著電腦螢屏的1個物理像素, 所以我們無需關心PC端的CSS像素和設備像素

在手機端，最開始其實1個CSS個像素也是對應著手機螢屏的1個物理像素, 但是后來一個改變世界的男人(喬布斯)改變了這一切~ 從iPhone4開始，蘋果公司推出了所謂的retina視網膜螢屏， iPhone4的螢屏尺寸卻沒有變化，但是像素點卻多了一倍
這就導致了在1個CSS個像素等于1個物理像素的手機上, 我們設定1個CSS像素只會占用1個物理像素
而在1個CSS個像素不等于1個物理像素的手機上, 我們設定1個CSS像素就會占用2個物理像素
所以仔細觀察你會發現同樣是1像素但是在retina視網膜螢屏的手機上會粗一些

2.如何解決設備像素和CSS像素不一樣的問題?

    如果設備像素和CSS像素一樣, 那么無需處理不會帶來任何負面影響
    如果設備像素是CSS像素的2倍, 那么我們只需將CSS像素縮小一半即可
    但是有時候設備像素可能是CSS像素的3倍/4倍...

3.獲取設備像素比DPR(Device Pixel Ratio)

    DPR = 設備像素 / CSS像素
    iPhone3GS :  320 / 320 = 1
    iPhone4S:    640 / 320 = 2
    iPhone678:   750 / 375 = 2
    iPhoneX:     1125 / 375 = 3

在JS中我們可以通過 window.devicePixelRatio 獲取當前的設備像素

rem px 的不同寫法造成視覺上的偏差問題來源鏈接

移動端H5頁面中1px邊框的幾種解決方法鏈接

四、常用移動端適配方案

通過判斷PC/Android(ios)實作pc端/移動端界面自動跳轉

實作步驟:
1.默認打開PC端界面
2.在PC端界面中通過BOM拿到當前瀏覽器資訊
3.通過正則判斷當前瀏覽器是否是移動端瀏覽器
4.通過BOM的location物件實作跳轉到移動端界面

PC: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
移動端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
移動端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile Safari/537.36

 function isPc() {
    let userAgentInfo = navigator.userAgent;
    if(/iphone/i.test(userAgentInfo)){
        return false;
    }else if(/android/i.test(userAgentInfo)){
        return false;
    }else{
    return true;
    }
}
if(!isPc()){
    location.href = "https://m.baidu.com";
}else{
    location.href = "https://www.baidu.com";
}

1.通過media媒體查詢

媒體查詢@media(Media Query):為不同尺寸的螢屏設定不同的CSS樣式

媒體查詢引入方式:

方式一:

<style>
@media screen and (min-device-width:100px) and (max-device-width:200px){
    div{
        //css樣式
    }
}
@media screen and(min-device-width:201px) and (max-device-width:300px){
    div{
        //css樣式
    }
}
<style>

方式二:

<style media="(min-device-width:100px) and (max-device-width:300px)">
    div{
        //css樣式
    }
</style>
<style media="(min-device-width:301px) and (max-device-width:400px)">
    div{
        //css樣式
    }
</style>

方式三:

<link href="css-1/.css" rel="stylesheet"
    media="(min-device-width:100px) and (max-device-width:300px)">
<link href="css-2/.css" rel="stylesheet"
    media="(min-device-width:301px) and (max-device-width:400px)">    

2.通過media媒體查詢+rem

1.當下在企業開發中設計師提供給我們的移動端設計圖片是750xxx的或者1125xxx的
所以我們需要對設計師提供的圖片進行等比縮放, 這樣才能1:1還原設計圖片

2.如何等比縮放?
2.1將設計圖片等分為指定份數,求出每一份的大小
例如: 750設計圖片分為7.5份, 那么每一份的大小就是100px
2.2將目標螢屏也等分為指定份數,求出每一份的大小
例如: 375螢屏也分為7.5份, 那么每一份的大小就是50px
2.3用 原始元素尺寸 / 原始圖片每一份大小 * 目標螢屏每一份大小 = 等比縮放后的尺寸
例如: 設計圖片上有一個150150的圖片, 我想等比縮放顯示到375螢屏上
那么: 150 / 100 * 50 = 1.550 = 75px

3.如何在前端開發中應用這個計算公式?
目標螢屏每一份的大小就是html的font-size: 50px
使用時只需要用 “原始元素尺寸 / 原始圖片每一份大小rem” 即可
150 / 100 = 1.5 / 1.5rem
1rem = 50px / 1.5rem === 1.5*50 = 75px

3.通過JS+rem

這種方案需要重繪才能執行 企業開發推薦方式

document.documentElement.style.fontSize=window.innerWidth/7.5+"px";//7.5指不同設計圖片下的制定份數

解決設備像素和CSS像素不一樣

獲取設備像素比DPR(Device Pixel Ratio)
DPR = 設備像素 / CSS像素 在JS中我們通過window.devicePixelRatio獲取當前設備像素得到縮小倍數:
console.log(1.0/window.devicePixelRatio);

如何縮小?
通過 的initial-scale屬性來縮小
注意點: 縮放視口后視口大小會發生變化

4移動端開發適配方案之終極方案

let scale = 1.0 / window.devicePixelRatio;
let text = `<meta name="viewport" content="width=device-width, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}, user-scalable=no">`;
document.write(text);

上述三行代碼解決設備像素和CSS像素不一樣問題
加上下面這行代碼(方案三 js+rem)形成終極方案

document.documentElement.style.fontSize=window.innerWidth/7.5+"px";

相關文獻

前端常用布局