动态rem简单示例
2016-12-12 本文已影响264人
该帐号已被查封_才怪
之前写了个简单响应式的例子，其实那个就是将宽度按百分比的写法或者写两个样式，再利用媒体查询的方式显示相应的宽度或样式；刚刚写了个动态rem的简单范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>rem简单例子</title>
<script type="text/javascript">
(function(doc, win) {
var
style = doc.createElement("style"),
resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
setRemFun = function() {
var pageWidth = doc.documentElement.clientWidth,
htmlFontSize = "html{font-size:" + pageWidth / 16 + "px}";
style.innerHTML = htmlFontSize;
document.head.appendChild(style);
};
doc.addEventListener("DOMContentLoaded", setRemFun);
win.addEventListener(resizeEvt, setRemFun);
}(document, window))
</script>
<style type="text/css">
* {
padding: 0;
margin: 0;
}
.content {
background-color: red;
border: 1px solid #000;
box-sizing: border-box;
height: 1rem;
width: 8rem;
float: left;
font-size: 1rem;
line-height: 1rem;
text-align: center;
}
.ct:after {
display: block;
content: "";
clear: both;
}
</style>
</head>
<body>
<div class="ct">
<div class="content">我是1</div>
<div class="content">我是2</div>
</div>
</body>
</html>
上述代码运行后，无论在什么样的尺寸的屏幕下，两个div的宽度总是均分整个屏幕，在手机上也是如此（包括横屏、竖屏）。
Paste_Image.png
在线预览地址：http://output.jsbin.com/bamuboxubu
另外强烈推荐相关的文章：
1、手机端页面自适应解决方案—rem布局进阶版（附源码示例）
2、关于移动端 Rem 布局的一些总结
3、移动web适配利器-rem
4、MobileWeb 适配总结
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
