移动端页面的自适应rem

javascript艺术

发布于 2021-05-28 14:03:33

2.4K0

发布于 2021-05-28 14:03:33

文章被收录于专栏：javascript艺术

移动端页面rem

写移动端页面最麻烦的是什么，不同分辨率的适配！

一、什么是rem

具体来说，有的屏幕320px宽，有的屏幕640px宽，有的更宽，如果你写固定px，那么要么小的放不下，要么大的有大片空白。

比如320px的10%是32px，640px的10%是64px，

如果10个10%宽度的元素放在一起，那肯定就是100%，即挤满屏幕（宽度），不会超出，也不会留白。

简单理解：

rem 就是指屏幕宽度的百分之x；

或者说，n个rem = 用户可视区域100%宽度

rem和em很容易混淆，其实两个都是css的单位，并且也都是相对单位，现有的em，css3才引入的rem，在介绍rem之前，我们先来了解下

emem作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

em做弹性布局的缺点还在于牵一发而动全身，一旦某个节点的字体大小发生变化，那么其后代元素都得重新计算

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

rem取值分为两种情况，设置在根元素时和非根元素时，举个例子

/* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/html {font-size: 2rem}/* 作用于非根元素，相对于根元素字体大小，所以为64px */p {font-size: 2rem}

如果子元素设置rem单位的属性，通过更改html元素的字体大小，就可以让子元素实际大小发生变化

html {font-size: 16px}p {width: 2rem} /* 32px*/html {font-size: 32px}p {width: 2rem} /*64px*/

如何让html字体大小一直等于屏幕宽度的百分之一呢？可以通过js来设置，一般需要在页面dom ready、resize和屏幕旋转中设置

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px';

那么如何把UE图中的获取的像素单位的值，转换为已rem为单位的值呢？公式是元素宽度 / UE图宽度 * 100，让我们举个例子，假设UE图尺寸是640px，UE图中的一个元素宽度是100px，根据公式100/640*100 = 15.625

rem是弹性布局的一种实现方式，弹性布局可以算作响应式布局的一种，但响应式布局不是弹性布局，弹性布局强调等比缩放，100%还原；响应式布局强调不同屏幕要有不同的显示，比如媒体查询

一些偏向app类的，图标类的，图片类的，比如淘宝，活动页面，比较适合使用rem，因为调大字体时并不能调大图标的大小

rem+js方案，同时还要解决noscript问题，解决字体问题，解决屏幕过宽问题

html代码如下

[html] view plain copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>rem布局</title>
</head>
<body>
<noscript>开启JavaScript，获得更好的体验</noscript>
<div class="p1">
宽度为屏幕宽度的50%，字体大小1.2em
<div class="s1">
字体大小1.2.em
</div>
</div>
<div class="p2">
宽度为屏幕宽度的40%，字体大小默认
<div class="s2">
字体大小1.2em
</div>
</div>
</body>
</html>

css代码如下

[html] view plain copy

js代码如下

[html] view plain copy

var documentElement = document.documentElement;
function callback() {
var clientWidth = documentElement.clientWidth;
// 屏幕宽度大于780，不在放大
clientWidth = clientWidth < 780 ? clientWidth : 780;
documentElement.style.fontSize = clientWidth / 10 + 'px';
}
document.addEventListener('DOMContentLoaded', callback);
window.addEventListener('orientationchange' in window ? 'orientationchange' : 'resize', callback);

参考博客http://blog.csdn.net/qq_36263601/article/details/78366710

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2018-03-18，如有侵权请联系 cloudcommunity@tencent.com 删除