下面是对动态rem的总结。
如何做：
- 浏览器禁止 980 像素的缩放
- 设置 html {font-size: 页面宽度 / 10 px}
- 10 rem == 页面宽度(1rem 等于1/10的页面宽度)
- 所有单位都用 rem == 所有长度都以页面宽度为基准
- 页面可以兼容任何手机屏幕
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script>
document.write(`
<style>
html{font-size:${document.documentElement.clientWidth/10}px;}
</style>`)
</script>
<title>JS Bin</title>
</head>
<body>
<ul>
<li>导航1</li>
<li>导航2</li>
<li>导航3</li>
<li>导航4</li>
</ul>
<img src="https://i.loli.net/2018/03/03/5a9a1cd1c7718.jpg" alt="">
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,
pl {
list-style: none;
}
ul {
display: flex;
}
body {
font-size: 0.4rem;
}
li {
border: 1px solid;
width: 2.5rem;
line-height: 1.25rem;
text-align: center;
}
img {
width: 4rem;
height: 5rem;
}
效果：
上述实例具体细节：
http://js.jirengu.com/yidur/4/edit
变化大小后点击右上方run with js 运行会改变大小。
网友评论