em px的关系

情况是这样的，css里常用的两种定义字体大小的单位：em, px。

em是一个相对数，比如1.1em就表示1.1个字符宽度，而这个字符宽度是根据font-size来初始化大小的。同时em还有继承父对象的特性，所以在不同位置的1.2em并不一定相等，不过这篇文章和这个没关系就不细说了。 
px是对于当前显示设备的解析度而言，虽然对于不同设备仍然会有大小差别，但是相对来说更加适合用在定义字体上。 
　　而这个模版我没有特别定义搜索部分的字体大小，于是它就使用了父对象的font-size参数12px。而万恶的IE对字体的大小定义竟然和FF/Opera是不同的，默认情况下1em在IE下看起来要比其他浏览器大，所以需要在body部分加入以下定义：


代码如下:

font-size:62.5%;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;

关键是第一句，它使得IE下的字体大小看起来是：1em=10px，这样就和FF/Opera差不多了。

赞 (0)

相关推荐

  • em px的关系

    情况是这样的,css里常用的两种定义字体大小的单位:em, px. em是一个相对数,比如1.1em就表示1.1个字符宽度,而这个字符宽度是根据font-size来初始化大小的.同时em还有继承父对象的特性,所以在不同位置的1.2em并不一定相等,不过这篇文章和这个没关系就不细说了.  px是对于当前显示设备的解析度而言,虽然对于不同设备仍然会有大小差别,但是相对来说更加适合用在定义字体上.  而这个模版我没有特别定义搜索部分的字体大小,于是它就使用了父对象的font-size参数12px.而万

  • Android的单位以及屏幕分辨率详解

    一.常用的单位:相对单位主要有:px.sp.dp绝对单位主要有:pt.in.mm 二.单位应用总结:一般用相对单位,而不是绝对单位1.字体的大小一般使用SP,用此单位的字体能够根据用户设置字体的大小而自动缩放 2.空间等相对距离一般使用dp(dip),随着密度变化,对应的像素数量也变化,但并没有直接的相对比例的变化. 3.px与实际像素有关,及与密度有关!dp和sp和实际像素没有关系,对于一定分辨率但不同密度的屏幕,px单位的应用可能会导致长度的相对比例的变化. 三.密度与分辨率:密度值表示每英

  • phpmyadmin 常用选项设置详解版

    config.inc.php全部内容如下:(以phpmyadmin2.5.4为例) <?php/* $Id: config.inc.php,v 1.204.2.1 2003/10/10 14:24:24 nijel Exp $ */// vim: expandtab sw=4 ts=4 sts=4: /*** phpMyAdmin Configuration File** All directives are explained in Documentation.html*/ /*** Sets

  • vue项目设置活性字体过程(自适应字体大小)

    vue项目设置活性字体过程(自适应字体大小)

    目录 vue项目设置活性字体 起因 我们来看看详细步骤吧 效果 vue项目引入特殊字体 特殊字体指的是默认电脑中没有的 vue项目设置活性字体 起因 最近,博主在按照ui设计稿参数编写页面之后,发现页面整体偏大,尤其是字体现实的特别大,但是在按UI设计的页面尺寸展示的时候却十分舒服,这是怎么回事,在和另一位前端交流之后,得知可以动态设置字体大小,即不同页面有不同的大小的字体十分灵活. 首先,我们要清楚字体设置比较常用的三个单位px,rem,em px是一个大小单位,相当于1像素,这要写死就是固定

  • 用户体验第一 font-size放弃px选择em

    在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的.大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的"察看-文字大小"设置已无任何作用.对字体感觉太小的浏览者而言无疑是种很不好的用户体验过程.其实这一切都可以避免,那就是使用em单位作为字体显示单位. 浏览器的默认字体高都是16px,所以未经调整的浏览器在显示1em=16px.换算过来的话也就是说1px=0.0625em,也就是12px=0.7

  • jQuery动态效果显示人物结构关系图的方法

    本文实例讲述了jQuery动态效果显示人物结构关系图的方法.分享给大家供大家参考.具体分析如下: 这是一个人物关系图,可动态展示,效果非常漂亮.点击文字可出现动态关系图的转换效果. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&

  • Android中屏幕密度和图片大小的关系详解

    Android中屏幕密度和图片大小的关系详解

    Android中屏幕密度和图片大小的关系详解 前言 Android中支持许多资源,包括图片(Bitmap),对应于bitmap的文件夹是drawable,除了drawable,还有drawable-ldpi.drawable-mdpi.drawable-hdpi.drawable-xhdpi.drawable-xxhdpi等,同一张图片放到上面不同的文件夹中是有区别的,比如一张100 * 100像素大小的图片,分别放在上述各个文件夹中,然后将其设置为ImageView(假设宽高都是wrap_co

  • jQuery实现带渐显效果的人物多级关系图代码

    jQuery实现带渐显效果的人物多级关系图代码

    本文实例讲述了jQuery实现带渐显效果的人物多级关系图.分享给大家供大家参考.具体如下: 这里演示jQuery实现带渐显效果的人物多级关系图,setQuestPose:function中的n代表共几个对象 r代表周长 i代表第几个对象 w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度,测试时请注意,如果右下角提示有错误,请重新刷新页面即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-gxt-style-d

  • 详解Android应用中屏幕尺寸的获取及dp和px值的转换

    获取屏幕尺寸 通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); //其中display = getWindowManager().getDefaultDisplay() 获得了一个DefaultDisplay对象; 然后 display.getMetrics(dm) 把屏幕尺寸信息赋值给DisplayMetrics d

  • vue使用GraphVis开发无限拓展的关系图谱的实现

    vue使用GraphVis开发无限拓展的关系图谱的实现

    1.去GraphVis官网下载对应的js,新版和旧版的js有所不同,看自己需求引入旧版还是新版(GraphVis官方网址:http://www.graphvis.cn/) visgraph.min.js (基本配置js) visgraph-layout.min.js(配置布局js) 2.在需要的vue文件引入js文件 import VisGraph from '@/assets/js/GraphVis/old/visgraph.min.js' // 自己对应的js文件位置 import Layo

随机推荐