<!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. 牛客多校第九场 B Quadratic equation 模平方根

    题意: 已知 $x+y$ $mod$ $q = b$ $x*y$ $mod$ $q = c$ 已知b和c,求x和y 题解: 容易想到$b^2-4c=x^2-2xy+y^2=(x-y)^2$ 那么开个根 ...

  2. 秒懂神经网络---BP神经网络具体应用不能说的秘密.

    秒懂神经网络---BP神经网络具体应用不能说的秘密 一.总结 一句话总结: 还是要上课和自己找书找博客学习相结合,这样学习效果才好,不能单视频,也不能单书 BP神经网络就是反向传播神经网络 1.BP神 ...

  3. CPUID 指令的使用

    使用 CPUID 指令可以从 processor 厂商里获得关于 processor 的详细信息,CPUID 指令是从 Intel 486 处理器以后开始加入支持. 1. 检测处理器是否支持 cpui ...

  4. 新建的maven项目里没有src

    百度上搜到一个网友的一句话:没筷子你就不吃饭了是吧 若有所思 自己新建一个src文件 然后, 由于已经转换,因此上图没有sources选项 然后就可以在文件中随意编写文件 如果想添加package,直 ...

  5. C#Object与XML文件或二进制文件之间的转化

    Object To Xml 文件 public static bool Serializer<T>(object obj, string path) { FileStream xmlfil ...

  6. Day 9 :初识函数

    Python函数:1.函数是组织好的,可重复使用的,用来实现单一,或相关联功能的代码段. 2.函数能提高应用的模块性,和代码的重复利用率. Python提供了许多内建函数,比如print().但你也可 ...

  7. sklearn中回归器性能评估方法

    explained_variance_score() mean_absolute_error() mean_squared_error() r2_score() 以上四个函数的相同点: 这些函数都有一 ...

  8. 5个CSS3技术实现设计增强

    层叠样式表(css)是Web设计的一种语言,CSS的下一代版本CSS3已经蓄势待发.你是否可望开始使用它们却又不知从何下手呢?虽然还有一些新属性没有得到官方的确认,但是一些浏览器已经开始支持来自CSS ...

  9. iOS开发系列-异常处理

    概述 在开发中经常调用苹果的API遇到数组越界.实例方法不存在运行时等致命错误,此时程序直接奔溃.其实苹果是在函数内部抛出了一个异常.这样告诉开发者需要检查代码做修改.同样在我们自己封装一些框架或者功 ...

  10. C 删除字符串中某个指定的字符

    #include <stdio.h> char *del_char(char *str, char ch) { unsigned char i=0,j=0; while(str[i] != ...