css3 em rem等单位的区别
px:绝对单位,页面按精确像素展示
em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。
(另外需注意chrome强制最小字体为12号,即使设置成 10px 最终都会显示成 12px,当把html的font-size设置成10px,子节点rem的计算还是以12px为基准,所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。
rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)
页面基准320px(20px),html font-size值的计算:
- var ele=document.getElementsByTagName("html")[0],
- size=document.body.clientWidth/320*20;
- ele.style.fontSize=size+"px"
注:需设置meta缩放比1:1
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,iOS safari 8+支持,Android browser4.4+支持,chrome for android39支持
其它的单位还有:
%:百分比
in:寸
cm:厘米
mm:毫米
pt:point,大约1/72寸
pc:pica,大约6pt,1/6寸
ex:取当前作用效果的字体的x的高度,在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)
ch:以节点所使用字体中的“0”字符为基准,找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)
css3 em rem等单位的区别的更多相关文章
- px,em,rem字体单位
1.px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) 2.em是相对长度单位.相对于当前对象内文本的字体尺寸,em存在值继承问题. 浏览器的默认字 ...
- CSS3 em && rem 详细教程
1 # mobile css & rem & em & px > 1 rem === 16px 任意浏览器的默认字体高都是 16px, 所有未经调整的浏览器都符合: 1e ...
- px,em,rem,vw单位在网页和移动端的应用
px: 是网页设计中最常用的单位,然而1px到底是多大长,恐怕没有人能回答上来 它用来表示屏幕设备物理上能显示的最小的一个点,这个点不是固定宽度的,不同设备上点的长度.比例有可能会不同. 假设:你现在 ...
- px em rem %作为单位使用
博客地址 :https://www.cnblogs.com/sandraryan/ px 我们都很熟悉啦,但是固定大小无法适配各种屏幕. rem是CSS3新增的一个相对单位(root em,根em), ...
- px em rem 字体单位问题
px:相对长度单位,相对于屏幕分辨率 em:相对长度单位,相对于body而言 rem:相对长度单位,相对于html根元素 注意:浏览器默认大小:16px;
- em,rem
em rem 相对单位: 也可用于设置padding line-height等em相对当前容器的默认字体设置比如,所有浏览器默认字体都是16px,body{ font-size:62.5%}以后即1 ...
- css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
原文地址: http://blog.csdn.net/jyy_12/article/details/42557241 px:绝对单位,页面按精确像素展示 em:相对单位,基准点为父节点字体的大小,如果 ...
- 彻底弄懂css中单位px和em,rem的区别
国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调 ...
- 搞清css的单位 px,em,rem的区别
前言:现在上大街一眼望去,基本上90%的人都拿着手机,走路,逛街,吃东西都不停着,所以对于我们这种前端开发的程序猿来说,让网页适应于移动端可以说是必须要满足的.所以最近也是一直在学习和实践.然后就接触 ...
随机推荐
- iOS中修改头部tabBarButton 默认按钮的颜色和默认字体颜色
+(void)initialize { //初始化设置主题 UINavigationBar *navBar = [UINavigationBar appearance]; [navBar setBac ...
- opensuse sublime 配置
fcitx输入法支持: 准备文件sublime-imfix.c: /* sublime-imfix.c Use LD_PRELOAD to interpose some function to fix ...
- 上传文件swfUploadConfig.js
/*/* * Unobstrusive swf upload widget using jQuery. *example : $(':file.uo_widget_form_input_file_sw ...
- 2016-08-01一起领略ReactJs的风采
现在最热门的前端框架有AngularJS.React.Bootstrap等.自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领 ...
- KBEngine 学习笔记
最近开始学习 KBE 扩展技能点>_<!所以建一个随笔记录一下遇到的小问题: 问题1 :DBMgr找不到LibMysql32.dll 解决:VS 中KBE源码 默认的是Win32 ,Win ...
- wordpress模板学习之导航目录
wordpress的导航目录分为三个部分,一开启,二配置:三使用 开启在functions.php,这个注册会保存在全局变量中,接下来在菜单配置中会看到 register_nav_menu( 'pri ...
- Windows 10和Visual Studio 2015 能给.Net方向的开发从业者带来什么?
.Net 多年前我们选择了你,现在在当前的移动互联网热火朝天的时代,你能给我们什么样的惊喜?面对IOS和android的势头,windows的移动端能否实现三国鼎立? windows 10 号称统一各 ...
- 【转】jenkins持续集成配置
搭建jenkins持续集成服务器 1.jenkins简介 Jenkins,前身为Hudson,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,包括: 持续的软件版本发布/测试项目. 监控 ...
- secureCRT的一些小知识
secureCRT 是一个非常不错的终端软件,在嵌入式开发过程中经常使用到,所以了解一下其快捷键操作是非常有必要的,可以提高开发效率. 0.在secureCRT里切换不同的窗口:ctrl+tab. ...
- 随机生成UUID(GUID)的方法
- (NSString *)UUID { CFUUIDRef uuid_ref = CFUUIDCreate(NULL); CFStringRef uuid_string_ref= CFUUIDCre ...