手机端使用rem适配
最近一直在做手机端的东西,各种型号的手机适配很是无解。经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会有偏差但是基本是没有问题的。 因为最近也是刚刚用,还在摸索中,有兴趣的朋友可以研究下。如有问题,还请见谅。(ps只有新的页面或者项目适用,不适于用二开的项目避免发生不必要的问题)
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;
var ua = navigator.userAgent;
if (/Android (/d+/./d+)/.test(ua)){
var version = parseFloat(RegExp.$1);
// andriod 2.3
if(version>2.3){
document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+’, maximum-scale = ‘+phoneScale+’, target-densitydpi=device-dpi">’);
// andriod 2.3以上
}else{
document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">’);
}
// 其他系统
} else {
document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">’);
}
//微信去掉下方刷新栏
if(RegExp("MicroMessenger").test(navigator.userAgent)){
document.addEventListener(‘WeixinJSBridgeReady’, function onBridgeReady() {
WeixinJSBridge.call(‘hideToolbar’);
});
}
//rem换算
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = ‘orientationchange’ in window ? ‘orientationchange’ : ‘resize’,
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = ‘100px’;
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px’;
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener(‘DOMContentLoaded’, recalc, false);
})(document, window);
</script>
手机端使用rem适配的更多相关文章
- 手机端页面rem自适应脚本
什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...
- 手机端布局rem 与vm的使用
手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...
- 适配手机端之 rem
(function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...
- 手机端使用rem的适配
<html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...
- 手机端布局 - rem计算
功能说明:以一个640px的宽度为基准,最小不低于320px,当大于640px时,让其在页面中居中. 如果正处于640 - 320之中的,都按照js进行等比例的缩放. 这里我们规定1rem = 100 ...
- 【学习】如何制作手机端html模板(REM的实际应用)
以前制作手机页面时,总是很迷茫,不知从何着手,页面也不知如何处理.会用一些百分比啊,媒体查询啊,还有就是目测了,但是各种手机端的屏幕适配是个老大难的问题,没有做到百分百兼容的.自从发现了rem这个好东 ...
- 手机端rem如何适配_rem详解及使用方法
什么是rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么 ...
- 关于手机端适配的问题(rem,页面缩放)
关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...
- 移动端(手机端)页面自适应解决方案—rem布局篇
移动端(手机端)页面自适应解决方案-rem布局 假设设计妹妹给我们的设计稿尺寸为750 * 1340.结合网易.淘宝移动端首页html元素上的动态font-size属性.设计稿尺寸.前端与设计之间协作 ...
随机推荐
- Mysql 小技巧
查询出的日期 加一天,加一周,加一月,加一年 DAY)); WEEK)); MONTH)); YEAR)); 查询出的日期 减一天,减一周,减一月,减一年 DAY)); WEEK)); MONTH)) ...
- http的响应对象
Servlet 服务器 HTTP 响应 正如前面的章节中讨论的那样,当一个 Web 服务器响应一个 HTTP 请求时,响应通常包括一个状态行.一些响应报头.一个空行和文档.一个典型的响应如下所示: H ...
- Egret中的对象池ObjectPool
为了可以让对象复用,防止大量重复创建对象,导致资源浪费,使用对象池来管理. 对象池具体含义作用,自行百度. 一 对象池A 二 对象池B 三 字符串key和对象key的效率 一 对象池A /** * 对 ...
- js 更改head的title
使用document.title = "hello"; 不能使用 $("title").text("dd");或者 $ ...
- webform页面传值和删除修改
一.webform跨页面传值1.内置对象地址栏数据拼接 QueryString 优点:简单好用:速度快:不消耗服务器内存. 缺点:只能传字符串:保密性差(调转页面后在地址栏显示):长度有限.响应请求对 ...
- KPI
一.综合计划部KPI明细数据查询--xigu用户要求:需显示第三季度,即789三个月的明细数据解决方法:1.查看SSISC:\Users\Administrator\Documents\Visual ...
- xUtils框架的使用
xUtils简介 xUtils 包含了很多实用的android工具,xUtils 源于Afinal框架,对Afinal进行了大量重构,使得xUtils支持大文件上传,更全面的http请求协议支持,拥有 ...
- 简单介绍Android应用特色及详解四大组件
Android应用特色 Android主要有什么特色呢,有以下几个方面来体现: 四大组件 丰富的系统控件 SQLite数据库等持久化技术 地理位置定位 强大的多媒体 传感器 1,四大组件 Androi ...
- Remoting创建远程对象的一个实例:
private static Lazy<IChannelManager> channelManager=new Lazy<IChannelManager>(() => ...
- Hibernate学习笔记
一.Hibernate基础 1.Hibernate简介 Hibernate是一种对象关系映射(ORM)框架,是实现持久化存储的一种解决方案.Java包括Java类到数据库表的映射和数据查询及获取的方法 ...