本文探讨了移动端适配的两种常见方案——rem和百分比。rem允许元素尺寸按比例缩放，通过调整html的font-size实现不同屏幕的适配。而百分比方案则基于可视区域尺寸调整，适用于宽度适配，但可能在大屏或横竖屏切换时导致布局问题。
rem适配
rem是相对长度单位，可以做到一样的取值，在不同尺寸的屏幕上的大小按比例缩放
rem的定义：
rem（font size of the root element）是相对于根元素（即html元素）font-size计算值的倍数。
例如html标签设置font-size:16px，同时div设置width:1.2rem
那么这个div的宽度就是
1.2rem=16px*1.2=19.2px
适配屏幕的main.js代码
假设原型图的大小是iPhone6p : 414*736，默认字体大小是16px;
然后在全局html中引入这段js，就可以了，就这么简单，移动端就实现了自适应（当然这是在借助插件的帮你转换了rem的基础上完成的操作）；
适配原理：
根据不同屏幕的宽度，以相同的比例动态修改html的font-size适配，并将px替换成r
最低0.47元/天 解锁文章
扫一扫
1697
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
