适配手机端的几种写法
来源:互联网 发布:ce教程找怪物数组基址 编辑:程序博客网 时间:2024/06/16 12:54
1,rem布局,现在普遍常用的方法
一般ui设计师给的页面都是640的,所以
document.documentElement.clientWidth/6.4+"px";项目中,在ps中量的尺寸直接除以100,后面写rem就可以了。
window.onload=function(){//1.首次加载的时候 调用动态设置rem的apisetRemSize();window.addEventListener("resize",setRemSize,false);function setRemSize(){//1.在任何尺寸中都可以获得rem值var _clientWidth=document.documentElement.clientWidth/6.4+"px";//将得到的rem值赋值给根元素的font-sizedocument.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>
1 0
- 适配手机端的几种写法
- 正则表达式匹配手机的几种写法
- 爱的几种写法
- 几种分页的写法
- 几种分页的写法
- singleton 的几种写法
- delegate的几种写法
- 登录的几种写法
- javascript 的几种写法
- Activity的几种写法
- 最大公约数的几种写法
- javascript的几种写法
- hql的几种写法
- hql的几种写法
- 倒计时的几种写法
- JS的几种写法
- 单例模式的几种写法(包含双检锁写法)
- 单例模式的几种写法(包含双检锁写法)
- testparm命令
- Linux软连接和硬链接
- pymysql连接数据库
- 09 qt画图与贪吃蛇游戏的实现
- 电商那些年,我摸爬打滚出的高并发架构实战精髓(2017-03-27 YYQ DBAplus社群)
- 适配手机端的几种写法
- java 集合类结构分析
- 短信验证码
- Mule性能分析
- 单元测试神器Mockito详细剖析
- Spring整合redis(较新版)
- 求两个数的交集,使用map容器和vector容器
- Android ListView上下选择,定位
- SQL整理