rem移动端适配

2023-01-07 21:31:28

rem作为一个低调的长度单位，由于手机端网页的兴起，在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下，通过等比缩放的方式达到设计图要求的效果。

rem 的官方定义『The font size of the root element.』，即以根节点的字体大小作为基准值进行长度计算。一般认为网页中的根节点是 html 元素，所以采用的方式也是通过设置 html 元素的 font-size 来做屏幕适配，但实际情况真有这么简单吗？

首先我们来看看使用 rem 实现手机屏幕适配的常用方案。

以设计稿的宽度为640px，即：designWidth = 640，同时设定在640px屏宽下 1rem=100px ;

    设置 1rem=100px 的优点不言而喻。前端开发者在切图、重构页面的时候，通过直接位移小数点的方式，就可以将UI图中测量到的 px 值换算成对应的 rem 值，方便快捷。

    此外，在 head 中我们还设置了：<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

下面给出几个方案：

@media screen and (min-width: 320px) {html{font-size:50px;}}

@media screen and (min-width: 360px) {html{font-size:56.25px;}}

@media screen and (min-width: 375px) {html{font-size:58.59375px;}}

@media screen and (min-width: 400px) {html{font-size:62.5px;}}

@media screen and (min-width: 414px) {html{font-size:64.6875px;}}

@media screen and (min-width: 440px) {html{font-size:68.75px;}}

@media screen and (min-width: 480px) {html{font-size:75px;}}

@media screen and (min-width: 520px) {html{font-size:81.25px;}}

@media screen and (min-width: 560px) {html{font-size:87.5px;}}

@media screen and (min-width: 600px) {html{font-size:93.75px;}}

@media screen and (min-width: 640px) {html{font-size:100px;}}

@media screen and (min-width: 680px) {html{font-size:106.25px;}}

@media screen and (min-width: 720px) {html{font-size:112.5px;}}

@media screen and (min-width: 760px) {html{font-size:118.75px;}}

@media screen and (min-width: 800px) {html{font-size:125px;}}

@media screen and (min-width: 960px) {html{font-size:150px;}}

var designWidth = 640, rem2px = 100;

document.documentElement.style.fontSize =

  ((window.innerWidth / designWidth) * rem2px) + 'px';

var designWidth = 640, rem2px = 100;

document.documentElement.style.fontSize =

  ((((window.innerWidth / designWidth) * rem2px) / 16) * 100) + '%';

    为了更避免理解上的混乱，我在上面js的代码中加了 ( ) ，实际代码中是不需要的。

详细分析一下，rem 和 px 直接的转换公式可以写为：

1rem = 1 * htmlFontSize

    htmlFontSize 为 html 元素的字体大小。

4.最终方案（适配横竖屏）

function adapt(designWidth, rem2px){

  var d = window.document.createElement('div');

  d.style.width = '1rem';

  d.style.display = "none";

  var head = window.document.getElementsByTagName('head')[0];

  head.appendChild(d);

  var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));

  d.remove();

  document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';

  var st = document.createElement('style');

  var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";

  var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"

  st.innerHTML = portrait + landscape;

  head.appendChild(st);

  return defaultFontSize

};

var defaultFontSize = adapt(640, 100);

以上内容非原创是笔者看到有意思的进行整理作为个人笔记用原文地址：https://github.com/hbxeagle/rem/blob/master/README.md

码农公寓

相关文章