手机端rem的使用

2024-03-19    分类： 网站建设

在移动网站开发中，大家肯定听说过rem单位，在移动端做适配表现也是特别好，接下来就由成都网站建设工程师为大家详细介绍。

什么是rem

在我看来，rem就是1rem单位就等于html节点fontsize的像素值。所以改变html节点的fontsize是最为关键的一步。根据手机宽度改变相对大小就可以实现自适应了，就不用什么媒体查询那些的。

我们的设计图往往宽度是640或者其他尺寸的，不过我建议是用这个尺寸，以640为基准，以小到大，实现自适应，下面实现的比例为1rem=40px(640宽度)。

代码原理

这是阿里团队的高清方案布局代码，所谓高清方案就是利用rem的特性(我们知道默认情况下html的1rem = 16px)，根据设备屏幕的DPR(设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由4个物理像素点组成)根据设备DPR动态设置 html 的font-size为(50 * dpr)，同时调整页面的压缩比率(即：1/dpr)，进而达到高清效果

成都网站建设

有何优势

引用简单，布局简便

根据设备屏幕的DPR,自动设置最合适的高清缩放。

保证了不同设备下视觉体验的一致性。(老方案是，屏幕越大元素越大; 此方案是，屏幕越大，看的越多)

有效解决移动端真实1px问题(这里的1px 是设备屏幕上的物理像素)

以上关于rem单位布局使用均属成都网站建设工程师的个人观点，大家如果对此有着不同的见解，可以关注公众号“创新互联派”给我留言，大家可以交流一下自己的心德体会，共同学习进步。

新闻名称：手机端rem的使用
分享网址：https://www.cdcxhl.com/news5/320705.html

成都网站建设公司_创新互联，为您提供电子商务、全网营销推广、用户体验、微信公众号、网站设计公司、网站营销

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

外贸网站建设

网站建设知识

分类信息网