rem手机端适配

时间:2021-11-22 10:58:35
<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. 移动端适配&comma;h5网页&comma;手机端适配兼容方案&period;可以显示真实的1px边框和12px字体大小&comma;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. &lpar;转载&rpar;spring mvc DispatcherServlet详解之一---处理请求深入解析

    要深入理解spring mvc的工作流程,就需要先了解spring mvc的架构: 从上图可以看到 前端控制器DispatcherServlet在其中起着主导作用,理解了DispatcherServl ...

  2. 【我是老中医】codeblocks无法编译的问题解决方法

    前几天把codeblocks的文件夹移动到移动硬盘里面,结果发现从此以后代码不能编译了,当时没有注意,就改用vs写代码,发现真的不是很习惯,正好学妹也碰到这种问题问我怎么解决,然后就百度了一下. 我的 ...

  3. &lbrack;ASE&rsqb;&lbrack;Daily Scrum&rsqb;11&period;30

    燃烧图的页面进不去了…… 小结一下吧,sprint2的内容已经基本完成了, 推迟到之后进行的任务: ·地图块的刷新 一些bug尚未修复不过不是特别重要所以也推到后面了, 之后两个sprint主要会增加 ...

  4. PB串口编程资料&lpar;转&rpar;

    ----MSCOMM32参数基本介绍2008年03月29日 星期六 上午 11:37MSComm 控件通过串行端口传输和接收数据,为应用程序提供串行通讯功能.MSComm控件在串口编程时非常方便,程序 ...

  5. 多线程随笔一(AutoResetEvent和ManulResetEvent)

    AutoResetEvent和ManulResetEvent是.net中用来做线程的同步的两个类.从类名上不难看出,这两个类的区别在于一个是自动的,一个是手动的(这不是废话嘛).两个类的实现原理大致相 ...

  6. 基于Abp的WebApi容器

    简述 对 Abp的动态web api的改造过程 注册 1. 首先通过反射将<服务类型>通过ApiControllerBuilder 构建成成 DynamicApiControllerInf ...

  7. groovy入门(2-1)Groovy的Maven插件安装:Plugin execution not covered by lifecycle configuration

    参考链接:http://www.cnblogs.com/rightmin/p/4945797.html 1.引入groovy的jar包 2.引入groovy编译插件 3.遇到问题 Plugin exe ...

  8. Linux网络编程学习&lpar;六&rpar; ----- 管道&lpar;第四章&rpar;

    1.管道的定义 管道就是将一个程序的输出和另外一个程序的输入连接起来的单向通道,比如命令: ls -l|more,就建立了一个管道,获取ls -l的输出作为more的输入,数据就沿着管道从管道的左边流 ...

  9. Promise笔记

    参考:阮一峰es6(http://es6.ruanyifeng.com/#docs/promise) 时间:2018-07-03 类型:个人笔记 解决的问题:异步编程的一种解决方案. 定义:Promi ...

  10. IOS-快速集成检查更新

    一直以为Appstore有了检查版本是否更新的机制,我们在APP上做这个更新功能会被拒,但是也有看到一些APP也是做了这个更新功能的.因为在网上没有找到完全正确的方法能获取到iTunes里的数据的,于 ...