移动端适配的解决方案—rem

本文探讨了两种移动端适配方案,一是使用固定换算倍数的rem,通过设置默认宽度和100px的rem基准,实现PC和移动端相似的显示效果;二是动态调整html的font-size,根据屏幕宽度改变rem的倍数,确保不同屏幕尺寸下视觉一致性。这两种方法旨在优化移动端布局适配,提供良好的用户体验。
摘要由CSDN通过智能技术生成

rem(font size of the root element)是相对长度单位。相对于根元素(即html元素)font-size计算值的倍数。

方案一、固定换算倍数100设置rem,实现的效果是在PC端浏览器里不用点击toggle device toolbar(切换设备工具栏)也可以和移动端屏幕基本一致的效果体验,设置的默认宽度为750px(可以根据你的图纸修改默认宽度),在默认屏幕宽度下1rem等于100px。这样你写px单位的时候只需要除以100就可以直接换算成rem单位了!

function IsPC(){

    var userAgentInfo =  navigator.userAgent;
    var reg = new RegExp("(Android|iPhone|SymbianOS|Windows Phone|iPad|iPod)
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值