em与px换算关系以及常用列表
1、任意浏览器的默认字体大小都是16px。
2、所有未经调整的浏览器都符合: 1em=16px 12px=0.75em 10px=0.625em
3、为了简化font-size的换算,在body选择器中声明font-size:62.5%,这就使em值变为
12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了。
em有如下特点:
1. em的值并不是固定的;
2. em会继承父级元素的字体大小。
1. body选择器中声明Font-size=62.5%;
2. 将你的原来的px数值除以10,然后换上em作为单位;
简单吧,如果只需要以上两步就能解决问题的话,可能就没人用px了。经过以上两步,你会发现你的网站字体大得出乎想象。因为em的值不固定,又会继承父级元素的大小,你可能会在content这个div里把字体大小设为1.2em, 也就是12px。然后你又把选择器p的字体大小也设为1.2em,但如果p属于content的子级的话,p的字体大小就不是12px,而是1.2em= 1.2 * 12px=14.4px。这是因为content的字体大小被设为1.2em,这个em值继承其父级元素body的大小,也就是16px * 62.5% * 1.2=12px, 而p作为其子级,em则继承content的字体高,也就是12px。所以p的1.2em就不再是12px,而是14.4px。
3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明,也就是避免以上提到的1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em,那么在声明p的字体大小时就只能是1em,而不是1.2em, 因为此em非彼em,它因继承#content的字体高而变为了1em=12px。
em与px换算关系以及常用列表的更多相关文章
- b1.关于em和px的关系
一般默认 1em=12px , em相对于其父元素的px定义: 但是 如果本身元素设置 font-size: 15px; em与px的比例随之变化. 一般根据浏览器默认的font-size:12p ...
- dpi dp px 换算关系
getResources().getDisplayMetrics().densityDpi 就是屏幕密度.getResources().getDisplayMetrics().density 也可以理 ...
- rem和em和px vh vw和% 移动端长度单位
1.rem和em.px 首先来说说em和px的关系 em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:65%; 这样em就成 ...
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- em和px区别
附:(http://www.cnblogs.com/leejersey/p/3662612.html) em单位说明 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此并不是一个固定的值.任 ...
- 网站响应式布局/网站自适应问题+rem、em、px、pt及网站字体大小设配
Bootstrap 网格系统: Bootstrap CSS: Bootstrap 组件及插件: 一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个 ...
- rem、em、px之间的转换
rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个参考值,这个参考值设置为多少,完全可以根据您自己的需求来定. 我们知道,浏览器默认的字号16px,来看一些px单位 ...
- em与px的区别 [ 转 ]
其实,还是不大理解,为什么1em=16px:而且,还一般要在body里面,就写清楚Fone-size=62.5%,然后再让1em=10px进行使用:那么,为什么不直接在当时定义em的时候,就直接让它等 ...
- rem,em,与px的比较用法
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
随机推荐
- git上传新项目
命令行指令 Git 全局设置 git config --global user.name "15510728111" git config --global user.email ...
- Ajax状态值及状态码
1- AJAX状态值与状态码区别AJAX状态值是指,运行AJAX所经历过的几种状态,无论访问是否成功都将响应的步骤,可以理解成为AJAX运行步骤.如:正在发送,正在响应等,由AJAX对象与服务器交互时 ...
- Android自定义九宫格图案解锁
转自: http://blog.csdn.net/shineflowers/article/details/50408350
- C#-WebForm-纯HTML提交方式
此方法常用于 纯.html页面向数据库添加数据 在.aspx网页中可以通过传值的方式提交信息,如何在.html网页中提交数据? 提交数据需要在同一个 form 中,用到两个属性:action.meth ...
- Ubuntu下deb文件及tgz文件安装
dpkg 是Debian Package的简写,是为Debian 专门开发的套件管理系统,方便软件的安装.更新及移除.所有源自Debian的Linux发行版都使用dpkg,例如Ubuntu.Knopp ...
- 理解Compressed Sparse Column Format (CSC)
最近在看<Spark for Data Science>这本书,阅读到<Machine Learning>这一节的时候被稀疏矩阵的存储格式CSC给弄的晕头转向的.所以专门写一篇 ...
- Nginx编译安装(Centos)
前言 Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.由俄罗斯的程序设计师Igor Sysoev所开发,供俄国大 ...
- 1 python大数据挖掘系列之基础知识入门
preface Python在大数据行业非常火爆近两年,as a pythonic,所以也得涉足下大数据分析,下面就聊聊它们. Python数据分析与挖掘技术概述 所谓数据分析,即对已知的数据进行分析 ...
- Material Design
4.适应性设计 底层设计系统包括了交互和空间两部分.每一个设备都能反映出同一底层系统的不同侧面.每一设备的界面都会按照大小和交互进行调整.只有颜色,图标,层次结构和空间关系保持不变. 它不仅仅为了好看 ...
- PHP中explode和implode的区别
字符串的连接与分割是非常重要的两个内容,通过其可以将数组按照指定的规则转换成字符串,也可以将字符串按照指定的规则进行分割,返回一个数组.其应用范围很广,如在购物网站的购物车,在线投票系统等.这两项技术 ...