<!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. laravel模型建立和数据迁移和数据填充（数据填充没有成功）未完

    开始创建我们的第一个 Article 模型及其对应迁移文件了,我们在项目根目录运行如下 Artisan 命令一步到位: php artisan make:model Article -m -m 是 - ...

  2. Atitit。Time base gc 垃圾 资源 收集的原理与设计

    Atitit.Time base gc 垃圾 资源 收集的原理与设计 1. MRC(MannulReference Counting手动 retain/release/autorelease语句1 2 ...

  3. 题目3 : Fibonacci

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given a sequence {an}, how many non-empty sub-sequence of it ...

  4. Java集合系列之TreeMap源代码分析

    一.概述 TreeMap是基于红黑树实现的.因为TreeMap实现了java.util.sortMap接口,集合中的映射关系是具有一定顺序的,该映射依据其键的自然顺序进行排序或者依据创建映射时提供的C ...

  5. git学习之简介（一）

    一.前言 史上最浅显易懂的Git教程! 为什么要编写这个教程?因为我在学习Git的过程中,买过书,也在网上Google了一堆Git相关的文章和教程,但令人失望的是,这些教程不是难得令人发指,就是简单得 ...

  6. android EditText控制最大输入行数

    网络摘抄,仅作记录学习 EditText在android开发中是一个经常用到的基础控件,功能也很强大,限制输入字符类型,字数什么的.但是最近在工作中遇到了需要控制editText最大可输入行数的要求. ...

  7. 一定要搜藏的20个非常有用的PHP类库

    一定要搜藏的20个非常有用的PHP类库 本文提供了20个非常有用的PHP类库的名称和下载地址.这20个PHP类库包含了图标库,RSS解析,缩略图生成,支付,OpenID,数据库抽象,PDF生成器等一系 ...

  8. IOS启动页动画（uiview 淡入淡出效果 )2

    Appdelegate里面右个这个函数,只要它没结束,你的等待界面就不会消失.以在启动的时候做些动画 - (BOOL)application:(UIApplication *)application ...

  9. python入门课程 第3章 Python变量和数据类型

    第3章 Python变量和数据类型3-1 Python中数据类型计算机顾名思义就是可以做数学计算的机器,因此,计算机程序理所当然地可以处理各种数值.但是,计算机能处理的远不止数值,还可以处理文本.图形 ...

  10. 浅谈<持续集成、持续交付、持续部署>（一）

    谈谈持续集成,持续交付,持续部署之间的区别 经常会听到持续集成,持续交付,持续部署,三者究竟是什么,有何联系和区别呢?   假如把开发工作流程分为以下几个阶段: 编码 -> 构建 -> 集 ...