<!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. 多数据源动态关联报表的制作（birt为例）

    使用Jasper或BIRT等报表工具时,常会碰到一些很规的统计,用报表工具本身或SQL都难以处理,比方与主表相关的子表分布在多个数据库中,报表要展现这些数据源动态关联的结果.集算器具有结构化强计算引擎 ...

  2. js 正则表达式 取反

    http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp 以匹配中文为例 const test_value = '李钊鸿' if (/[^\u4e00 ...

  3. thinkphp5.0极速搭建restful风格接口层实例

    作为国内最流行的php框架thinkphp,很快就会发布v5.0正式版了,现在还是rc4版本,但已经很强大了下面是基于ThinkPHP V5.0 RC4框架,以restful风格完成的新闻查询(get ...

  4. android开发游记：meterial design 5.0 开源控件整套合集 及使用demo

    android 的5.0公布不光google官方给出了一些新控件,同一时候还给出了一套符合material design风格的设计标准,这套标准将未来将覆盖google全部产品包括pc端,站点,移动端 ...

  5. Linux系统字符集乱码问题

    假设你在安装Linux的过程中就选择了中文.可能能够省去步骤1.2.反之.假设你先安装了英文环境,而后希望它支持中文,则能够1.2步 1.首先在linux中安装中文包安装中文简体包rpm -ivh k ...

  6. CentOS yum 命令出现 [Errno 14] curl#6 - &quot;Couldn&#39;t resolve host ...&quot; 的解决方法

    安装svn的时候,发现报错说一个地址无法訪问. # yum list | grep subversion http://opensource.wandisco.com/centos/7/svn-1.8 ...

  7. 解析spark RDD

    RDD是spark抽象的基石,可以说整个spark编程就是对RDD进行的操作   RDD是弹性的分布式数据集,它是只读的,可分区的,这个数据集的全部或者部分数据可以缓存在内存中,在多次计算间重用.所谓 ...

  8. SQL索引及表的页的逻辑顺序与物理顺序

    1.经过测试发现当聚集索引新建或者重建时,会按照逻辑顺序重新排列数据页和数据页内的数据行的物理顺序. 2.但修改表时,无论是聚集索引还是堆的数据页都是按自然顺序向后插入数据,页面上的偏移量可以证明.因 ...

  9. 用PreferenceActivity做一个标准的设置界面

    最后接触到一个任务,做一个工厂设置,在我看来工厂设置不需要多美观,但是一定要方便修改,添加功能,再就是使用方便,我就想到了用PreferenceActivity,android系统的settings就 ...

  10. pdf文件编辑

    下载软件:Foxit PDF Editor,这个工具挺好用的,可以对pdf文件内容进行编辑 Foxit PDF Editor 是第一个真正的PDF文件编辑软件.许多人都希望能找到一个象编辑其它类型的文 ...