站点工具

用户工具


前言

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

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

可以使用动态REM方案。

原理

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

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

我们可以

  1. 设置html的font-size 为 *100屏幕宽度/设计稿宽度**
  2. 在写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了。换算起来就没那么直观了。

适配代码

<!DOCTYPE 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标签的fontSize
      document.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>
admin · 2021/09/16 15:04 · 移动端_rem适配.txt