rem通常和@media媒体查询一起使用，因为不同设备的宽度不一样所以根字号也不一样，所以用媒体查询分别设置每个视口宽度下的根字号 max-width：定义输出设备中视口的最大可见区域宽度   即宽度小于768px里面的值才会生效 min-width：定义输出设备中视口的最小可见区域宽度  即宽度大于768px里面的值才会生效 小于768 超小屏幕 max-width=768px 大于768 小屏幕 min-width=768px 大于992 中型屏幕 min-width=992px 大于1290 大屏幕 min-width=1200p: ``` @media(min-with:320px){ html{font-size:12px;} } @media(min-with:480px){ html{font-size:12px;} } @media(min-with:768px){ html{font-size:14px;} } @media(min-with:1200px){ html{font-size:16px;} } html .div{ with:7.5rem; height:2.5rem; } ``` 1rem=html设置的font-size的px大小 我们怎么确定每个尺寸下根字号的大小呢？ 目前rem布局方案中，将网页分成10等分，html标签的字号为视口宽度的1/10  上面还不够，设计师给你一个手机网页的设计图,这个设计图一定是定宽的。（设计师一般是根据375视口来设计的） 比如这个设计图是600px宽度, logo 120px, nav弹性的, btn 120px 此时有经验的前端开发工程师,一定不会用px当做单位,会进行计算。 比如html标签的font-size:16px;那么120/16= 7.5rem ,所以logo的width就是7.5rem. 每次出的新手机视口宽度都不一样，我们不可能每次出一个视口不一样的手机，然后在css代码里加上这个视口宽度的媒体查询吧？这几吧没完没了！ 我们可以引入一个[flexible.js](https://github.com/amfe/lib-flexible)来自动动态设置媒体查询的根字号font-size 每次我们要的到rem的值都需要手动计算，而css不支持，less预编译处理器可解决此问题，以375视口来设计来举例如with:(68/375.rem)