<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<script>

    function getRem (){

           var currentWidth = document.documentElement.clientWidth;

            var fontSize  = 100;

            var width = 320;

            var currentFontsize = currentWidth / width * fontSize;

            document.querySelector('html').style.fontSize = currentFontsize + 'px';

    }

    getRem();

    window.onresize = function(){

        getRem();

    }

</script>

<style>

    p {

        font-size: 1rem;

    }

</style>

<body>

    <p>测试</p>

</body>

</html>

手机端适配rem代码片段的更多相关文章

  1. 关于手机端适配的问题（rem，页面缩放）

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

  2. 手机端使用rem适配

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

  3. 手机端页面rem自适应脚本

    什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对 ...

  4. 手机端布局rem 与vm的使用

    手机端原来的时候,在项目中使用js判断出html的字体,然后根据rem设置字体,但是js本着少用的原则,考虑用vm,vh等(顺带说一句,vm vh是网页可视区域宽度 高度 即浏览器宽度减去约16px) ...

  5. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

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

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

  7. 适配手机端之 rem

    (function() { var psdWidth = 1080, maxRem = 100, ch = document.documentElement.clientHeight || docum ...

  8. rem手机端适配

    <script> document.documentElement.style.fontSize=document.documentElement.clientWidth*100/750+ ...

  9. 手机端使用rem的适配

    <html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d312 ...

随机推荐

  1. [django] 利用多线程添加异步任务

    看到django异步大家的反应应该是celery这样的消息队列组件.如今用的最多的最推荐的也是这样的方式.然而我这需求就是请求来了,运行一个小程序.可是又不能确定这个小程序啥时候运行完.响应又要及时, ...

  2. 使用程序修改系统(IE)代理设置

    文章都是发布在github再转到这边的,这边格式可能会乱掉.博客地址:benqy.com 这是本人在做的一个前端开发调试工具(HttpMock),功能是web服务器+http日记+http代理(类似f ...

  3. tornado 初学

    tornado第一个例子 import tornado.ioloopimport tornado.web class MainHandler(tornado.web.RequestHandler): ...

  4. ubuntu环境 rake aborted!

    错误: rake aborted! Gem::LoadError: You have already activated rake 10.3.2, but your Gemfile requires ...

  5. Winform 动态 画图 不闪

    一.问题:解决winform动态画图闪的问题,网上搜的方法,大部分都是: “this.SetStyle(ControlStyles.OptimizedDoubleBuffer | ControlSty ...

  6. SpringBoot Idea 启动报错 Process finished with exit code 1

    问题描述:没有其他任何错误日志,只有Process finished with exit code 1 问题原因:Maven POM.xml问题造成 由于是properties是我直接从其他项目中拷贝 ...

  7. Rserve方式连接别的服务器

    Rserve Rserve的方式,这是一个基于TCP/IP的服务器,通过二进制协议传输数据,可以提供远程连接,使得客户端语言能够调用R 既然是TCP/IP 就可以在不同的机器上运行了 事实上官网给出了 ...

  8. 全站301跳转 PHP

    $the_host = $_SERVER['HTTP_HOST'];//取得当前域名 $request_uri = isset($_SERVER['REQUEST_URI']) ? $_SERVER[ ...

  9. openWRT自学计划安排

    目标:充分理解openwrt的框架构成,能够在openwrt框架下实现:开发新程序,修改现有程序,修改内核,修改boot.为此,制定如下计划: 一.如何在openwrt上做开发 1.编译出一个BRCM ...

  10. C# .Net 下 x86使用大内存的处理

    /LARGEADDRESSAWARE 选项通知链接器应用程序可处理大于 2 GB 的地址. 在 64 位编译器中,默认情况下启用此选项. 在 32 位编译器中,如果未在链接器行上指定 /LARGEAD ...