您的位置：首页 > 移动开发

个人收藏的移动端网页布局rem解决方案

2016-12-15 17:36 543 查看

写移动端项目时，总是会纠结是用css3 media query 还是用rem。移动端框架挺多，但是因为项目都比较小，不考虑使用。

无意在网上找到一个移动端rem布局的解决方案，经个人实践，目前未出现什么大问题，收藏备用。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端rem布局</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<style>
.test{
width: 1rem;
height: 1rem;
background-color: #fa5275;
}
</style>
</head>
<body>
<div class="test"></div>
<p>设置前html的fontsize:16px;</p>
<p>设置前html的fontsize:16px;</p>

<script>
function adapt(designWidth, rem2px){
var d = window.document.createElement('div');
d.style.width = '1rem';
d.style.display = "none";
var head = window.document.getElementsByTagName('head')[0];
head.appendChild(d);
var defaultFontSize = parseFloat(window.getComputedStyle(d, null).getPropertyValue('width'));
d.remove();
document.documentElement.style.fontSize = window.innerWidth / designWidth * rem2px / defaultFontSize * 100 + '%';
var st = document.createElement('style');
var portrait = "@media screen and (min-width: "+window.innerWidth+"px) {html{font-size:"+ ((window.innerWidth/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}";
var landscape = "@media screen and (min-width: "+window.innerHeight+"px) {html{font-size:"+ ((window.innerHeight/(designWidth/rem2px)/defaultFontSize)*100) +"%;}}"
st.innerHTML = portrait + landscape;
head.appendChild(st);
return defaultFontSize;
}
var defaultFontSize = adapt(640, 100);
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航