搭建h5頁面的時候，我們需要在head中新增乙個meta標籤(wb中輸入meta:vp按下tab鍵自動生成)
viewport:視口
width=device-width 設定視口的寬度等於裝置的寬度，如果不設定的話，缺省視口的寬度是980px ->通俗的理解:我們這個操作其實就是告訴當前的瀏覽器按照多少寬度來渲染頁面，換句話說就是展示當前這個頁面的區域一共有多寬（瀏覽器的寬度）
user-scalable = no 禁止使用者手動縮放
initial-scale = 1.0 定義縮放比例
maximum-scale = 1.0
minimum-scale = 1.0
高清屏
蘋果手機是2倍高畫質螢幕的，也就是我們在手機上看到的那張100*100，其實蘋果手機是按照200*200的尺寸給我們進行渲染的，這樣的話，如果我們真實本身才100*100，最後呈現出來的就是被拉伸後變模糊的效果。
蘋果手機上需要的素材都需要比看到的尺寸大一倍才可以
dpi適配思想:
我們在做頁面的時候，最好每一張素材都準備兩套或者三套，比如:
logo.png 100*100
[email protected] 200*200
[email protected] 300*300
**查詢:@media
->**裝置: all所有裝置 screen 所有螢幕裝置pc+移動端 print印表機裝置...
->**條件:指定在什麼樣的條件下執行對應的樣式
@media all and (max-width:320px){}
@media all and (min-width:320px) and (max-width:359px){}
@media all and (-webkit-device-pixel-ratio:2) 可以通過這樣設定2倍高清屏的樣式
響應式布局的解決方案:
1）、流式布局法
->容器或者盒子的寬度一般都不寫固定的值，而是使用百分比(相對於視口區域的百分比)
響應式布局學習總結
需要注意的問題 responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使 在手機和平板電腦上有更好的瀏覽閱讀體驗。例如，您先在計算機顯示器上瀏覽乙個 然後在智慧型手機上瀏覽，智慧型手機的螢幕尺寸遠小於計算機顯示器，但是你卻沒有感覺到任何差別，兩者的...
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...
響應式布局總結
言歸正傳，博主因為是刨根問底攔不組的，所以在此就往響應式設計的祖墳上刨，深入了解下這四個步驟。1.布局及設定meta標籤 當建立乙個響應式 或者非響應式 變成響應式的時候，首先要關注元素的布局。我在建立響應式布局的時候習慣先寫非響應式布局，頁面固定寬度大小，我覺得這個對在座的各位沒有任何難度。如果完...