CSS字体大小之em,px,百分比
首先要记住网页中常规字体的大小为16px。
px是用来设置字体的绝对大小。通常为用于物理值的设置。我们在互联网上看到的常规字体大小为16px。而em是指相对于父元素的大小。1em是父元素的1倍,2em就是大小为父元素的2倍。当前,一般情况下,父元素的默认字体为16px。所以通常会认为1em = 16px。
绝大多数浏览器都支持更改网页的字体大小,例如chrome浏览器就是CTRL和'+'同时按下,放大字体。同理CTRL+‘-’就是缩小字体。或者CTRL+滚轮。但是IE无法调整那些使用px作为单位的字体大小。而国外的大部分网站都采用em作为字体大小。
| px | em |
|---|---|
| px像素(Pixel)是绝对长度单位,像素px是相对于显示器屏幕分辨率而言的。 | em是相对长度单位,相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸(16px)。 |
| px是绝对单位,不支持IE8以下的缩放。但是FireFox,Chrome和IE8以上都支持。 | em是相对单位,网页中的文字能放大和缩小。将行距(line-height),和纵向高度的单位都用em。保证缩放时候的整体性。 |
| px 宽度常用在图片宽度的定义等绝对定义的场合,使用 px 设计的网页不会因为父元素的大小而改变,这样可以保证设计的精确度。 | 中文文章的段落首行缩进两个字符直接使用 p {text-indent: 2em} 就行。在其他需要依字体大小来设置宽高度,大小的使用 em 也是比较方便的。 |
CSS字体大小之em,px,百分比的更多相关文章
- css字体大小设置em与rem的区别
em 单位em是相对于父元素的,如果父元素没有设置字体大小,那就会追溯到body. 比如 如果我在box_text的父元素box加了一个字体大小 那么body的8px就会被box_text的父元 ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...
- 响应式布局中为什么要使用em设置字体大小而不用px
px像素(Pixel).相对长度单位.像素px是相对于不同设备显示器屏幕分辨率(pad/phone/pc)而言的.(引自CSS2.0手册) 1em指的是一个字体的大小,它会继承父级元素的字体大小,因此 ...
- CSS字体大小设置时的参考(转)
from:http://blog.sina.com.cn/s/blog_51cd580b0100gg6y.html font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们 ...
- CSS——字体大小最常用的单位
px (像素): 将像素的值赋予给你的文本.这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的. ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更 ...
- css字体大小单位
1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...
- Chrome浏览器下CSS字体大小设置小于12px无效问题
当字体大小被设置小于12px时,IE.firefox可以起作用.但chrome中仍然显示为12px大小. 解决方法为: html, body { -webkit-text-size-adjus ...
- CSS 小结笔记之em
1.为什么使用em em也是css中的一种单位,和px类似.很多人会疑惑为什么有了px之后还要使用em,而且em使用起来相对于px来讲比较麻烦. em主要是应用于弹性布局,下面给出一个小栗子说明em的 ...
随机推荐
- 使用pymysql(使用一)
创建数据表 import pymysql db = pymysql.connect("localhost","root",""," ...
- swift面向协议编程
https://www.technotification.com/2018/08/protocol-oriented-programming-swift.html https://www.toptal ...
- centos7下安装docker(8.2进入容器)
那些在后台运行的新建的容器,通常不是我们想要的,我们要进行一些修改,比如安装服务,创建用户,查看日志,调整网络等等,这些操做都要进入容器去进行修改,今天我们来讨论如何进入容器. 1.docker at ...
- python下载脚本
#/usr/bin/env python#coding:UTF-8import timeimport os,sysimport urllib2 url = 'http://downloaduat.la ...
- About me?
看到好像每一篇博客都要写这个东西,就跟风写一写吧 写点啥啊 一个来自SD slyz的彩笔,就是天天被锤爆的那种 因为经常表现自己的弱还被一些大佬嘲讽说\(fake\) 啥都不擅长 可能很快就退役了 这 ...
- Pollard_Rho大数分解模板题 pku-2191
题意:给你一个数n, 定义m=2k-1, {k|1<=k<=n},并且 k为素数; 当m为合数时,求分解为质因数,输出格式如下:47 * 178481 = 8388607 = ( ...
- MySQL 基础八 用户管理
SELECT * FROM student INSERT INTO student(NAME,sex,createuser,createtime) VALUES('jack','男','ligenyu ...
- Luogu4249 WC2007 石头剪刀布 费用流
传送门 考虑竞赛图三元环计数,设第\(i\)个点的入度为\(d_i\),根据容斥,答案为\(C_n^3 - \sum C_{d_i}^2\) 所以我们需要最小化\(\sum C_{d_i}^2\) 考 ...
- EF性能优化-有人说EF性能低,我想说:EF确实不如ADO.NET
十年河东,十年河西,莫欺少年穷. EF就如同那个少年,ADO.NET则是一位壮年.毕竟ADO.NET出生在EF之前,而EF所走的路属于应用ADO.NET. 也就是说:你所写的LINQ查询,最后还是要转 ...
- 关于小程序登录时获取openId和unionId走过的坑
目前的项目是在做小程序这方面的,接触过的人应该都知道,同一个微信开放平台下的相同主体的App.公众号.小程序的unionid是相同的,这样就可以锁定是不是同一个用户.微信针对不同的用户在不同的应用下都 ...