移动端适配——rem方案
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem适配方案</title>
<script type="text/javascript">
/*通过JS动态设置viewport,将视口等比放大到设备独立像素大小,使css中的1px代表设备独立像素中的1px
window.devicePixelRatio 是设备上物理像素/设备独立像素(dips)的比例
公式:window.devicePixelRatio = 物理像素 / dips
正常initial值为1显示物理像素,pixelRatio为要动态设置的比例显示设备独立像素
1/pixelRatio=物理像素 / dips=window.devicePixelRatio*/
var pixelRatio=1/window.devicePixelRatio;
document.write('<meta name="viewport" content="initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+',user-scalable=no"/>');
var html=document.querySelector('html');
//获取可视窗口的宽度,是否含竖向滚动条宽度不一定,测试时设置子级元素border值时返回的width时有时含滚动条有时不含,不明原因
//因为用在移动端,所以也相当于屏幕宽度,是否含滚动条的宽度的问题也就不存在了。
//html默认width是与浏览器窗口同宽,document.documentElement.tagName==html
var width=html.getBoundingClientRect().width;
//设置根节点的字体大小,rem根据其设置大小,1rem=html.style.fontSize
//16为一基准值,可自己设置不同的基准值,注意设置页面中元素字体大小是不要设置过小的rem,避免出现小于12px的字体
html.style.fontSize=width/16+'px';
//html的字体大小=屏幕宽度的16分之一=1rem
</script>
<style>
body{
margin: 0;
}
#box{
width: 10rem;/* box宽度为屏幕宽度的16分之10 */
height: 10rem;/* box高度为屏幕宽度的16分之10 */
background: pink;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>