移动端自适应布局的高效方法,欢迎批评或指正
2016-06-07 23:02
344 查看
是我个人偏好的一种方法,优点是可以省去大量的适配时间和精力,一、总的办法是首先使用一点JS判断设备宽度,再给根元素html设置font-size,从而适配整个页面。二、CSS中,无论是字号还是宽高,如果都使用em或rem单位(1px的可以无视),最终都是由根元素html的font-size大小决定的。举个例子,比如设计图是640px宽,我一般会设置html的font-size为20px, 假设一个移动端的body宽度(或者可用宽度,这个视情况定)为clientWidth,那么要在这个终端还原设计图,就需要将适配后的html的font-size数值改为clientWidth/(640/(20*2))(移动端字号一般要除2),再渲染整个DOM。JS如下:function adaptFun(designPercent){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
//视窗变化时需要再次适配,这种情况实际价值不是很大!最主要的只是首次适配
window.onresize = function(){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
}
}adaptFun(640/40);我把上边代码单独放一个文件(adapt.js)中;三、在页面上如何放置和执行adapt.jsadapt.js最好尽量往上放,尽量紧跟在body后就好(如下),因为这时并没有加载多少东西,但已经可以判断document.body.clientWidth了,这样就可以改变原始的html的font-size值了。<link rel="stylesheet" href="css/style.css">
</head><body><script type="text/javascript" src="js/adapt.js"></script>
这样,页面在绝大多数终端上将呈现原设计图效果,即使有Device-pixel-ratio1.5或3的设备,由于相对位置不会变,也只能写一句媒本查询即可(除非特别复杂的页面,否则媒本查询也不需要)。四、优点和感概如果靠媒体查询适配,会写不少代码,很头疼,以后有相似的项目想要借鉴,甚至还需重新适配,花去大量时间。我个人觉得,这种只要写好一个设计宽度的版本(比如写一个640或320宽的)就好,其它自动适配,和写PC页面差别不大。测试地址:http://game.feiliu.com/zk/ysg/main/index.html
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
//视窗变化时需要再次适配,这种情况实际价值不是很大!最主要的只是首次适配
window.onresize = function(){
var mainWidth = document.body.clientWidth;
var fontSize = mainWidth/designPercent + 'px';
document.documentElement.style.fontSize = fontSize;
}
}adaptFun(640/40);我把上边代码单独放一个文件(adapt.js)中;三、在页面上如何放置和执行adapt.jsadapt.js最好尽量往上放,尽量紧跟在body后就好(如下),因为这时并没有加载多少东西,但已经可以判断document.body.clientWidth了,这样就可以改变原始的html的font-size值了。<link rel="stylesheet" href="css/style.css">
</head><body><script type="text/javascript" src="js/adapt.js"></script>
这样,页面在绝大多数终端上将呈现原设计图效果,即使有Device-pixel-ratio1.5或3的设备,由于相对位置不会变,也只能写一句媒本查询即可(除非特别复杂的页面,否则媒本查询也不需要)。四、优点和感概如果靠媒体查询适配,会写不少代码,很头疼,以后有相似的项目想要借鉴,甚至还需重新适配,花去大量时间。我个人觉得,这种只要写好一个设计宽度的版本(比如写一个640或320宽的)就好,其它自动适配,和写PC页面差别不大。测试地址:http://game.feiliu.com/zk/ysg/main/index.html
相关文章推荐
- Struts2中关于"There is no Action mapped for namespace / and action name"的总结
- Android 使用jni解析数组
- 玩转Android之Drawable的使用
- 玩转Android之Drawable的使用
- 玩转Android之Drawable的使用
- 玩转Android之Drawable的使用
- 安卓实现按返回键回到桌面以及再一次按返回键退出应用
- Android之PhtoView设置图片放大缩小后,图片显示在界面上左上角的解决办法
- Android初级教程理论知识(第三章测试&数据存储&界面展现)
- Android初级教程理论知识(第三章测试&数据存储&界面展现)
- iOS内存管理初认识
- APP开发实战46-设计模式介绍4
- Crosswalk 开发浅析,忘掉那些Webview的坑
- 大猫品Android[三][Reference深入浅出]
- APP开发实战45-设计模式介绍3
- Swift和Java关于字符串和字符的比较
- QSignalMapper简介
- Android N 对Doze(打盹)模式优化
- Android Studio推荐插件
- Android获取手机联系人的姓名和电话