css中em与px的介绍及换算方法
em是什么?
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会继承父级元素的字体大小。
重写步骤:
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。
转载于:https://www.cnblogs.com/ITRoad/archive/2010/01/06/1640245.html
css中em与px的介绍及换算方法相关推荐
- CSS中em和px单位的区别(转)
这里引用的是Jorux的"95%的中国网站需要重写CSS"的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收 ...
- html 10em,css中em什么意思?
在构建css样式表的时候常用的单位有px,em,rem,在实际应用中已经很少使用px,"px是绝对单位,em则是相对单位. css中em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前 ...
- CSS 中的像素(px)
CSS 中的像素(px) px 是一个我们经常在开发中使用的一个单元; 它表示在屏幕上展示的最小单元; 但是, 在 CSS 中像素可能和我们想象的不太一样. CSS 中的 px 是逻辑距离还是物理距离 ...
- 轴承故障诊断分类中常用的一些数据集介绍和获取方法
轴承故障诊断分类中常用的一些数据集介绍和获取方法 ------本文旨在学习过程中进行数据记录,仅供参考------ 做轴承故障诊断重要的是需要多个数据集,一些数据集是难获取的,-------
- html中zoom方法,CSS中zoom属性或overflow:auto的使用方法
这次给大家带来CSS中zoom属性或overflow:auto的使用方法,使用CSS中zoom属性或overflow:auto的注意事项有哪些,下面就是实战案例,一起来看一下. 前言 其实在CSS中的 ...
- 说说css中pt、px、em、rem都扮演了什么角色
前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...
- 关于css中em的值
使用CSS也好久了,但一直都是在使用"px"来设置Web元素的相关属性,未敢使用"em".主要原因是,对其并不什么了解,只知道一点概念性的东西,前段时间在项目中 ...
- html与css中em怎么用,css中em什么意思
em是css中的一个相对长度单位,相对于当前对象内文本的字体尺寸:如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器默认字体尺寸.可以作用在width.height.line-height.mar ...
- css中,用px自动转化为rem
新建一个mixin.scss文件,里面写:(非常适用于移动端) // $ratio 随便起的变量名 // 375:!Phone默认的最大宽度 $ratio: 375 / 10;//默认的初始值@fun ...
最新文章
- AssetManager asset使用
- ERROR 1045 (28000): Access denied for user 'root'@'localhost' (using password: NO)
- 小程序开发实战学习笔记
- C#宿舍管理系统命名规范与评分标注
- 也说翟鸿燊忽悠的一面
- 再说千遍万遍,都不如这四句话管用,不服不行!
- C++异常以及错误处理
- 冒泡排序法应用排身高
- linux sshd进程起不来,linux sshd服务异常
- 辨异 —— 概率与统计
- shell脚本实现FTP自动上传文件
- 【图像处理】基于matlab GUI图像直方图+滤波处理【含Matlab源码 839期】
- 软件用户手册(软件使用说明书)模板
- spring boot在整合mybatis的时候报错Mapper method'...'has an unsupported return type'...'
- Unity InputField光标位置不对
- pycharm复制代码出现空格
- 端口输出报错**Error** test5.ASM(60) Constant too large
- java字母排序_Java实现按照大小写字母顺序排序的方法
- 浅析大数据前景及就业方向
- r4900g3系统安装linux_H3C UniServer R4900 G3服务器NVMe硬盘配置阵列方法以及相关操作...
热门文章
- Silverlight学习笔记(九)-----RenderTransform特效【五种基本变换】及【矩阵变换MatrixTransform】...
- .NET Framework 如何:提高性能
- 商品pid是什么意思_0基础搞懂自动驾驶传统算法与深度学习的鸿沟-PID控制算法与MLP优化方法...
- 蓝桥杯 2011年第二届C语言初赛试题(2)
- mysql innodb flush method_对innodb_flush_method的一点解释
- 人工智能AI实战100讲(四)-基于深度学习的图像增强综述
- 滑动窗口限流 java_Spring Boot 的接口限流算法优缺点深度分析
- linux msgrcv阻塞接收_linux下高并发服务器实现
- ios framework 找不到.h_找不到好看的壁纸?上万张「高清壁纸」,都在iOS捷径里...
- 《javaScript100例|01》超级经典一套鼠标控制左右滚动图片带自动翻滚