一.相關(guān)概念
參考https://www.cnblogs.com/zaoa/p/8630393.html
1.像素
像素就是構(gòu)成圖像的最小單位,指顯示屏上的最小單位, 圖像由像素組成,單位面積內(nèi)的像素越多 效果就越好 像素的大小不是絕對的,是根據(jù)設(shè)備的分辨率決定的
2.分辨率
屏幕分辨率 : 屏幕橫向和縱向的像素點數(shù),單位為px
相同大小的屏幕 分辨率越低,單位像素尺寸越大,分辨率越高,單位像素尺寸越小
圖像分辨率 : 指圖片含有的像素數(shù) , 表示圖片分別在垂直和水平上所具有的像素點數(shù)
同一尺寸的圖片鸡捐，分辨率越高，圖片越清晰源祈。
3.像素密度（PPI）
每英寸包括的像素數(shù)
PPI可以用于描述屏幕的清晰度以及一張圖片的質(zhì)量,PPI越高色迂，屏幕越清晰歇僧。
4.設(shè)備物理像素 (物理分辨率)
設(shè)備的真實分辨率 屏幕有多少個像素點 就是多少分辨率
5.設(shè)備獨立像素dips (邏輯分辨率)
一種單位來告訴不同分辨率的手機，它們在界面上顯示元素的大小是多少 即設(shè)備幾個像素當成一個像素使用
以iphone6為例, dips為375* 667 即是2*2個物理像素當做一個設(shè)備獨立像素
各種設(shè)備祸轮，手機侥钳，平板舷夺，筆記本等邏輯像素
手機：邏輯像素在3xx-4xx（短邊）之間
平板：10寸平板7xx-8xx（短邊）
筆記本：13寸 1280 （長邊）
24寸顯示屏：1920（長邊）
6.設(shè)備像素比dpr
物理像素比設(shè)備獨立像素的比值
css中的像素只是一個抽象的單位，在不同的設(shè)備或不同的環(huán)境中疫萤，css中的1px所代表的設(shè)備物理像素是不同的,1px并不是絕對的,它只代表了當前設(shè)備像素的最小單位.
在pc端 1px等于一個設(shè)備的物理像素,但是移動設(shè)備的屏幕像素密度越來越高 ,iphone6上一個css像素是等于兩個物理像素,通過dpr耙册，我們可以知道該設(shè)備上一個css像素代表多少個物理像素
獲取dpr:
js:
window.devicePixelRatio
css:
webkit-min-device-pixel-ratio
7.css像素
CSS像素，當頁面縮放比例為100%時帝际，一個CSS像素等于一個設(shè)備獨立像素蹲诀。
但是CSS像素是很容易被改變的，當用戶對瀏覽器進行了放大则北，CSS像素會被放大痕慢，這時一個CSS像素會跨越更多的物理像素。
頁面的縮放系數(shù) = CSS像素 / 設(shè)備獨立像素快骗。
8.視口(layout viewport)
布局視口:當前瀏覽器的可視區(qū)域,不包括菜單欄及瀏覽器的ui不包含滾動條等
在PC端上塔次，設(shè)置viewport不生效,布局視口永遠等于瀏覽器窗口的寬度励负。
在移動端上，由于要使為PC端瀏覽器設(shè)計的網(wǎng)站能夠完全顯示在移動端的小屏幕里 布局視口默認是980px,會出現(xiàn)滾動條
//獲取視口寬度
document.documentElement.clientWidth / Height
//移動端獲取視口寬度適配
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
meta標簽的作用是讓當前視口的寬度等于設(shè)備的寬度巾表，同時不允許用戶手動縮放
二.常見的布局方案
- 媒體查詢
- 百分比
- flex
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
flex-flow: flex-direction | flex-wrap;
justify-content: flex-start | flex-end | center | space-between | space-around;
align-items: flex-start | flex-end | center | baseline | stretch;
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
- rem/em
REM是CSS3新增的單位攒发，并且移動端的支持度很高晋南，Android2.x+,ios5+都支持负间。rem單位都是相對于根元素html的font-size來決定大小的,根元素的font-size相當于提供了一個基準，當頁面的size發(fā)生變化時政溃，只需要改變font-size的值趾访，那么以rem為固定單位的元素的大小也會發(fā)生響應(yīng)的變化。 因此董虱，如果通過rem來實現(xiàn)響應(yīng)式的布局扼鞋，只需要根據(jù)視圖容器的大小申鱼，動態(tài)的改變font-size即可（而em是相對于父元素的）。
- vw/vh
vh云头、vw 方案即將視覺視口寬度 window.innerWidth 和視覺視口高度 window.innerHeight 等分為 100 份
vw也是一個相對單位捐友，它相對的是布局視口，1vw就是1%的布局視口寬度溃槐。還是熟悉的iPhone6標準設(shè)計圖匣砖，寬750px。那么1vw = 1%視口寬度的話昏滴，按設(shè)計圖來說就是100vw = 750px，則1vw = 7.5px谣殊。
三.移動端適配
- px+各種布局(百分比 媒體查詢等)
- 在 head 設(shè)置 width=device-width 的 viewport
- 在 css 中使用 px
- 在適當?shù)膱鼍笆褂?flex 布局拂共，或者配合 vw 進行自適應(yīng)
- 在跨設(shè)備類型的時候使用媒體查詢
