手机端开发,一般以320px宽为最低标题。市场上的手机,大多数是360px宽。

20px=1rem是最容易换算的,基本上可以口算,除以2并缩小十倍。1px/20=0.05rem。两位小数就可以除尽了。

结合媒体查询就是:

@media only screen and (min-width: 320px){
html {
font-size : 20px !important;
}
}

当然了,你也可以选择js动态计算:

    var width = window.screen.width;
document.getElementsByTagName("html")[0].style.fontSize = (width*0.0625) + "px";

rem介绍的更多相关文章

  1. 移动端页面使用rem来做适配

    文/九彩拼盘(简书作者)原文链接:http://www.jianshu.com/p/eb05c775d3c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. rem介绍 rem(font ...

  2. css之rem布局

    rem介绍和原理网上都是,这里不具体介绍 以iphone6设计稿 let htmlWidth = document.documentElement.clientWidth || document.bo ...

  3. CSS3移动端vw+rem不依赖JS实现响应式布局

    1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...

  4. 移动 web 端屏幕适配 - rem

    前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...

  5. CSS3中的rem单位

    一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...

  6. px、em、rem区别介绍

    px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...

  7. 简单介绍移动端CSS3单位rem的用法

    PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 8+都是可以兼容的,具体兼容表 ...

  8. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  9. CSS3- px、em、rem区别介绍

    PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...

随机推荐

  1. 美国安全公司HBGary——国家授命的黑客

         入侵电脑,窃听用户,假身份上网——美国安全公司HBGary是电脑防护和间谍软件的供应商.而其客户中就有美国的国家安全机构.现在,该公司被偷的电子邮件可以让我们对其数字化战争中的业务做一个初步 ...

  2. windows下的php rabbit mq安装、配置

    http://www.cnblogs.com/shanyou/p/4067250.html 这篇博文写的rabbit mq和erlang的安装以及rabbitmq可视化插件的一些操作 接下去开始安装P ...

  3. js中function参数默认值

    --在dreamweaver做网站时,函数定义是在一个*.js文件中,其中定义了一个func,有四个参数,function func(string1,url,flag,icon),然后在另一个asp中 ...

  4. netty发送utf-8编码的信息

    /** * */ @Override public void channelActive(ChannelHandlerContext ctx) throws Exception { // (1) // ...

  5. Office 365系列六 ------ 创建sharepoint online网站

    这节跟大家介绍简单的创建sharep online私有网站集,sharepoint online 可以给我们提供开箱即用的功能,比如文档库:可以给我们取代File Server,提供了版本管理,版本变 ...

  6. iOS 开发 常用的正则验证表达式:电话 、邮箱等等

    #pragma mark - 验证手机号 +(BOOL)checkForMobilePhoneNo:(NSString *)mobilePhone{ NSString *regEx = @" ...

  7. json文本装换为JSONArray

    package com.beijxing.TestMain; import java.io.File; import java.io.IOException; import org.apache.co ...

  8. Java堆、栈和常量池以及相关String的详细讲解(经典中的经典) (转)

    原文链接 : http://www.cnblogs.com/xiohao/p/4296088.html 一:在JAVA中,有六个不同的地方可以存储数据: 1. 寄存器(register). 这是最快的 ...

  9. 【css3】浏览器内核及其兼容性

    浏览器内核分类如下: 1.Webkit内核: 使用此引擎内核的浏览器有:Safari(包括移动版和桌面版).Chrome.其私有属性的前缀是-webkit-. 2.Gecko内核: 使用此引擎内核的浏 ...

  10. extern关键字

    1.extern "C" void func(){...} extern可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其 ...