css rem 大屏开发_移动端适配动态REM方案

最新推荐文章于 2023-11-28 17:19:31 发布

知乎营销

最新推荐文章于 2023-11-28 17:19:31 发布

阅读量120

点赞数

文章标签： css rem 大屏开发

本文链接：https://blog.csdn.net/weixin_34566429/article/details/112116870

版权

1 前言

设计师交付给前端开发一张宽度为750px的视觉稿，设计稿上元素的尺寸、颜色、位置等已做过标注，要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。

前面我们讲过可以使用viewport缩放方案实现页面级的缩放适配。但该方案有个问题，1px的边框在大屏手机被放大后显得很粗，在小屏手机上被缩小后又显得太细。我们需要更换另外一种方案——整体能根据屏幕放大缩小，局部又能保持固定的尺寸。

可以使用动态REM方案。

2 原理

在使用单位控制页面元素大小时，可以使用固定单位px，也可以使用相对单位rem。2rem 等于html标签font-size的2倍。基于这个原理，对于需要适配屏幕等比缩放的元素可以选用rem作为单位，对于不需要等比缩放的元素依旧使用px作为单位。只要调整html标签的font-size，就能让所有使用rem单位的元素跟随着发生变化，而使用px单位的元素不受影响。问题的关键在于如何根据屏幕尺寸跳转html标签的font-size。

举个实际的例子。设计师交付的设计稿宽度是750px，设计稿上一个div的标注尺寸是375px(宽度是设计稿宽度的一半)。我们可以

设置html的font-size 为 100*屏幕宽度/设计稿宽度
在写CSS时设置 div 的宽度是 3.75rem (计算时用设计稿标注值除以100)，边框宽度为1px

假设用户在逻辑像素宽度是375px的设备上打开页面，则html的font-size是100*375/750 = 50px，div的宽度是3.75rem ，即187.5px 正好是屏幕宽度的一半。

假设用户在逻辑像素宽度是428px的设备上打开页面，则html的font-size是100*428/750 = 57.07px，div的宽度是3.75rem ，即214px 正好是屏幕宽度的一半。

为什么要用100来乘以屏幕宽度/设计稿宽度？其实100只是随便选取的一个值，我们也可以随便其他任意值比如50。如果选100，设计稿中某个元素标注的尺寸是375px，我们可以很快速的计算出3.75rem。如果html的font-size 设置为 50*屏幕宽度/设计稿宽度，那么div的宽度就应该是7.5rem了。换算起来就没那么直观了。

3 适配代码

html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, 
    initial-scale=1, maximum-scale=1, minimum-scale=1">
  <script>const WIDTH = 750  //如果是尺寸的设计稿在这里修改const setView = () => {//设置html标签的fontSizedocument.documentElement.style.fontSize = (100*screen.width/WIDTH) + 'px'
    }window.onorientationchange = setView
    setView()script>
  
  <style>div {width: 3.75rem; /* 需要随屏幕等比缩放，使用rem单位，比如设计稿中标注的32px这里写成0.32rem */border: 1px solid #ccc; /*不需要缩放的部分用px*/
    }style>
head>
<body>
  <div>内容div>
body>
html>

4 总结

动态Rem方案既能实现页面级整体缩放，又能个性化控制某些元素不缩放。下篇文章我们讲另外一种方案：vw适配方案，不需要JavaScript即可实现动态Rem方案类似的效果。

5 最后

如果本文对你有帮助，麻烦点个在看给一点小小小的鼓励让我坚持更新。如果能分享给其小伙伴我会开心一整天。
最近的文章为前端剑指offer系列，是面向大厂求职的文章合集，可以点击阅读原文查看往期文章。关注公众号「编程公子」不错过每一次更新，回复 2 加小助手微信，进 前端大厂面试刷题 群和其他小伙伴一起分享讨论，也能加我微信一起交流。