在开发移动端中,经常都会遇到各种图片文字错位不会自适应,明明在电脑看着图片文字都是正常的,一用真机调试就各种错位: 那么rem是什么呢? rem(font size of the root element),意思即根据根元素的font-size来设置字体的大小。跟px一样,它是css中的一个样式单位,会根据根元素的font-size值来转换成px单位,公式为:px = rem * html(font-size):
举个例子:
实现移动端适配的核心思想是:
使用rem作为样式的单位,根据不同的分辨率的移动设备设置根元素的font-size值。
在项目中,只要引入视口配置:
然后写入规定这个适配的最大值和最小值,写样式的时候,根据比例去计算数值的大小即可:
这样写在html文件,即可实现rem适配自适应。