搭建乙個h5頁面，我們需要在head中新增乙個meta標籤
快捷鍵：meta:vp + tab鍵
user-scalable=no 禁止使用者手動縮放
initial-scale=1.0 設定螢幕預設的縮放比例
maximum-scale=1.0 設定螢幕最大的縮放比例
minimum-scale=2.0 設定螢幕最小的縮放比例
/*正常普通屏*/
.box
/*2倍屏*/
@media all and (-webkit-device-pixel-ratio: 2)
}/*3倍屏*/
@media all and (-webkit-device-pixel-ratio: 3)
}
->**條件：指定在 什麼樣的條件下執行對應的樣式
@media all and (max-width: 319px)
}@media all and (min-width: 320px) and (max-width: 359px)
}
常用的安卓機尺寸：320， 360， 480， 540， (640， 720...)
在真實專案中，設計師給我們的設計稿一般都是640*1136 / 640*960
/ 750*1334
->一般是用在pc端和手機端共用一套前端頁面
->容器的寬度一般都不寫固定的值，而是使用百分比（相對於視口區域寬度的百分比）
->其餘的樣式：字型，高度，margin，padding等等都按照設計稿上標註尺寸的一半來設定
->對於有些螢幕尺寸下，我們設定的固定值看起來不是特別好看的話，使用@media進行微調整
特殊情況：
設計師的設計稿是640px的，我們的素材圖也是640px，這樣iphone6以及6plus展示的時候，不夠大，對於這種情況就和ui設計師要1280px大圖
@media all and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px)
}@media all and (min-width: 641px)
}
->rem：當前頁面中元素的rem單位的樣式值都是針對於html元素的font-size的值進行動態計算的
-> html
width: 2rem; 這樣就是相當於width=200px
height:2rem;
按照平時如果想要讓頁面中的所有比例所有一半，就需要修改所有的單位為px的值，而採用rem的話，只需要改變font-size: 50px;
這樣就代表1rem = 50px，所以
width: 2rem; 這樣就是相當於width=100px
height:2rem;
步驟：
①從ui設計師拿到設計稿（psd格式的設計稿）640*1136
②在樣式中給html設定乙個font-size的值，我們一般都設定乙個方便後面計算的值，例如：10px，100px...這裡我們之所以用100px，主要是瀏覽器最小的字型大小都是12px，用10px比例計算的結果和真實ui設計稿會存在那麼一點點的偏差
html
③寫頁面，寫樣式
完全按照設計稿的尺寸來寫樣式，此時不用管任何的事情，設計稿給你的高度，寬度，字型大小，margin，padding的值是多少，我們就寫多少
但是我們在寫樣式值的時候，需要把得到的畫素值除以100，計算出對應的rem的值，我們設定的也都是rem的值
值得注意的是：真實專案中外層盒子的寬度我們一般還是不寫固定值，沿用流式布局法的思想，我們用百分比的方式布局
④根據當前螢幕的寬度和設計稿的寬度來計算我們html的font-size
設計稿 640 600*300 font-size=100 6rem*3rem
手機： 320 300*150 font-size=50 6rem*3rem
手機： 375 351.5625*175.78125 font-size=58.59375
根據當前的螢幕寬度和設計稿寬度的比例，動態計算一下當前寬度下的fontsize值應該是多少，如果fontsize的值改變了，之前設定的所有rem單位的值自動會跟著放大或者縮小
~function ()
document.documentelement.style.fontsize = ratio * 100 + 'px';
}();
移動端響應式布局
1.快捷鍵 meta vp tab鍵 2.viewport視口 width device width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口寬度為980px。通俗的理解 我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說，就是展示當前這個頁面的區域一共有多寬 瀏覽器...
移動端與響應式布局
瀏覽器切換裝置步驟 f12開啟控制台，如圖 viewport只針對於移動端，pc端無效 viewport content width device width,initial scale 1.0,maximum scale 1.0,user scalable 0 content的配置 width d...
移動端（響應式）
查詢 mdn stylesheet media max width 800px href example.css 複製 mobile first原則 響應式設計最好mobile first原則優先，不過pc first也可以，只不過現在一半以上的使用者都是用手機在訪問頁面 為實現響應式，可以根據不同...