rem适配移动端
2019-05-31 本文已影响0人
icon6
引言
- 最近连续写了一个月的移动端企业网站，抽空总结跟大家分享下
rem是什么
- rem（font size of the root element）是指相对于根元素的字体大小的单位。
rem使用
-
现在一般手机端都是按照375px来设计，通常我们会拿到的750pxpsd设计稿，这是我们需要把设计稿的宽度/2
-
页面开头处引入下面这段代码，用于动态计算font-size
window.onload = function () { var w = document.body.clientWidth; //获取屏幕宽度 // 这里*100 是为了取整数 var x = parseInt((w * 100) / 375 * 10) / 10; //获取任意屏幕上的根节点字体大小 document.getElementsByTagName('html')[0].style.fontSize = x + 'px'; //监听屏幕宽度变化 window.onresize = function () { var w = document.body.clientWidth; //获取屏幕宽度 var x = parseInt((w * 100) / 375 * 10) / 10;; //获取任意屏幕上的根节点字体大小 document.getElementsByTagName('html')[0].style.fontSize = x + 'px'; } }
撸个小小的例子看下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
window.onload = function () {
//获取屏幕宽度
var w = document.body.clientWidth;
// 这里*100 是为了取整数
var x = parseInt((w * 100) / 375 * 10) / 10;
//获取任意屏幕上的根节点字体大小
document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
//监听屏幕宽度变化
window.onresize = function () {
//获取屏幕宽度
var w = document.body.clientWidth;
//获取任意屏幕上的根节点字体大小
var x = parseInt((w * 100) / 375 * 10) / 10;;
document.getElementsByTagName('html')[0].style.fontSize = x + 'px';
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
}
body {
max-width: 750px;
margin: 0 auto;
}
/* 如果按照750px的设计搞量出来头部的高度为80的话，那么在转换过程中你需要的这样计算 80/2/100 最后计算出高度为0.4rem*/
/* 80/2是转换成375px的手机端，除以100转换成rem单位 */
header {
background: purple;
height: 0.4rem;
}
</style>
</head>
<body>
<header>
</header>
</body>
</html>
rem字体大小图片
- 这里根元素字体大小为100px；在375px下元素高度为40px=0.4rem；
- 在不同的分辨率下，会根据根元素字体大小自适应元素的大小，来达到适配
案例图片
