<!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. hadoop2.x需要知道的默认yarn配置

    在Hadoop 2.2.0中,YARN框架有很多默认的参数值,如果你是在机器资源比较不足的情况下,需要修改这些默认值,来满足一些任务需要.NodeManager和ResourceManager都是在y ...

  2. C89,C99: C数组&结构体&联合体快速初始化

    1. 背景 C89标准规定初始化语句的元素以固定顺序出现,该顺序即待初始化数组或结构体元素的定义顺序. C99标准新增指定初始化(Designated Initializer),即可按照任意顺序对数组 ...

  3. Android读取logcat信息

    测试的时候,经常遇到开发需要logcat分析定位bug,今天简单记录一下获取logcat的方法 前提条件:电脑中要安装好Android SDK 1.cmd 进入到这个界面 2.电脑连上手机,手机记得打 ...

  4. 2018ICPC焦作 F. Honeycomb /// BFS

    题目大意: 给定n m表示一共n行每行m个蜂巢 求从S到T的最短路径 input 1 3 4 +---+ +---+ / \ / \ + +---+ +---+ \ \ / \ + + S +---+ ...

  5. python接口自动化（单元测试方法）

    一.环境搭建 python +unittest+ requests实现http请求的接口自动化 Python的优势:语法简洁优美, 功能强大, 标准库跟第三方库灰常强大,建议大家事先了解一下Pytho ...

  6. Windows7 打开word2003提示：向程序发送命令时出现错误 解决方案

    1.关闭所有打开的Word文档:(包括任务管理器里的进程)2.复制这条命令:%appdata%\microsoft\templates3.开始 → 运行 → 粘贴上面复制的命令 → 确定4.在打开的目 ...

  7. github代码推送

    git init // 初始化版本库 git add . // 添加文件到版本库(只是添加到缓存区),.代表添加文件夹下所有文件 git commit -m "first commit&qu ...

  8. JS对象 String 字符串对象定义字符串的方法就是直接赋值。比如： var mystr = "I love JavaScript!"

    String 字符串对象 在之前的学习中已经使用字符串对象了,定义字符串的方法就是直接赋值.比如: var mystr = "I love JavaScript!" 定义mystr ...

  9. SQL 顺序

    查询语句中select from where group by having order by的执行顺序 查询语句中select from where group by having order by ...

  10. VS环境下，DEV插件的ComboBoxEdit控件最简单的数据源绑定和获取方法

    使用 ComboBoxEdit 控件绑定key/value值: 因为 ComboBoxEdit 没有 DataSource 属性,所以不能直接绑定数据源,只能一项一项的添加. 首先创建一个类ListI ...