浅谈移动端rem的用法
一 什么是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的用法的更多相关文章
- 浅谈移动端适配-rem
对于移动端开发来说,无可避免的就是直面各种设备不同分辨率和不同DPR(设备像素比)的问题,在此忽略其他兼容性问题的探讨. 一. 移动端开发有关于像素的概念: 1.设备像素(dp),也叫物理像素.指设备 ...
- 浅谈css3长度单位rem,以及移动端布局技巧
rem是什么? rem是css3中新增加的一个单位属性(font size of the root element),根据页面的根节点的字体大小进行转变的单位.root!!!!!!!!!根节点,也就是 ...
- 移动端rem单位用法[转]
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- 移动端rem的用法
标签: 1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单 ...
- 移动端rem单位用法
1.rem(font size of the root element)是指相对于根元素的字体大小的单位,em(font size of the element)是指相对于父元素的字体大小的单位.它们 ...
- 浅谈移动端之touch事件--手指的滑动事件
今天台风‘海马’袭击深圳,全市停工.现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touch ...
- VC++ 浅谈VS2010中CMFCToolBar的用法
本文将给大家介绍Visual Studio 2010中CMFCToolBar的用法,CMFCToolBar可以让用户自定义工具栏图标,使用静态成员函数SetUserImages()将一个CMFCToo ...
- 开园子啦(浅谈移动端以及h5的发展)
一.前言 一直以来都梦想着写几篇博客,忙于工作一直也没有抽出时间来写一下.看看大熊君.小v君等都在努力写博客,我这个不太善于言表的少年,也是在忍不住了.否则会被人家拉下更远.先简单介绍一下自己,目前我 ...
- 浅谈dynamic的简单使用用法
今天看了博客园里面的dynamic用法,我犹豫从来没接触过,今天恶补了一下,把我对dynamic的认识分享了出来,大家一起学习. Visual C# 2010 引入了一个新类型 dynamic. 该类 ...
随机推荐
- 【转】Objective-C Runtime
之前在找Runtime资料,这篇条理是相对比较清晰,对我最有启发的一篇,转载以作记录. 对于iOS小白,值得多看几遍,会有不少收获. --------------------------------- ...
- ASP.NET Core MVC之ViewComponents(视图组件)
前言 大概一个来星期未更新博客了,久违了各位,关于SQL Server性能优化会和ASP.NET Core MVC穿插来讲,如果你希望我分享哪些内容可以在评论下方提出来,我会筛选并看看技术文档来对你的 ...
- 1.WP8.1开发_去除闪动效果,直接进入首页
有时候希望打开软件的时候,不出现闪屏,而直接进入到第一个页面. 把第一个页面作为闪屏,可以制作一些进度条 和动画等... 很简单,有两种方法去除闪屏. 1.删除项目下 Assets 文件夹里面的Sp ...
- Spring-java代理技术总结
Spring 中采用JDk的动态代理和CGLib代理技术在运行期间织入增强,所以用户不需要装备特殊的编译器或者类装载器就可以使用AOP功能. 要使用jdk的动态代理,目标类必须实现接口,而CGLib代 ...
- angular element()
使用angular.element()获取一个dom的方法. 1.可以使用jquery的选择器 2.可以使用javascript的原生的的查找元素的方法 下面是angular.element()提供的 ...
- 【好记性不如烂笔头】死锁之java代码
死锁: 是指两个或两个以上的进程在执行过程中,由于竞争资源或者由于彼此通信而造成的一种阻塞的现象,若无外力作用,它们都将无法推进下去.此时称系统处于死锁状态或系统产生了死锁,这些永远在互相等待的进程称 ...
- querySlector
在传统的 JavaScript 开发中,查找 DOM 往往是开发人员遇到的第一个头疼的问题,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 tag, name, id ...
- iOS开发之数据存储之Preference(偏好设置)
1.概述 很多iOS应用都支持偏好设置,比如保存用户名.密码.字体大小等设置,iOS提供了一套标准的解决方案来为应用加入偏好设置功能. 每个应用都有个NSUserDefaults实例,通过它来存取偏好 ...
- 疑问:Spring中构造器、init-method、@PostConstruct、afterPropertiesSet孰先孰后,自动注入发生时间
问题:今天想写一个通用点的方法,根据传入的参数的类型(clazz对象),判断使用哪个mapper来插入mysql数据库. 下面是我的写法: public interface BizNeeqCommon ...
- 解决虚拟机vmware安装64位系统“此主机支持 Intel VT-x,但 Intel VT-x 处于禁用状态”的问题
虚拟机使用的是VMware Workstation,并且首次在虚拟机体验64 位系统.在新建好虚拟机,运行时候就出现了VMware Workstation 的提醒:此主机支持 Intel VT-x,但 ...