兩種畫素：物理畫素和 css 畫素。
物理畫素：解析度，裝置螢幕的物理畫素。
css 畫素：由web開發者提供，是 css 中使用的乙個抽象單位。
三個視口：布局視口（layout viewport）、視覺視口（visual viewport）和理想視口（ideal viewport）
布局視口是移動端預設的布局視口，早期解決pc端介面在手機端顯示的問題
視覺視口是使用者正在看到的**的區域。
理想視口是給定裝置物理畫素的情況下，最佳的布局視口。
流式布局（百分比布局）；rem布局；flex布局；
flex布局
通過給父元素新增flex屬性，控制子盒子的位置和排列方式
flex-derection：設定主軸方向 [row / column-reverse]
justify-content：設定主軸上子元素的排列方式 [flex-star / center / space-around平分剩餘空間 / space-between貼邊再平分]
flex-wrap:設定是否換行
align-content：側軸子元素排列方式（多行）
align-item：側軸子元素排列方式（單行）[center]
flex-flow:復合屬性，flex-derection和flex-wrap的合寫
rem適配布局
rem是單位，是html根元素的字型大小
**查詢：針對不同螢幕尺寸設定不同樣式
@media screen and (max-width:800px)
}
柵格系統：container容器，劃分為12份。通過行列排列。row、col-lg/md/sm/xs-所佔份數[大屏/中屏/小屏/超小屏]。
移動端視口
1.什麼是視口?視口簡單理解就是可視區域大小我們稱之為視口 在pc端，視口大小就是瀏覽器視窗可視區域的大小 視窗多大，可視區域 視口就多大 在移動端,視口大小並不等於視窗大小,移動端視口寬度被人為定義為了980 2.為什麼是980而不是其他的值?因為過去網頁的版心都是980 賈伯斯為了能夠讓網頁在移...
移動端視口概念
有時會使用百分比來宣告寬度,如 html,body div假設div是body的子元素，這段css就表示該div佔body寬度的30 body沒有顯示宣告寬度，因此body占用了父包含塊html元素寬度的100 同樣的，html也沒顯示宣告寬度，因此html也佔父包含塊的100 等等 html的父包...
視口概念 移動端視口適配
視口 檢視視窗,頁面中html元素的顯示大小 移動端 頁面要想在移動端載入必須進行視口的適配 如果不對頁面進行調整,那麼在移動端載入頁面視口寬度都為980px 解決方案 源資訊標籤,對頁面進行設定 表示對頁面視口進行約束 1 做移動端適配新增此標籤,使得頁面不再按照980px載入,按照所用裝置載入 ...