<!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. SlidingMenu+Fragment实现当前最流行的侧滑

    1 http://www.krislq.com/2013/03/android_case_slidingmenu_fragment/ 2 https://github.com/jfeinstein10 ...

  2. cadence allegro pcb模块设计复用

    cadence allegro pcb模块设计复用 转载▼ 标签: 复用 模块 原理图 元件 文件 杂谈 分类: PCB技术 在你遇到如上图所示的dsp阵列PCB时,如果你的layout软件支持模块复 ...

  3. angularjs2中的非父子组件的通信

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传 ...

  4. appearance 设置公共属性

    //设置公共TabBarItem 的属性 [UITabBarItem appearance] //设置公共NavigationBar 的属性 [UIBarButtonItem appearance]

  5. HTML_<select>

    1.设置select只读不可编辑且select的值可传递 (1) <select onfocus="this.defaultIndex=this.selectedIndex;" ...

  6. Spigot 算法之中的一个 计算调和级数的和

     我是首先在[1] 注意到 Spigot-Algorithm的,这个算法公布的相当早.见[2].  [1] 给出几个令人惊异的程序.仅仅用非常少的代码就能够计算e,pi,log(2)等常数. 当中 ...

  7. 搭建redis集群遇到的坑

    搭建redis集群遇到的坑 #!/bin/bash # 作者: tuhooo # 日期: 2017.4.23 20.15 # 用途: 通过ruby脚本启动redis伪集群 if [ $2 == &qu ...

  8. android:分享 一个非常强大的LOG开关---Log.isLoggable

    1.API亮点: 此API能够实现不更换APK.在出问题的手机上就直接能抓到有效log,能提升不少工作效率. .API介绍 近期在解决短信问题时.看到一个非常强大的LOG开关---Log.isLogg ...

  9. DAO调用存储过程问题

    相关文章:1.使用 Spring 框架调用 DB2 存储过程   2.Spring如何使用JdbcTemplate调用存储过程的三种情况   3.spring中调用存储过程,函数

  10. M - 基础DP

    M - 基础DP Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Descriptio ...