一：viewport
viewport標記用於指定使用者是否可以縮放web頁面，如果可以，那麼縮放到的最大最小縮放比例是什麼。使用viewport標記還表示文件針對移動裝置進行了優化。viewport標記的content值是有指令及其值組成的以逗號分隔的列表。
width:控制viewport的寬度，可以指定乙個值(數字)，也可以是device-width代表裝置的寬度(單位為縮放為100%時的css的畫素)
height: 控制viewport的高度，
initial-scale:初始縮放比例，也即是當頁面第一次load的時候縮放比例
maximum
-scale:允許使用者縮放到的最大比例
minimum-scale:允許使用者縮放到到最小比例
user-scalable:使用者是否可以手動縮放
完整的viewport標籤:
rem是基於根元素font-size大小的單位
計算 1rem=16px(瀏覽器一般情況下預設字型大小為16px)，1px=0.0625rem=0.0625em ，10px=0.625rem=62.5%
相容：完全相容ie8以上-------ie8以下將rem值計算為px值(引入rem.js)
百分比布局：是相對於包含它的最近的父元素的高度和寬度，寬度用的比較少
vh,vm相對於視口的高度和寬度
vmin,vmax關於視口高度和寬度兩者的最小值或者最大值(瀏覽器的寬度設定為1200px,高度設定為800px,1vmax=1200/100px=12px,1vmin=800/100px=8px)
二：彈性盒子
2023年，w3c提出了一種新的方案---flex布局，可以簡便,完整,響應式地實現各種頁面布局。目前，它已經得到了瀏覽器的支援，這意味著，現在就能很安全的使用這項功能
新版的flexbox模型是2023年9月提出的工作草案，這個草案是由w3c推出的最新語法。這個版本勵志於指定標準，讓新式的瀏覽器全面相容，在未來瀏覽器的更新換代中實現統一。
flex是flexble box的縮寫，意為"彈性布局"，用來為盒模型提供最大的靈活性
任何乙個容器都可以指定為flex布局，而每乙個彈性盒子中，採用flex布局的稱為flex容器，他所有子元素稱為flex專案
兩條軸線：水平主軸(主軸的開始位置叫做main start,結束位置叫做main end) 垂直交叉軸(交叉軸的開始位置叫做cross start,結束位置叫做cross end)
(2):容器的基本屬性(.box)
display:flex;//flex值表示彈性容器為塊級，占用一行flex-direction:row;//預設從左往右，主軸為水平方向，起點在左端
flex-direction:row-reverse ;//主軸為水平方向，起點在右端。
flex-direction:column ;//主軸為垂直方向，起點在上沿。
flex-direction:column-reverse ;//主軸為垂直方向，起點在下沿
flex-wrap:nowrap;//不換行
flex-wrap:wrap;//換行
flex-wrap:wrap-reverse;(第一行在下面，第二行在上面)//換行
/*簡寫形式：flex-flow:flex-direction flex-wrap;把改變主軸和換行寫在一起*/
justify-content: 定義了專案在主軸上的對齊方式
justify-content:flex-start;//左對齊
justify-content:flex-end;//右對齊
justify-content:center;居中
justify-content: space-between;//兩端對齊
justify-content:space-around;
align-items:flex-start;//上端
align-items: flex-end;//下端
align-items:center;//居中
align-items:stretch;//拉伸，高度拉到和容器的高度一樣，不能給專案設定高度，才能使用此屬性
align-content:flex-start;//與交叉軸的起點對齊。
align-content:center;//與交叉軸的中點對齊
align-content:flex-end;//與交叉軸的終點對齊。
align-content: space-between;//與交叉軸兩端對齊，軸線之間的間隔平均分布
align-content:space-around;//每根軸線兩側的間隔都相等
align-content:stretch;//預設平鋪，軸線佔滿整個交叉軸。
(二)專案的基本屬性(.item)
order:1;//定義專案的排序順序flex-grow:2;//定義專案的放大比例
flex-shrink:2;//定義了專案的縮小比例
flex-basis:200px;//定義了在分配多餘空間之前，專案佔據的空間
flex:flex-grow,flex-shrink和flex-basis的簡寫;//預設值為flex:0 1 auto;
今天就分享到這了，see you ...
移動端布局
預設以寬度為640px的設計稿為基準頁面，然後通過js獲取當前顯示裝置的尺寸，對應的調整 html 標籤的font size大小，從而實現通過以rem為單位的移動端布局適配。function win,doc function layoutcalc html.style.fontsize rem px...
移動端布局
css畫素與裝置畫素 二者的區別在於前者是抽象的，用於瀏覽器渲染頁面，而後者是裝置的最小物理單位。可參考 a pixel is not a pixel is not a pixel 進行理解。視口 移動端瀏覽器有兩個視口，即可見視口與布局視口，二者的區別在於前者為基於移動裝置螢幕的實際寬度，而後者為...
移動端布局
瀏覽器上 用來顯示網頁的那部分區域了 1 設定 view 有 init scale 頁面的初始縮放值 為數字 width viewport的寬度 height viewport的高度 mininum scale 允許使用者縮放最小值 maxinum scale 允許使用者縮放最大值 user sca...