<!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. iOS ARC使用总结

    在iOS ARC模式下,编译器会自动插入release 有些时候程序出现 message sent to deallocated object的时候,你不知道什么原因. 一种原因是因为你在ARC下使用 ...

  2. 创建 Angular 8.0 项目

    创建 Angular 8.0 项目,首先确保已经安装了 nodejs,如果没有安装,请看这篇文章安装:node.js 安装 1.新建一个空文件夹 angularproject,作为工作区 2.安装 A ...

  3. 3. Vim入门教程

    1. 基本概念 1.1 了解Vim的三个基本模式 当我们安装完一个编辑器后,肯定会打开它,然后在里面输入点什么东西,但是打你打开Vim后,想要输入点什么却发现自己什么都没有输入,所以在写点东西之前,先 ...

  4. JavaScript网页特效5则

    动态字幕 代码:在需要处加入 < marquee onmouseover=this.stop() onmouseout=this.start()>欢迎访问JavaScript教程网 特点: ...

  5. docker 错误failed to open stream: Permission denied 解决方法

    在服务器上面.运行docker时,php目录会发生权限问题解决方法如下: 1:进入php目录下面 docker exec -ti php56 /bin/bash #进入php容器 chown -R w ...

  6. python 16 文件操作（二）

    转自 http://www.cnblogs.com/BeginMan/p/3169020.html 一.文件系统 从系统角度来看,文件系统是对文件存储器空间进行组织和分配,负责文件存储并对存入的文件进 ...

  7. Neo4j中实现自定义中文全文索引

    数据库检索效率时,一般首要优化途径是从索引入手,然后根据需求再考虑更复杂的负载均衡.读写分离和分布式水平/垂直分库/表等手段:索引通过信息冗余来提高检索效率,其以空间换时间并会降低数据写入的效率:因此 ...

  8. java——有1、2、3、4个数字，能组成多少个互不相同且无重复数字的三位数？都是多少？

    package java_day10; /* * 有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? */ public class Demo04 { public stat ...

  9. 【笔记篇】斜率优化dp（二） SDOI2016征途

    =======传=送=门======= 搜题目名会搜出很多奇怪的东西... 这个题目似乎有点毒? 比如在bzoj和loj上可以1A的代码上会在luogu TLE 2个点, 在cogs TLE 10个点 ...

  10. 阿里云 Aliplayer高级功能介绍(三)：多字幕

    基本介绍 国际化场景下面,播放器支持多字幕,可以有效解决视频的传播障碍难题,该功能适用于视频内容在全球范围内推广,阿里云的媒体处理服务提供接口可以生成多字幕,现在先看一下具体的效果: WebVTT格式 ...