适配手机端的几种写法
2017-05-11 17:38
721 查看
1,rem布局,现在普遍常用的方法
一般ui设计师给的页面都是640的,所以document.documentElement.clientWidth/6.4+"px";项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
2.百分比布局
这种方法比较古老,做出来的界面在各个分辨率的适配上比较不好,例如一个div在分辨率为320*568是320px
* 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升。
3,按照640等比例缩放。
<script type="text/javascript">
var isios = false;
! function(userAgent) {
var screen_w = parseInt(window.screen.width),
scale = screen_w / 640;
if(/Android (\d+\.\d+)/.test(userAgent)) {
var version = parseFloat(RegExp.$1);
document.write(version > 2.3 ? '<meta name="viewport" content="width=640, initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">' : '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
} else {
isios = true;
document.write('<meta name="viewport" content="width=640, initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi">');
}
}(navigator.userAgent);
</script>
一般ui设计师给的页面都是640的,所以document.documentElement.clientWidth/6.4+"px";项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
window.onload=function(){ //1.首次加载的时候 调用动态设置rem的api setRemSize(); window.addEventListener("resize",setRemSize,false); function setRemSize(){ //1.在任何尺寸中都可以获得rem值 var _clientWidth=document.documentElement.clientWidth/6.4+"px"; //将得到的rem值赋值给根元素的font-size document.documentElement.style.fontSize=_clientWidth; } };
2.百分比布局
这种方法比较古老,做出来的界面在各个分辨率的适配上比较不好,例如一个div在分辨率为320*568是320px
* 100px 在375 * 667 的分辨率显示就是 375px * 100px 效果不是等比拉升。
3,按照640等比例缩放。
<script type="text/javascript">
var isios = false;
! function(userAgent) {
var screen_w = parseInt(window.screen.width),
scale = screen_w / 640;
if(/Android (\d+\.\d+)/.test(userAgent)) {
var version = parseFloat(RegExp.$1);
document.write(version > 2.3 ? '<meta name="viewport" content="width=640, initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi">' : '<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
} else {
isios = true;
document.write('<meta name="viewport" content="width=640, initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi">');
}
}(navigator.userAgent);
</script>
相关文章推荐
- 适配手机端的几种写法
- 取第一条数据的几种写法
- JavaScript中创建命名空间的几种写法(推荐)
- cocos2d 2.0.4 适配分辨率最新写法(最全)
- 单例模式的几种写法
- 操作数据库的几种写法:
- 【JS点击事件的几种写法】
- android 控件监听事件之1——实现的几种写法
- java for循环的几种写法
- 关于“约瑟夫环”的php的几种写法
- 简单jquery ajax 的几种写法
- 几种java for循环写法介绍
- 手机端rem布局详解(淘宝无限适配)
- Android中Button事件的几种写法
- 倒计时的几种写法
- 单例模式的几种写法(包含双检锁写法)
- 第六节:反射(几种写法、好处和弊端、利用反射实现IOC)
- 在Linux下编译内核模块的Makefile的几种写法
- android 启动广告 适配几种方案
- (转)Android笔记——Button点击事件几种写法