一、viewport(视口) meta tag
先来讲几个概念：
image.png
image.png
窗口是包含了横向和纵向滚动条的，而视口不包含，视口（viewport）相当于html的父级元素，html设置宽度100%，也就是等于viewport的宽度。
通过
document.documentElement.clientWidth获取视口的宽度,通过document.documentElement.clientWidth获取视口的高度，拉伸和收缩，缩放浏览器都是会改变视口的大小。一个div宽度设为100px，放大浏览器一倍，那么字体也被放大一倍，难道他的像素变为200px了吗，并没有，变的是这个100px的div在设备上所占的物理像素。
作用： 控制视口的大小和形状
width：设置视口的宽度，可以设置数值，也可以设置一个特殊的值
width="device-width"表示100vw也就是100%的视口宽度（height同理）
initial-scale: 页面首次加载缩放比例，默认为1
maximum-scale: 控制放大的倍数
minimum-scale: 控制缩小的倍数
```user-scalable``: 是否允许用户缩放
移动端设备的viewport一般都是比浏览器大，因为手机的分辨率比电脑的分辨率小，带来的后果就是 出现横向滚动条
css的1px对应电脑的屏幕往往都是1px，造成一个误区就是css的1像素就是物理像素，随着手机的分辨率越来越高，css的1px等于物理像素2px
二、计算html根字体的大小
设计稿是750px，收集设备的100vw是375的话，375px宽度的viewport要装下750px的设计稿，用375/750得到的就是0.5，根元素的大小设置为0.5px 1rem也就是0.5px，但是fontsize最小值应该是12px，放大10倍不够 放大100倍
image.png
当我们设置html的font-szie为 (屏幕宽度*100/设计稿宽度) 的px 时 当我们在设计稿上测得的 px 单位值,直接将值除以100换为 rem单位写到代码里面即可
网友评论