[长度单位与移动端](https://www.kancloud.cn/a173512/qianduan/2016065) 视口 布局视口、视觉视口、理想视口    视口就是浏览器显示页面内容的屏幕区域视口分为布局视口、视觉视口和理想视口我们移动端布局想要的是理想视口就是手机屏幕有多宽,我们的布局视口就有多宽想要理想视口,我们需要给我们的移动面添加meta视口标签 ## **[meta视口标签](https://www.kancloud.cn/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)