移动端默认的视口大小是980px（css像素）`<meta name="viewport" content="width=375">`可修改默认的视口大小 默认情况下，移动端的像素比就是980/移动端宽度(如iphone6 980：750，完美视口应该是375:750) >[danger]为什么是750呢？ *iPhone6*的理想*视口宽度*为375px,同时设备物理像素为750px,*iPhone6*的设备像素比为2 如果我们直接在网页中编写移动端的代码，这样在980的视口下像素比是非常不好，导致网页中的内容非常小，如iphone像素比：980：750，即1px的css像素=0.765物理像素（即在手机的一个物理像素里显示的内容更多，内容变小） 编写移动页面时必须确保有一个比较合理的像素比： 1css像素 对应2个物理像素 1css像素 对应3个物理像素 怎么搞呢，就是用meta标签修改手机的视口大小 ~~~ <--将移动端的视口大小从默认的980px改为100px--> <meta name="viewport" content="width=100"> ~~~ 然后测试下： ``` <style type="text/css"> html,body{ margin: 2px 0; padding: 2px 0; } .box1{ width:100px;height:100px;background-color: #bfa; } </style> <div class="box1"></div> ```  每一款移动设备设计时,都会有一个最佳的像素比, 一般我们只需要将像素比设置为该值即可得到一个最佳效果 将像素比设置为最佳像素比的视口大小我们称其为完美视口 iphone6将视口调成375，这样375：750=1：2 ~~~ <meta name="viewport" content="width=375"> ~~~ 375是iphone的最佳视口，其他手机的最佳视口是不一样的怎么查询手机的最佳视口？ 除了之前提到的[查看手机像素的网站](https://material.io/resources/devices) 浏览器F12切换成移动端模式，也可以查看  每个移动端的完美视口可能不一样，我们怎么做到兼容每个移动端都能实现完美接口？`content="width=device-width, initial-scale=1"` ```html // 兼容标签 指定双核浏览器默认以何种方式渲染页面。这里指定默认用webkit内核渲染 <meta name="renderer" content="webkit"> <!-- 适应移动端完美视口 --> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ``` 每个移动端的完美视口不一样，设置固定宽度如px就不行了，需要使用vw vw表示视口宽度（viewport width） 100vw就是一个视口宽度 1vw=1%视口宽度（1/100视口宽度） iphone6视口宽度750px=100vw（`<meta name="viewport" content="width=750px">`） 那么1px=0.1333333333333333vw（100/750） 设计图的宽度：750px(375的2倍) 、1125px（375的3倍，应对当前某些及以后高清晰度手机） 以750px的设计图为例：我们向要一个48px*35px的按钮,用多少vw表示？ 100/750=0.1333333333333333 （100/750）*48=6.4vw （100/750）*35=4.667vw ``` .box{ width:6.4vw; height:3.667vw; } ``` 上面不好计算： 换成rem 1 rem= 根元素html的 1 font-size 将html的font-size设置为100px 那么1rem=100px; 如果将html的font-size设置为0.1333333333333333vw 那么1rem=1px=0.1333333333333333vw； 此时元素的宽高设置如下： ``` .box{ width:48rem; height:35rem; } ``` 但是，浏览器的最小font-size为12px，设置的font小与的12px，会被浏览器强制修改为12px 那么将html的font-size扩大10倍 ``` html{ font-size=1.333333333333333vw； } ``` 此时元素的宽高设置如下： ``` .box{ width:4.8rem; height:3.5rem; } ``` 查看元素明显有点大？参看下此时html的font-size还是12px 1px=0.1333333333333333vw 10px=1.333333333333333vw； 所以还不够 扩大40倍 ``` html{ font-size=5.333333333333333vw； } ``` 此时元素的宽高设置如下： ``` .box{ width:48/40rem; height:3.5/40rem; } 即 .box{ width:1.2rem; height:0.875rem; } ``` 具体参看vw解决方案