rem介绍
手机端开发,一般以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介绍的更多相关文章
- 移动端页面使用rem来做适配
文/九彩拼盘(简书作者)原文链接:http://www.jianshu.com/p/eb05c775d3c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. rem介绍 rem(font ...
- css之rem布局
rem介绍和原理网上都是,这里不具体介绍 以iphone6设计稿 let htmlWidth = document.documentElement.clientWidth || document.bo ...
- CSS3移动端vw+rem不依赖JS实现响应式布局
1.前言 (1)vw/vh介绍 在使用之前,我们先简单了解一下什么是vw和rem以及它们的作用,vw是css3出现的一个新单位,它是"view width"缩写,定义为把当前屏幕分 ...
- 移动 web 端屏幕适配 - rem
前言 最近整理了一下以前学习前端的笔记,发现自己对移动 web 端屏幕适配(rem)这一块并没有真正理解,只是会用.接下来,把自己的一些对移动 web 端屏幕适配(rem)的思考记录下来. rem 介 ...
- CSS3中的rem单位
一.rem介绍 rem是什么? 它的全称是 font size of the root element (根元素的字体大小) 它是CSS3中新增加的一个尺寸(度量)单位,根节点(html)的font- ...
- px、em、rem区别介绍
px.em.rem区别介绍 PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能 ...
- 简单介绍移动端CSS3单位rem的用法
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧.目前大部份设备,包括但不限于iOS 5+.Android 2.3+.Window Phone 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 %,大概可以分为几种"绝对单位"和"相对单位"和" ...
- CSS3- px、em、rem区别介绍
PX px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em ...
随机推荐
- final的使用
final对基本类型,限定常量. final对对象的引用,不可引用其他对象. final的字段,必须在定义时或者构造器内完成初始化.构造内才完成初始化的Blank Final(空白final). cl ...
- Google Protocol Buffer 的使用
简介 Google Protocol Buffer( 简称 Protobuf) 是 Google 公司内部的混合语言数据标准,目前已经正在使用的有超过 48,162 种报文格式定义和超过 12,183 ...
- Nuget版本冲突的问题
有两个类库项目,一个引用了比如Newtonsoft.Json 6.0, 另一个引用了比如Newtonsoft.Json 8.0, 然后另一个exe项目同时引用了这两个类库项目. 那么在编译的时候会报w ...
- Vim特定行行尾追加
python print 替换 logging 1.print语句最后追加")". :%s/\(.*\)print \(.*\)/\1print \2)/g 2." ...
- Android使用ViewPager做轮播
ViewPager.html div.oembedall-githubrepos { border: 1px solid #DDD; list-style-type: none; margin: 0 ...
- java -cp
java -cp /home/hdp/log4jTest/log4j-1.2.17.jar:/home/hdp/log4jTest/testLog.jar:/home/hdp/log4jTest/co ...
- 嵌套移动APP端的H5页面meta标签
<meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, ...
- asp.net GDI+绘制五边形
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- SQL Server 导入数据失败:无法在只读列“Id”中插入数据
解决方案: 在数据库导入"选择源表和源视图"->点击对应表后的“编辑映射”按钮->勾选“启用标识列插入”->导入即可.
- api服务端接口安全
api服务端接口安全性解析 http://blog.csdn.net/tenfyguo/article/details/8225279 常用的基于token的实现方案 http://blog.csdn ...