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

如何写移动端页面

2017-04-06 11:56 141 查看

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="static/jquery.min.js"></script>
<script src="static/moment.js"></script>
<title>律所网校</title>
<script>

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').set
4000
Attribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
if(document.documentElement.clientWidth/devicePixelRatio<=414){
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
}else if(document.documentElement.clientWidth>=1136&&document.documentElement.clientWidth<=2208){//5s 6s横屏
document.documentElement.style.fontSize = '108px';
}else if(document.documentElement.clientWidth>2208){
document.documentElement.style.fontSize = '54px';
}else{
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
}

window.addEventListener("resize", function() {
window.location.reload()
},false)
</script>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

script标签里的内容就是根据devicePixelRatio计算出scale
然后赋值给initial-scale maximum-scale minimum-scale并且计算出html的fontSize=屏幕宽/10
这样屏幕宽就是10rem,1rem=屏幕宽/10
比如750px的设计稿 1rem=75px;写页面时单位基本都用rem 除了个别的具体细节用px
/**********************************第二种方式 1rem=100px*****************************************/
今天又读到另一篇文章，http://www.cnblogs.com/qiny-easyui/archive/2016/11/26/6104190.html
关于rem的用法 1rem=100px;这种方式在写代码时计算量少，更快捷，
截取了其中的部分以便记录
假设设计师给的设计稿是iphone6的宽度，即375px(高清的视觉稿750/2=375)
我们完全可以按照设计稿的尺寸来给元素赋值，
比如设计稿是80px,那么css就写80px；这样所有网站的页面都写好后，
我们需要做两件事1 设置页面的rem大小html{font-size:calc(100vw/3.75)}100vw是设备的宽度，
除以3.75可以让1rem的大小在iphone6下等于100px2 替换页面中的单位，
把所有的px单位替换成rem，除以100。
比如前面的80px,就是0.8rem这样在iphone6下所有元素的尺寸还是和视觉稿的尺寸一样，
而iphone5 因为屏幕宽度变小了，100vw/3.75得到的值也会变小，即rem的单位值会变小。
页面中所有的尺寸会等比例缩放这样就可以做到针对不同分辨率的设备保持视觉一致了。
最后，前面用到vw单位但是低版本的可能不支持，
那么就需要js来处理一下
<script>
document.doucmentElement.style.fontSize=window.innerWidth/3.75+'px'
</script>
第三种方法也是最常用的一种就是在js里设置使1rem=100px
width=document.doucmentElement.clientWidth;屏幕宽
document.documentElement.style.fontSize=width/100+'px'

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

标签：

相关文章推荐

新的分享

章节导航