<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. Ajax异步请求阻塞情况的解决办法

    最近使用ExtJs4的mvc模式在开发了在线漫画的后台,因为异步请求比较多,有的回应时间长,有点短.我发现在多次并发的情况下,会造成阻塞的情况.也就是说如果回应时间长的请求还在进行中,短的请求却被挂起 ...

  2. 用eFrameWork框架实现快捷搜索

    软件系统最大的价值在于用心去帮客户解决各种痛点,需要做好方方面面的工作,数据的快捷搜索就是其中比较重要的一个环节.那么,什么样的搜索方式才是最高效快捷的呢?目前能想到最好的办法是用名称声母检索,用声母 ...

  3. .NET 简易方法拦截器

    伟大的无产阶级Willaim曾说过:"无论你觉得自己多么的了不起,也永远有人比你更强".对,我说过!我就是william. 今天想记录一下在项目中遇到的一个比较有意思的东西,异常拦 ...

  4. Windows 安装并配置 MySQL 5.6

    Windows 下安装 MySQL 有两种方式,一种是下载安装包,根据提示一路 next 安装,不需要什么配置,比较简单:另一种是下载压缩包,通过命令和配置来安装,也不难,个人感觉更简单.本篇就采用第 ...

  5. VS中ReportView的坑爹问题

    ReportViewer不是.netframework提供的,而是visual studio提供的组件,它依赖如下组件: Microsoft.ReportViewer.Winforms.dll Mic ...

  6. MySQL事务一致性理解

    一致性是指数据处于一种语义上的有意义且正确的状态.一致性是对数据可见性的约束,保证在一个事务中的多次操作的数据中间状态对其他事务不可见的.因为这些中间状态,是一个过渡状态,与事务的开始状态和事务的结束 ...

  7. Newtonsoft.Json日常用法

    原文链接:https://www.cnblogs.com/ZengJiaLin/p/9578794.html

  8. Day 22 面向对象知识.

    https://www.cnblogs.com/bigberg/p/7252349.html #类方法,静态方法, 属性方法. 类有两种作用:属性引用 和实例化.属性引用(类名.属性)class pe ...

  9. Depth-first Search-690. Employee Importance

    You are given a data structure of employee information, which includes the employee's unique id, his ...

  10. jQuery基础笔记(2)

    day54 筛选器 参考:https://www.cnblogs.com/liwenzhou/p/8178806.html#autoid-1-7-5 筛选器方法 下一个元素: $("#id& ...