視口：
瀏覽器顯示頁面內容的螢幕區域
視口分為：布局視口 視覺視口 理想視口
布局視口：
一般移動端裝置的瀏覽器都預設設定了乙個布局視口，為了解決早期pc端頁面在移動端上的顯示問題
蘋果 安卓基本上設定這是視口的解析度980px
理想視口：
1：是**在移動裝置瀏覽器中最理想的一種狀態（瀏覽和閱讀寬度設定的）
2：對裝置來說是最理想的尺寸
3：引入meta標籤，通知瀏覽器進行對應的操作
4：meta標籤的主要目的就是為了使布局視口的寬度應該與理想視口寬度一致，就是裝置有多寬，布局視口就有多寬
視口縮放：
在375px的裝置截圖，放到ps中，測量為750px
在ps中值比 裝置中的px值大一倍
物理畫素：
1：指的就是螢幕顯示的最小的點，是真實存在的，裝置廠商在生產裝置使就已經定好了的，比如：蘋果678 750*1334
了解： ppi：每英吋所顯示的畫素點的密度
dpi：每英吋所顯示的畫素點的點數
物理畫素比：物理畫素 / 邏輯畫素
物理畫素：就是裝置所顯示的畫素（手機截圖在ps中量取出來的畫素大小 ）
邏輯畫素：頁面在css中書寫的畫素
常見設計稿：
常見設計圖
640px dpr2
750px dpr2
125px dpr3
常見的單位：
pxem
pt（磅）更多應用於安卓
deg%
rem：跟隨html的font-size的值大小
預設狀態下1rem=16px
vw：視口的寬度 width：100vw；佔滿整個視口的寬度
能夠隨著視口寬度的變化而變化
vh：視口的高度 width：100vh；佔滿整個視口的高度
能夠隨著視口高度的變化而變化
vmin：作比較，視窗的寬高誰小，誰小就按照誰顯示
vmax：作比較，視窗的寬高誰大，誰大就按照誰顯示
記住：如果使用vw + rem實現頁面布局適配
設計圖是750px html
設計圖是640px html
移動端視口（viewport）和布局
兩種畫素 物理畫素和 css 畫素。物理畫素 解析度，裝置螢幕的物理畫素。css 畫素 由web開發者提供，是 css 中使用的乙個抽象單位。三個視口 布局視口 layout viewport 視覺視口 visual viewport 和理想視口 ideal viewport 布局視口是移動端預設的...
移動端視口
1.什麼是視口?視口簡單理解就是可視區域大小我們稱之為視口 在pc端，視口大小就是瀏覽器視窗可視區域的大小 視窗多大，可視區域 視口就多大 在移動端,視口大小並不等於視窗大小,移動端視口寬度被人為定義為了980 2.為什麼是980而不是其他的值?因為過去網頁的版心都是980 賈伯斯為了能夠讓網頁在移...
移動端視口概念
有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100 等等 html的父包...