[長度單位與移動端](http://www.hmoore.net/a173512/qianduan/2016065) 視口 布局視口、視覺視口、理想視口    視口就是瀏覽器顯示頁面內容的屏幕區域視口分為布局視口、視覺視口和理想視口我們移動端布局想要的是理想視口就是手機屏幕有多寬,我們的布局視口就有多寬想要理想視口,我們需要給我們的移動面添加meta視口標簽 ## **[meta視口標簽](http://www.hmoore.net/a173512/qianduan/2016022)** viewport： 用于控制頁面縮放 標準寫法： ~~~ <!-- 適應移動端 如果頁面不加這個在移動端默認就是以980px顯示全網頁，網頁內容全縮放在一個移動屏幕下，看都看不清--> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ~~~ | Value | 可能值 | 描述 | | --- | --- | --- | | `width` | 一個正整數或者字符串?`device-width` | 以pixels（像素）為單位， 定義viewport（視口）的寬度。 | | `height` | 一個正整數或者字符串`device-height` | 以pixels（像素）為單位， 定義viewport（視口）的高度。 | | `initial-scale` | `一個0.0`?到`10.0之間的正數` | 定義設備寬度（縱向模式下的設備寬度或橫向模式下的設備高度）與視口大小之間的縮放比率。(設備打開頁面時的初始縮放比) | | `maximum-scale` | `一個0.0`?到`10.0之間的正數` | 定義縮放的最大值；它必須大于或等于`minimum-scale`的值，不然會導致不確定的行為發生。 | | `minimum-scale` | 一個`0.0`?到`10.0`之間的正數 | 定義縮放的最小值；它必須小于或等于`maximum-scale`的值，不然會導致不確定的行為發生。 | | `user-scalable` | 一個布爾值（`yes`或者`no`） | 如果設置為`no`，用戶將不能放大或縮小網頁。默認值為`yes`。 |  一個50px*50px的圖片在瀏覽器大小不變，但是在移動端根據物理像素比放大，會造成圖片模糊  解決辦法：如iphone8的物理像素比為2，那么我們要顯示50*50的圖片時，采用100*100的圖片并用css的width和height限制它縮小為50px*50px（這就是就是2倍圖UI），還有其他設備的3、4倍，看情況自己確定圖片到底時100*100還是200*200 背景圖片同理：只是背景圖片的縮放有cssbackground-size確定啦 >[danger]切圖：使用ps的cutterman(插件？) 在ps里導出，他會自動切除1、2、3倍圖 移動端開發方案： 單獨開發移動端和pc端(主流) 響應式頁面兼容移動端 單獨移動端開發： css初始化推薦normalize.css 由于移動端大多數都是webkit內核所以兼容很好，可以直接使用css3的屬性而不用考慮兼容如box-sizing這個css3的新模型盒子替換傳統的盒子模型    [黑馬2020最新 流式布局 + 伸縮布局\_嗶哩嗶哩\_bilibili](https://www.bilibili.com/video/BV1M541187fg?p=17&spm_id_from=pageDriver)