移動端瀏覽器我們主要對webkit核心進行相容
我們現在開發的移動端主要針對手機端開發
現在移動端碎片化比較嚴重，解析度和螢幕尺寸大小不一
視口
就是瀏覽器顯示頁面內容的螢幕區域。視口可以分為布局視口、視覺視口、理想視口
其中最常用的就是理想視口
布局視口：在早期手機還能打**和收簡訊的時代。廠商萌生了把pc端的網頁放在手機上顯示的想法，於是就設定了乙個布局視口。
iso，android基本都將這個視口解析度設定為980px，所以在pc上的網頁大多都能在手機上呈現，但是缺點是 元素看上去很小，要通過手機縮放網頁
視覺視口能看到的區域 ，但顯示不全
理想視口
手機螢幕多寬，布局視口就多寬
需要手動添寫meta視口標籤通知瀏覽器操作
meta視口標籤的主要目的：裝置有多寬，我們的布局視口就多寬
meta視口標籤
"viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
最完美寫法
user-scalable=no 使用者是否可以縮放一般是不可以
initial-scale 初使縮放比，大於0的數字
maximum-scale 最大縮放比
minimum-scale 最小縮放比
物理畫素&物理畫素比
解析度就是物理畫素
物理畫素點指的是螢幕顯示的最小顆粒，是物理真實存在的。這是廠商在出廠時就設定好了。
我們開發時候的1px不是一定等於1個物理畫素
pc端頁面，1個px等於1個物理畫素的，但是移動端就不盡相同
乙個px的能能顯示的物理畫素點的個數，稱為物理畫素比或螢幕畫素比
pc端和早期的手機螢幕：1css畫素=1物理畫素
retina(視網膜螢幕)是一種顯示技術，可以將把更多的物理畫素點壓縮至一塊螢幕裡，從而達到更高的解析度，並提高螢幕顯示的細膩程度
2倍圖或者多倍圖
如果我們需要乙個5050畫素的，直接放到iphone8裡面會放大2倍，就會模糊
這時的解決方案是 放乙個100100的，手動把這個縮小為50*50（css畫素）
準備的，比實際開發需要的大小 大2倍 這種方式就是2倍圖
/* 只寫乙個引數 肯定是寬度 高度省略了 /
/ 裡面的單位可以跟%，相對於父親來說 /
/ cover把背景影象填滿覆蓋至整個區域 ,可能有部分背景顯示不全*/
background-size: cover;
background-size: contain;
/* 到寬度或者高度極限之後就不再繼續拉伸了 */
布局 Flex伸縮布局
flex是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為flex布局。採用flex布局的元素，稱為flex容器，簡稱 容器 它的所有子元素自動成為容器成員，成為flex專案，簡稱 專案 總結 通過給父盒子新增flex屬性，來控制子盒子的位...
flex伸縮布局
flex布局 使用 如果是pc端頁面布局，採用傳統方式 如果是移動端或者是不考慮相容的pc則採用flex 特點 flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性操作，面試 flex布局又叫伸縮 布局 彈性布局 伸縮盒布局 彈性盒布局 名稱 語法 disp...
伸縮布局等份flex
響應式的布局，跟著瀏覽器的變化而變化 1.給父元素設定flex布局 div div div section css section section div nth child 1 section div nth child 2 section div nth child 3 將section分成4份...