1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  6.      <title>Title</title>
  7.      <style type="text/css">
  8.          *{
  9.              margin: 0;
  10.              padding: 0;
  11.          }
  12.  
  13.          #box{
  14.              width:0.5rem;
  15.              height:0.5rem;
  16.              background: red;
  17.          }
  18.      </style>
  19.  </head>
  20.  <body>
  21.  <div id="box"></div>
  22.  </body>
  23.  
  24.  <script type="text/javascript">
  25.       window.onload =function(){
  26.           var width =document.documentElement.clientWidth;
  27.           console.log("width:",width)
  28.           var htmlNode =document.querySelector('html');
  29.           console.log("htmlNode:",htmlNode)
  30.           htmlNode.style.fontSize=width + 'px'
  31.           console.log("htmlNode2:",htmlNode.style.fontiSize)
  32.       }
  33.  </script>
  34.  </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. Docker学习の更改Docker的目录

    一.更改虚拟磁盘的目录 虚拟机的默认存储位置是C:\Users\Administrator\.docker\machine\machines ,后期docke镜像文件会不断增加,为了给系统盘减负,最好 ...

  2. iOS开发系列-定时器强引用问题

    概述 iOS开发中常用的定时器NSTimer.CADisplayLink. NSTimer 和 CADisplayLink 基本使用 NSTimer的创建方法有两个scheduledTimerWith ...

  3. 《软件调试修炼之道》Part 1（CH1~5）读书笔记 PB16110698 第八周（~4.26）

    编程中,调试几乎是必不可少的,一劳永逸.一次完成预想功能而完全不出bug的情况凤毛麟角,出现bug→调试→再出现bug→再调试……基本是软件工程中的常态.可以说,软件调试是每个coder的必修课,而& ...

  4. Nginx安装及分流多个web服务

    Ngnix安装及常用配置 一.安装Nginx 1.检查依赖 yum install gcc-c++ yum install -y pcre pcre-devel yum install -y zlib ...

  5. python 的打开、读、写、追加操作

    读f = open('D:\最新全栈python第2期视频教程 全套完整版\day08-python 全栈开发-基础篇\新建文本文档.txt','r') # data = f.read(10000)# ...

  6. 【bug】使用element-ui遇到在IE浏览器中点击enter会回到登录页

    1.点击el-input框,会回到登录页(IE浏览器) 外层是el-table/el-form/el-input 添加可以解决 <el-form onSubmit="return fa ...

  7. Redis问题整理

    Redis问题总结 1.单点登录的两个项目cookie不一致 由于在配置自定义Cookie的时候 @Bean("shiroCookie") public SimpleCookie ...

  8. [转]Nginx配置详解

    Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也可作为 ...

  9. [JZOJ3400] 【GDOI2014模拟】旅行

    题目 题目大意 给你一个图,让你选择权值和最小的边,使得\(1\)和\(n\),\(2\)和\(n-1\),--,\(K\)和\(n-K+1\)联通. \(K\leq 4\) 思考历程 一看到这题就觉 ...

  10. thinkphp 链接数据库

    ThinkPHP内置了抽象数据库访问层,把不同的数据库操作封装起来,我们只需要使用公共的Db类进行操作,而无需针对不同的数据库写不同的代码和底层实现,Db类会自动调用相应的数据库驱动来处理.目前的数据 ...