适配手机端的几种写法
2018-01-28 09:15
155 查看
1,rem布局,现在普遍常用的方法
一般ui设计师给的页面都是640的,所以
[javascript] view
plain copy
document.documentElement.clientWidth/6.4+"px";
项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
[javascript] view
plain copy
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等比例缩放。
[html] view
plain copy
<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的,所以
[javascript] view
plain copy
document.documentElement.clientWidth/6.4+"px";
项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
[javascript] view
plain copy
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等比例缩放。
[html] view
plain copy
<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>
相关文章推荐
- 适配手机端的几种写法
- ADO中数据库连接字符串的几种写法
- 关于 weakSelf 的几种写法
- 适配ListView的几种常见Adapter的用法总结
- 插入排序的几种写法及性能上的差别
- python:1+2+3+..+100的几种写法
- Android中发送短信的几种常见写法及注意事项
- MVC-Html.ActionLink的几种写法
- hql的几种写法
- jQuery显示隐藏动态效果的几种写法
- HTML中调用JavaScript的几种情况和规范写法
- spring 事务是否会回滚的几种写法
- android初学笔记,android中处理button click事件的几种写法
- 单例模式几种写法
- dephi FillChar 的几种写法
- JAVA单例模式简介及几种写法
- SQL Server 存储过程的几种常见写法分析,我们该用那种写法
- 四选一电路的几种写法
- 关于<a></a>链接的几种写法
- 全面理解Javascript闭包和闭包的几种写法及用途