<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">

     <title>Title</title>

     <style type="text/css">

         *{

             margin: 0;

             padding: 0;

         }

         #box{

             width:0.5rem;

             height:0.5rem;

             background: red;

         }

     </style>

 </head>

 <body>

 <div id="box"></div>

 </body>

 <script type="text/javascript">

      window.onload =function(){

          var width =document.documentElement.clientWidth;

          console.log("width:",width)

          var htmlNode =document.querySelector('html');

          console.log("htmlNode:",htmlNode)

          htmlNode.style.fontSize=width + 'px'

          console.log("htmlNode2:",htmlNode.style.fontiSize)

      }

 </script>

 </html>

1、 var width =document.documentElement.clientWidth   获取手机的宽度像素

2、 var htmlNode =document.querySelector('html');   获取html的元素

3、htmlNode.style.fontSize=width + 'px'  将html默认的16px换成手机的像素，后面就是1rem;

rem适配手机的更多相关文章

  1. 了解真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  2. 真实的『REM』手机屏幕适配

    rem 作为一个低调的长度单位,由于手机端网页的兴起,在屏幕适配中得到重用.使用 rem 前端开发者可以很方便的在各种屏幕尺寸下,通过等比缩放的方式达到设计图要求的效果. rem 的官方定义『The ...

  3. webapp思路和rem适配极其viewport

    webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...

  4. 谈谈我的移动端rem适配方案

    最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...

  5. 移动端 rem适配方法

    rem适配 一, 网易适配方法         屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50)         document.documentElement. ...

  6. 移动端rem适配屏幕

    九月已成历史,十月如期而至...可能是九月工作比较清闲,周记就没怎么写,十月决不能这么堕落,立贴为证,至少保证5篇博客!!!如果没学到什么新知识,就对以往的那些工作中常用到的知识点做个总结...话不多 ...

  7. 自动改变html font-size，实现移动端rem适配

    移动端采用rem适配非常方便 比如在iphone6尺寸下,将html font-size 设置为 100px,那么写css时,只要将尺寸/100 + rem 即可. 在iphone6Plus尺寸下,h ...

  8. 最佳移动端h5自适应rem适配方案

    一.利用lib-flexible.postcss-plugin-px2rem插件 进行移动端rem适配. 1.第一 引入lib-flexible . 安装lib-flexible: npm i lib ...

  9. rem适配布局（rem+less+媒体查询 和 rem+flexible.js）

    1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素  的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...

随机推荐

  1. NX二次开发-删除经典工具栏UF_UI_remove_toolbar

    NX9+VS2012 1.打开D:\Program Files\Siemens\NX 9.0\UGII\menus\ug_main.men 找到装配和PMI,在中间加上一段 TOGGLE_BUTTON ...

  2. JavaScript闭包和回调详解

    一.闭包 闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现. 闭包有三个特性: 1.函数嵌套函数; 2.函数内部可以引用外部的参数和变量; 3.参 ...

  3. [C#]记录一次异常排查，关于using语法、sqlserver数据库session、DBHelper类

    最近在做一个基于asp.net和sqlserver的网站项目,发现网站运行一段时间之后,会报异常: 超时时间已到,但是尚未从池中获取连接.出现这种情况可能是因为所有池连接均在使用,并且达到了最大池大小 ...

  4. GoF著作中未提到的设计模式(2):Interceptor

    转:http://www.cnblogs.com/west-link/archive/2011/06/22/2086591.html 拦截器模式为我们提供了一种拦截方法调用或消息的途径,整个过程是自动 ...

  5. 牛客多校第十场 E Hilbert Sort 递归，排序

    题意: 给你一个方阵,再在方阵上给定一些点,按照希尔伯特曲线经过的先后顺序为这些点排序 题解: 定义好比较函数后直接调用排序算法即可. 希尔伯特曲线本来就是用于二维到一维的映射的,因此我们可以考虑对于 ...

  6. Unicode与MultiByte之间的练习: Process Cleaner

    #include <cstdio> #include <cstring> #include <windows.h> #include <tlhelp32.h& ...

  7. Funcation：Object

    ylbtech-Funcation:Object 1.返回顶部 1. public object GetMyRelation() { var list = new List<object> ...

  8. IK的整个分词处理过程

    首先,介绍一下IK的整个分词处理过程: 1. Lucene的分词基类是Analyzer,所以IK提供了Analyzer的一个实现类IKAnalyzer.首先,我们要实例化一个IKAnalyzer,它有 ...

  9. c# 编写windows 服务，并制作安装包

    对服务的认识有很多个阶段. 第一阶段:当时还在用c++,知道在一个进程里while(True){},然后里面做很多很多事情,这就叫做服务了,界面可能当时还用Console控制台程序. 第二阶段:知道了 ...

  10. List、Map、Set 三个接口，存取元素时，各有什么特点

    List与Set都是单列元素的集合,它们有一个功共同的父接口Collection. Set里面不允许有重复的元素, 存元素:add方法有一个boolean的返回值,当集合中没有某个元素,此时add方法 ...