前言最近整理了自己研究前端的笔记，发现自己对移动端web端适配（rem）不是很了解，只是知道如何使用它。接下来，记录下你对移动端网页适配（rem）的一些感想。rem介绍rem表示根元素（）的font-size的大小。即如果根元素的font-size为14px，那么1rem=14pxrem适配在移动端web端的适配效果在不同尺寸的屏幕下，同一个元素的尺寸不会出现相同的尺寸，但它们占屏幕宽度的100%的比例是一样的。代码//在html文件的head标签中.width;//设置html标签的font-size为hWidth/15html.style.fontSize=hWidth/15+'px';})()//inless/*定义变量@r:750/15*/@r:50rem;div{宽度：100/@r;height:200/@r;}javascript代码首先，我们将屏幕尺寸（px）的1/15复制到html标签的font-size属性中。此时，屏幕尺寸的1/15像素（px）在任何尺寸的屏幕上都等于1rem的尺寸。即：在任何尺寸的屏幕上，只要为该元素设置相同的rem值，该元素在所有尺寸的屏幕上占据相同比例的屏幕宽度。.less代码现在只需要将设计稿中元素的px单位转换为rem单位即可。因此，这时候我们可以把设计稿看成是一定尺寸的手机屏幕。在我的示例中，布局的宽度为750像素。因此，750/15=50px，即在设计稿尺寸的手机屏幕中，1rem=50px。然后，在less代码中，我们定义了一个变量@r。测得div的宽度为100px，因为1rem=50px在设计稿尺寸的屏幕中，所以div的rem值为：100/50rem，即100/@r。测得div的高度为200px，因为在设计稿尺寸的屏幕中，1rem=50px，所以div的rem值为：200/50rem，即200/@r。
