CSS的rem单位

作者:ManfredHu
链接:http://www.manfredhu.com/2017/05/06/26-rem/index.html
声明:版权所有,转载请保留本段信息,谢谢大家

改变font-size来进行自适应

rem 这个属性,通过在 html 元素设置一个初始大小,然后全部单位用 rem 来计算,则页面自适应。

兼容性

现在大部分浏览器IE9+,Firefox、Chrome、Safari、Opera ,如果我们不修改相关的字体配置,都是默认显示 font-size是16px 即:

1
2
3
html {
font-size:16px;
}

则设置了 <html> 之后,后面的大小样式会这样写,如

1
2
3
p {
font-size: 0.75rem; //12÷16=0.75(rem)
}

所以你很容易想到,根据屏幕宽度和高度来动态改变 <html>font-size 的大小,那么页面的大小也随之变化了。

结合JS做自适应布局

下面是一段做自适应布局的JS脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/**
* 判断用户client width
* 然后给html设置一个font-size
* 目的是为了方便rem做自适应布局
*/

(function (doc, win) {
var docEl = doc.documentElement,
//判断是横竖屏
resizeEvt = 'orientationchange' in window ? 'orientationchange':'resize',
func = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//按照比例缩放
var docElWidth = 100 * (clientWidth / 320);
//最大值
if (docElWidth > 200) docElWidth = 200;
// console.log(docElWidth);
docEl.style.fontSize = docElWidth + 'px';
};

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, func, false);
doc.addEventListener('DOMContentLoaded', func, false);
})(document, window);

Copyright © 2015 - 2019 ManfredHu胡文峰的个人博客

All rights reserved. Designed and powered by ManfredHu.

粤ICP备18133029号