<!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. 转Python 标准库 urllib2 的使用细节

    Python 标准库中有很多实用的工具类,但是在具体使用时,标准库文档上对使用细节描述的并不清楚,比如 urllib2 这个 HTTP 客户端库.这里总结了一些 urllib2 库的使用细节. 1 P ...

  2. Rabbitmq消息队列（一） centos下安装rabbitmq

    1.简介 AMQP,即Advanced Message Queuing Protocol,高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计.消息中间件主要用于组件之间的解耦,消息的 ...

  3. SpringCloud系列一：微服务理解

    1. 单体架构 一个归档包(例如war格式)包含所有功能的应用程序,通常称为单体应用. > 复杂性高:模块多,模块的边界模糊,依赖关系不清楚,代码质量参差不齐. > 技术债务:随着时间推移 ...

  4. 【问题记录】springmvc国际化问题

    异常-Cannot change HTTP accept header - use a different locale resolution strategy springmvc国际化时,local ...

  5. Harvard数据库课程CS 265: Research Topics in Database Systems

    CS 265: Research Topics in Database Systems Announcements Quiz 3 will be posted. Good luck! Quiz 2 h ...

  6. UVA 10209

    10209 - Is This Integration ? #include <stdio.h> #include <math.h> /* */ //多次错误都是因为我将PI定 ...

  7. Outlook2016删不掉主账户的解决方法

    控制面板>账户>邮件把配置文件删了 前两项和Outlook内部打开账户选项一样没用, 进第三个 重启Oulook的时候会提示重新建一个配置,就OK了!

  8. Android Studio报Error:Execution failed for task &#39;:Companion:preDexDebug&#39;.

    错误例如以下: Error:Execution failed for task ':Companion:preDexDebug'. > com.android.ide.common.proces ...

  9. c语言的编译和运行流程

    C语言源程序经过编译器进行词法分析 语法分析 等过程生成中间语言(object后缀的文件)编译期间会生成一个字符表和静态分配空间(如new static 全局变量)它们所需的内存空间可以计算出来放在链 ...

  10. 【BZOJ4177】Mike的农场 最小割

    [BZOJ4177]Mike的农场 Description Mike有一个农场,这个农场n个牲畜围栏,现在他想在每个牲畜围栏中养一只动物,每只动物可以是牛或羊,并且每个牲畜围栏中的饲养条件都不同,其中 ...