html{

     font-size:12px;

 }

 .btn {

     width: 6rem;

     height: 3rem;

     line-height: 3rem;

     font-size: 2rem;

     display: inline-block;

     background: #06c;

     color: #fff;

     border-radius: .5rem;

     text-decoration: none;

     text-align: center;

 }

 .p{font-size: 2rem;}

 </style>

 <script>

 alert("ddd");

 document.getElementsByTagName('html')[].style.fontSize = "20px";

 alert(document.getElementsByTagName('html')[].style.fontSize);

 //1.6rem*window.innerWidth / 320 + 'px';

 </script>

 </header>

 <body>

 <div>

 qwertyuiop

 <p class="p">yyyyyy</p>

 <button class="btn"> click </button>

 </div>

 </body>

 </html>

rem 使用的更多相关文章

  1. 在rem布局下使用背景图片以及sprite

    现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,以及我的好友@墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景 ...

  2. 移动端自适应之——rem与font-size

    需求:在不同的移动终端设备中实现,UI设计稿的等比例适配. 方案:布局排版都用rem做单位,然后不同宽度的屏,js动态计算根节点的font-size. 假设设计稿是宽750px来做的,书写css方便计 ...

  3. px-rem px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...

  4. px-rem 一个将px转换为rem的工具

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  5. 基于rem的移动端自适应解决方案

    代码有更新,最好直接查看github: https://github.com/finance-sh/adaptive adaptivejs原理: 利用rem布局,根据公式 html元素字体大小 = d ...

  6. px和em，rem的区别

    1.px是你屏幕设备物理上能显示出的最小的一个点,这个点不是固定宽度的,不同设备上点的长宽.比例有可能会不同.假设:你现在用的显示器上1px宽=1毫米,但我用的显示器1px宽=两毫米,那么你定义一个d ...

  7. Sublime 插件- px 转rem

    一个CSS的px值转rem值的Sublime Text 3自动完成插件. 插件效果如下: 安装 克隆项目   https://github.com/hyb628/cssrem.git 进入packag ...

  8. 响应式布局-Rem的用法

    前言: 文章较为系统地介绍了rem这个新的文字大小单位,绝对干货,绝对好文.转载时略有改动.   先来看看一些基本理念,比如: 响应式网页不仅仅是响应不同类型的设备,而且需要响应不同的用户需求.响应式 ...

  9. 手机端页面自适应之rem布局

    W3C官网上是这样描述rem的--"font size of the root element" . rem布局在移动端发挥的比较好. 阿里团队高清方案: <script&g ...

  10. WebApp开发之--"rem"单位

    随着web app的兴起,rem这是个低调的css单位,近一两年开始崭露头角,有许多朋友对于它的评价不一,有的在尝试使用,有的在使用过程中遇到坑就弃用了.但是我认为rem是用来做web app它绝对是 ...

随机推荐

  1. Python学习小计

    1.初学Python最好选择2.7版本,因为大部分Python书籍的示例代码是基于这个版本的 2.Python安装可以参考百度经验完成 如果在电脑上同时安装2个版本,则CMD启动时只需要: py -2 ...

  2. centos 部署 .net core runtime 环境

    除非在linux下开发才安装SDK,一般生产环境只需安装 runtime 1.添加 yum 源 sudo rpm --import https://packages.microsoft.com/key ...

  3. 微软认证Hyper-V咨询工程师认证课程

    课程链接:http://www.microsoftvirtualacademy.com/colleges/hyper-V-Certificate STEP 1:完成课程链接内的认证课程. STEP 2 ...

  4. json字符串与json对象的相互转换

    什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * JSO ...

  5. （转载）Android项目实战（十七）：QQ空间实现（二）—— 分享功能 / 弹出PopupWindow

    Android项目实战(十七):QQ空间实现(二)—— 分享功能 / 弹出PopupWindow   这是一张QQ空间说说详情的截图. 分析: 1.点击右上角三个点的图标,在界面底部弹出一个区域,这个 ...

  6. Springboot use tomcat JNDI

    Springboot use tomcat JNDI [use database pool :  dbcp Druid bonecp C3P0 proxool] [1]apache-tomcat-9. ...

  7. 多个账号GitHub账号配置

    1.vi config 重复以上步骤就行 然后#注释下  是个人账号还是公司用的账号 mv id_rsa   id_rsa_qq   做下区别,防止冲突 ,别忘了,路径也要改下 mv   id_rsa ...

  8. php读写excel —— PhpSpreadsheet组件

    前言 PhpSpreadsheet是一个纯PHP类库,它提供了一组类,允许您从不同的电子表格文件格式(如Excel和LibreOffice Calc)读取和写入.用PHP读取Excel.CSV文件 还 ...

  9. MVC、RPC、SOA、微服务架构之间的区别

    MVC.RPC.SOA.微服务架构之间的区别 一.MVC架构 其实MVC架构就是一个单体架构. 代表技术:Struts2.springMVC.Spring.Mybatis 等等. 二.RPC架构 RP ...

  10. MyBatis学习总结（18）——MyBatis与Hibernate区别

    也用了这么久的Hibernate和MyBatis了,一直打算做一个总结,就他们之间的优缺点说说我自己的理解: 首先,Hibernate是一个ORM的持久层框架,它使用对象和我们的数据库建立关系,在Hi ...