一 什么是rem?

“font size of the root element 这是w3c的定义

也就是说是相对于根节点(html节点)的字体大小的单位。

目前主流的浏览器基本都支持rem这个单位,大部份的默认字体单位是16px。

图片摘自 http://caniuse.mojijs.com/Home/Html/item/key/rem/index.html

 二 简单应用。

既然确定在各个主流浏览器都能食用的话,我们就放心大胆在移动端进行开发了。

举个例子说明

html{
font-size:62.5%; /* 10÷16=62.5% */
}
p{
font-size:14px;
font-size:1.4rem;
}

由于我们选定的浏览器默认字体为16px,将根节点html设置为 font-size:62.5%;,这样换算下来的话 1rem = 10px ,在单位的计算方便将会方便很多。

三 响应式使用。

在实际开发过程中,不论是移动端还是pc端都要兼容各种分辨率的设备,所以实际尺寸是要响应式的。

假如说上个例子的62.5%是基于iPhone5的尺寸,也就是说是320*568的尺寸

如果是ipad尺寸的时候,只要相应的扩大倍数即可

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

注:利用媒体查询,可根据自己的实际需要,设定不同的尺寸。

四 rem的进阶使用

先甩上地址 https://github.com/amfe/lib-flexible

说起移动端适配,怎么能少了淘宝的移动端~

这个教程足够详细了(如果绝对还不够的话,可以参考下这个地址  https://github.com/amfe/article/issues/17 ,其中还有现成的demo)。

在引入flexible.js过后,关于px转成rem的方法:

在sublime中是有直接转换的插件,有兴趣的童鞋可以去研究下。

在sass/less预编译下也可快速计算当前尺寸。

浅谈移动端rem的用法的更多相关文章

  1. 浅谈移动端适配-rem

    对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...

  2. 浅谈css3长度单位rem,以及移动端布局技巧

    rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...

  3. 移动端rem单位用法[转]

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  4. 移动端rem的用法

    标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...

  5. 移动端rem单位用法

    1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...

  6. 浅谈移动端之touch事件--手指的滑动事件

    今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...

  7. VC++ 浅谈VS2010中CMFCToolBar的用法

    本文将给大家介绍Visual Studio 2010中CMFCToolBar的用法,CMFCToolBar可以让用户自定义工具栏图标,使用静态成员函数SetUserImages()将一个CMFCToo ...

  8. 开园子啦(浅谈移动端以及h5的发展)

    一.前言 一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我 ...

  9. 浅谈dynamic的简单使用用法

    今天看了博客园里面的dynamic用法,我犹豫从来没接触过,今天恶补了一下,把我对dynamic的认识分享了出来,大家一起学习. Visual C# 2010 引入了一个新类型 dynamic. 该类 ...

随机推荐

  1. 【转】Objective-C Runtime

    之前在找Runtime资料,这篇条理是相对比较清晰,对我最有启发的一篇,转载以作记录. 对于iOS小白,值得多看几遍,会有不少收获. --------------------------------- ...

  2. ASP.NET Core MVC之ViewComponents(视图组件)

    前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...

  3. 1.WP8.1开发_去除闪动效果,直接进入首页

    有时候希望打开软件的时候,不出现闪屏,而直接进入到第一个页面. 把第一个页面作为闪屏,可以制作一些进度条  和动画等... 很简单,有两种方法去除闪屏. 1.删除项目下 Assets 文件夹里面的Sp ...

  4. Spring-java代理技术总结

    Spring 中采用JDk的动态代理和CGLib代理技术在运行期间织入增强,所以用户不需要装备特殊的编译器或者类装载器就可以使用AOP功能. 要使用jdk的动态代理,目标类必须实现接口,而CGLib代 ...

  5. angular element()

    使用angular.element()获取一个dom的方法. 1.可以使用jquery的选择器 2.可以使用javascript的原生的的查找元素的方法 下面是angular.element()提供的 ...

  6. 【好记性不如烂笔头】死锁之java代码

    死锁: 是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进程称 ...

  7. querySlector

    在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...

  8. iOS开发之数据存储之Preference(偏好设置)

    1.概述 很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能. 每个应用都有个NSUserDefaults实例,通过它来存取偏好 ...

  9. 疑问:Spring中构造器、init-method、@PostConstruct、afterPropertiesSet孰先孰后,自动注入发生时间

    问题:今天想写一个通用点的方法,根据传入的参数的类型(clazz对象),判断使用哪个mapper来插入mysql数据库. 下面是我的写法: public interface BizNeeqCommon ...

  10. 解决虚拟机vmware安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题

    虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...