html中em和px
px像素(Pixel)。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸。
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算,需要在css中的body选择器中声明 Font-size=62.5%,这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
所以我们在写CSS的时候,需要注意两点:
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
但是12px汉字例外,就是由以上方法得到的12px(1.2em)大小的汉字在IE中并不等于直接用12px定义的字体大小,而是稍大一点。这个问 题 Jorux已经解决,只需在body选择器中把62.5%换成63%就能正常显示了。
html中em和px的更多相关文章
- CSS中em,px区别(转)
这里向大家描述一下CSS中px和em的特点和区别,px像素(Pixel),相对长度单位,像素px是相对于显示器屏幕分辨率而言的,而em是相对长度单位,相对于当前对象内文本的字体尺寸,相信本文介绍一定会 ...
- css中em与px
Px是绝对定位 em是相对定位 1. em的值并不是固定的: 2. em会继承父级元素的字体大小. em应用: 1. body选择器中声明Font-size=62.5%:(注:在ie中把body选 ...
- 谈谈CSS中em与px的差异
在国内网站中,包括三大门户,以及“引领”中国网站设计潮流的蓝色理想,ChinaUI等都是使用了px作为字体单位.只有百度好歹做了个可调的表率.而 在大洋彼岸,几乎所有的主流站点都使用em作为字体单位, ...
- em与px的区别 [ 转 ]
其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- CSS中的单位px、em、rem、%、vw、vh、vm
px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和 ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- rem,em,与px的比较用法
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
随机推荐
- 【转】无废话WCF系列教程
转自:http://www.cnblogs.com/iamlilinfeng/category/415833.html 看后感:这系列的作者李林峰写得真的不错,通过它的例子,让我对WCF有了一 ...
- SGU 156. Strange Graph(欧拉路)
时间限制:0.25s 空间限制:6M 题目描述 让我们想象一个无向图G=<V,E>.如果边(u,v)在边集E中,那么我们就说两个顶点u和v是邻接点.在这种情况下,我们也说u是v的一个邻接点 ...
- java中jdk环境配置
配置java环境,俗称jdk环境 首先进入配置环境的目录下:右键鼠标我的电脑->属性->高级系统设置->环境变量,在对应的"系统变量"框下配置一下变量: 规范的配 ...
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- PHP第一课笔记
打算以后学习PHP,花3个月时间学会它,自己为自己加油.每天坚持学习,第一天感觉良好,没开始写,所以不敢觉难,在难也学,加油,me!! PHP笔记记录(2014.7.27) ★web开发的介绍 1.动 ...
- DEDECMS重要文件
DEDECMS 重要文件dedecms/include/common.inc.php全局变量文件dedecms/include/extend.func.php自定义函数文件
- google zxing 二维码扫描(android client分析)
一.总体架构 二.架构分析 1. com.google.zxing.client.android AmbientLightManager 环境光线管理 Detects ambient light an ...
- tableview 编辑状态设置
#pragma mark - tableview 编辑状态设置 -(BOOL)tableView:(UITableView *)tableView canEditRowAtIndexPath:(NSI ...
- bzoj2127: happiness
Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为了好朋友.这学期要分文理科了,每个同学对于选择文科与理科有着自己的喜悦值,而一对好朋友 ...
- 关于pcre正则表达式库libpcre
gcc 4.8中已经包含了std regex的头文件 可是没有实现,所以链接是失败的 gcc 4.9完整的支持了c++ 11的regex. 在4.9以前,可以寻求boost的regex. 不过,我更熟 ...