码迷,mamicode.com
首页 > 其他好文 > 详细

横竖屏rem布局的判断

时间:2017-06-16 14:24:06      阅读:315      评论:0      收藏:0      [点我收藏+]

标签:doctype   event   font   initial   back   trait   html   nload   lan   

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Document</title>
<script type="text/javascript">
window.onload=function(){
function hengshuping(){
if(window.orientation==180||window.orientation==0){
document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 1330) + "px";
}
if(window.orientation==90||window.orientation==-90){
document.documentElement.style.fontSize = 100 * (document.documentElement.clientWidth / 640) + "px";
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
}
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
@media all and (orientation: portrait) {
div{
width: 100%;
height: 1rem;
background: red;
text-align: center;
line-break: 1rem;
}
}
@media all and (orientation: landscape) {
div{
width: 100%;
height: 3rem;
background: yellow;
text-align: center;
line-break: 1rem;
}
}
</style>
</head>
<body>
<div>
nihao
</div>
</body>
</html>

横竖屏rem布局的判断

标签:doctype   event   font   initial   back   trait   html   nload   lan   

原文地址:http://www.cnblogs.com/years-fish/p/7027047.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!