<script>
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
window.addEventListener("resize",function(){
document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+"px";
},false)
</script> <script>
//因绝对定位+margin百分比定位在UC中有BUG,翻屏页面建议使用rem单位
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (clientWidth < 375) {
docEl.style.fontSize = 50 + 'px'
} else if (clientWidth > 750) {
docEl.style.fontSize = 100 + 'px'
} else {
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
recalc();
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
})(document, window);
</script>

rem手机端适配的更多相关文章

  1. 关于手机端适配的问题(rem,页面缩放)

    关于手机端适配的问题(rem,页面缩放) 96 进击的小前端 关注 2018.02.02 13:57 字数 320 阅读 19评论 0喜欢 0 相信很多和会和我碰到一样的情况,就是你用rem去写移动端 ...

  2. rem手机端页面自适应完美解决方案(最新)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. h5 手机端适配问题汇总

    1.uc手机浏览器竟然没有 sessionstorage 醉了 2.opera 浏览器  能识别 a标签中href的  javascript:; 为网址  ,  55555 3.safari 的弹框如 ...

  4. 手机端适配rem代码片段

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 手机端适配方案 媒体查询和flexbale

    方法一 flexible 一.npm 包安装 lib-flexible 淘宝适配方案 px2rem px自动转rem npm install lib-flexible --save npm insta ...

  6. 移动端适配,h5网页,手机端适配兼容方案.可以显示真实的1px边框和12px字体大小,dpr浅析

    以前写移动端都是用这段JS解决. (function (doc, win) { // 分辨率Resolution适配 var docEl = doc.documentElement, resizeEv ...

  7. 手机端适配iPhoneX

    iPhoneX取消了物理按键,改成底部小黑条,这一改动导致网页出现比较尴尬的屏幕适配问题.对于网页而言,顶部(刘海部位)的适配问题浏览器已经做了处理,所以我们只需要关注底部与小黑条的适配问题即可(即常 ...

  8. rem手机端页面自适应布局(待修正下一篇完美布局)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 手机端使用rem适配

    最近一直在做手机端的东西,各种型号的手机适配很是无解.经过同事及百度找到了这么一个方法 html font-size默认100px 将rem进行换算1px==0.01rem; 页面在各个手机适配个别会 ...

随机推荐

  1. 网友写的解决uniGUI限制的方法

    群友写的解决uniGUI试用版限制修改SessionTimeOut,思路很精巧,贴过来分享,感谢朋友的奉献.当然,如果真正用uniGUI实做项目,买份正版是正道! var   UniServerOpt ...

  2. Python学习-25.Python中的分数

    在Python中,不止有浮点数(float),而且还有分数(Fraction)这个类型. 要使用分数,必须引入一个模块. import fractions 然后就可以声明一个分数了 x = fract ...

  3. 基于jTopo的拓扑图设计工具库ujtopo

    绘制拓扑图有很多开源的工具,知乎上也有人回答了这个问题: https://www.zhihu.com/question/41026400/answer/118726253 ujtopo是基于jTopo ...

  4. .NET Core 和 .NET .Framework 速度比较

    废话不多说! 一下是 .NET core 和 .NET framework 速度对比. 两者使用最慢的冒泡排序算法:  排序10万条数据 次数 .NET CORE(耗时) .NET framework ...

  5. Could not load file or assembly '$SharePoint.Project.AssemblyFullName$'

    The fix is simple, do the following: 1.  Open your project file in NotePad 2.  Find the PropertyGrou ...

  6. day 100天 VUE 父子传值,单页面.

     一 .静态资源导入方法 启动服务  npm run serve <template> <div id ="app"> <h3>{{msg}}& ...

  7. 926. Flip String to Monotone Increasing

    A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...

  8. QQ个人信息保护 | 攻的对面叫防

    近来我们愈来愈重视个人信息保护,当接到骚扰电话时,你心里或许在想(我手机号怎么又被别人知道的?别人是怎么知道我手机号的?),现在的时代,手机已或不可缺,QQ几乎每个人都在用.而有些人总想保护个人QQ资 ...

  9. Android安全防护防护———Android 端常见的安全问题

    Android安全防护防护——加密算法:传送门https://www.cnblogs.com/huangjialin/p/9694488.html 组件安全 activity劫持 简单来说就是正常的a ...

  10. falcon nodata 小坑一枚

    按照官方文档配置完一切正常,唯独 nodata, 明明有正常的数据,但是为什么 nodata 会认为是没收到呢 困扰许久,直到看了数据库中的数据才恍然大悟 falcon_portal库中的 hosts ...