简单介绍移动端CSS3单位rem的用法
PC端大部份是用px单位,小部分用em单位,而移动端,请全部用rem单位吧。目前大部份设备,包括但不限于iOS 5+、Android 2.3+、Window Phone 8+都是可以兼容的,具体兼容表请看caniuse。
rem是什么意思呢?CSS手册上的说明:相对长度单位,相对于根元素(即html元素)font-size计算值的倍数。
rem用法很简单,就是根标签html设置文字大小后(不设置的话,大部份浏览器默认为16px),其他标签设置rem都是html大小的倍数。
html{
font-size: 10px; /* 设置html为10px */
}
h1{
font-size: 2rem; /* 10px*2=20px */
}
那为什么移动端要使用em作为单位?一是我开始提到的,移动端大部份都支持,不需要考虑兼容问题;二是修改起来灵活。如果你要整个网页字体都变大两倍,直接修改html{font-size:20px}即可。当然还有人提到适合网页缩放,我从未用过这个功能。。。
你肯定会说,百度Google搜出来的文章,大部份是让设置为html{font-size:62.5%}。他的作用也是把html设置成10px,但万一哪个浏览器2b升级成默认文字大小不是16px怎么办?而且可以直接设置成10px,为什么要去用62.5%算成10px?这不是脱裤子放屁吗?所以我都是直接设置10px。
如果只介绍这点东西,网上一搜一大堆,我也就不会写这篇文章了。关键是大规模使用中遇到bug了,而且是蛋疼的原生Chrome。。。iOS平台的Chrome没问题,据说iOS里的所有浏览器都是壳。。。
简单介绍移动端CSS3单位rem的用法的更多相关文章
- 移动端适配单位rem
0 写在前面 本周惊喜地发现,其他各个老师的软工班(罗杰老师班和欧阳老师班)的软工项目的alpha版本都已经发布了!(然而我们软工项目还没开始写代码…逃…) 十分好奇的我第一时间下载了一些他们的产品进 ...
- Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法:
Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法: ------------------------------------------------------------ ...
- 移动端常用单位——rem
移动端常用单位: ①px:像素大小,固定值 ②%:百分比 ③em(不常用,但是在首行缩进时可以使用):相对自身的font大小(当自身的字体大小也是em做单位时,才会以父元素的字体大小为基准单位) ④r ...
- 小tips:使用rem+vw实现简单的移动端适配
首先设置meta属性,如下代码: <meta name="viewport" content="width=device-width, initial-scale= ...
- Android项目开发全程(二)--Afinal用法简单介绍
本篇博文接上篇的<Android项目开发全程(一)--创建工程>,主要介绍一下在本项目中用到的一个很重要的框架-Afinal,由于本系列博文重点是项目开发全程,所以在这里就先介绍一下本项目 ...
- Python中的yield生成器的简单介绍
Python yield 使用浅析(整理自:廖 雪峰, 软件工程师, HP 2012 年 11 月 22 日 ) 初学 Python 的开发者经常会发现很多 Python 函数中用到了 yield 关 ...
- CSS3新的字体尺寸单位rem
CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm. CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem.在W3C官网上 是这样描述rem的——“font size ...
- css3单位em,rem,px,vw,vh等
昨天发现了个好用的方法去设置手机端的rem单位,在这里记录下. html{ font-size:calc(100vw/7.5);} 这是按照750的设计稿(也就是iphone6的设计稿). 100vw ...
- 服务端渲染和nuxt简单介绍
概述 最近研究了一下服务端渲染,有一些心得,记录下来供以后开发时参考,相信对其他人也有用. 参考资料: Vue SSR指南 nuxt.js官网 服务端渲染介绍 服务端渲染简单来说,就是分别对项目用we ...
随机推荐
- mysql分享记录
今天公司进行了一次mysql的分享,做一下记录,也许很多东西很简单,但是对于不知道的人就很难 1.用最小代价存储 举个例子来说,如果能确定某个字段是存数字的,并且数字的大小一定不会超过127或255, ...
- HDU 5873 Football Games
随便判了几个条件就过了,也不知道对不对的. 正解应该是: $[1].$${s_1} + {s_2} + {s_3} + ...... + {s_n} = n(n - 1)$ $[2].$${s_1} ...
- 【NOIP2013提高组】货车运输
货车运输 (truck.cpp/c/pas) [问题描述] A国有n座城市,编号从1到n,城市之间有m条双向道路.每一条道路对车辆都有重量限制,简称限重.现在有q辆货车在运输货物,司机们想知道每辆 ...
- 第1章 PHP快速入门
1.最好使用<?php ?> 即XML风格的PHP标记: 2.echo语句:将传递给其自身的字符串打印到浏览器: 3.注释:①C风格的多行注释/* */ ②C++风格的单行注释// ...
- CentOS python升级到3.5时yum报错
File except KeyboardInterrupt, e: ^ SyntaxError: invalid syntax 解决步骤: #vi /usr/bin/yum 将#!/usr/bin/p ...
- java学习记录
1,接口(不实现任何方法)——>抽象类(实现部分公共方法)——>简单实现类——>具体实现类 2,抽象类不能被直接实例化,只能实现抽象方法,以匿名内部类的方式表现. 3,如果stati ...
- label 不同颜色
label 不同颜色 UILabel* noteLabel = [[UILabel alloc] init]; noteLabel.frame = CGRectMake(60, 100, 200, ...
- 推荐几个好的 Maven 常用仓库网址
注意,以下内容转载自:推荐几个好的 Maven 常用仓库网址 Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个 ...
- 安装linux工作环境
1,介绍Vagrant 我们做web开发的时候经常要安装各种本地测试环境,比如apache,php,mysql,redis等等.出于个人使用习惯,可能我们还是比较习惯用windows.虽然说在wind ...
- Android: Failure [INSTALL_FAILED_DEXOPT] and Failure [INSTALL_FAILED_UID_CHANGED] 解决方案
1. 错误: Failure [INSTALL_FAILED_DEXOPT] Android安装App时 D:\WorkSpace\Administrator\workspace\svn\soot ...