css字体大小单位
1:px:
这个应该是国内使用较多的单位,意思为像素。因此,其视觉的呈现效果是与分辨率相关的。例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉得在高分辨率下要小,在低分辨率下要大。默认浏览器采用16px的呈现方式。
如果设置字体单位为 %,例如:font-size:120%,则为16px*120%=19px;
2: em:
相比国内来说,国外的站点更偏向于使用em,不仅是在font-size上,在margin和padding等上面也会使用,如知名的css设计网站-css禅意花园,http://www.csszengarden.com/。1em=16px;子元素的em的大小并不是具体固定的,子元素的em是在父元素的基础上计算的,例如:父元素为2em,子元素为1em,则子元素字体大小为1(子)*2(父)=2em;父元素为2em,子元素为2em,则子元素字体大小为2(父)*2(子)=4em如下:
.div2{
font-size:2em;
}
p{
font-size:1em;
}
3:rem:
rem是css3出现的新的字体大小定义方式,其与em的区别是rem总是相对于html的跟元素(html),不会相对父元素。如下:
html{
font-size:1em;
}
.div2{
font-size:2rem;/*1(根元素)*2(自己)=2em(实际尺寸)*/
}
p{
font-size:1rem;/*1(根元素)*1(自己)=1em(实际尺寸)*/
4:pt:
pt不随浏览器分辨率的变化而发生视觉上的变化,永远看起来一样大。
css字体大小单位的更多相关文章
- html,CSS文字大小单位px、em、pt的关系换算
html,CSS文字大小单位px.em.pt的关系换算 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与 ...
- (转)CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本 大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的争 ...
- CSS文字大小单位px、em、pt详解
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- CSS字体大小: em与px、pt、百分比之间的对比
CSS样式最混乱的一个方面是应用程序中文本扩展的font-size属性.在CSS中,你可以用四个不同的单位度量来显示在web浏览器中的文本大小.这四个单位哪一种最适合Web? 这个问题引起了广泛的 ...
- CSS——字体大小最常用的单位
px (像素): 将像素的值赋予给你的文本.这是一个绝对单位, 它导致了在任何情况下,页面上的文本所计算出来的像素值都是一样的. ems: 1em 等于我们设计的当前元素的父元素上设置的字体大小 (更 ...
- Html 字体大小单位 px em pt
网页上定义字体大小有常见三种单位,px.em.pt px px是pixel缩写,是基于像素的单位.在浏览网页过程中,屏幕上的文字.图片等会随屏幕的分辨率变化而变化,一个100px宽度大小的图片,在80 ...
- CSS文字大小单位px、em、pt(转)
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平时都是用p ...
- 你应该知道的CSS文字大小单位PX、EM、PT[转]
摘要: 这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章, 题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷.我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大.平 ...
- 谈谈css3的字体大小单位[rem]
最近接收了一份面试题,内容是移动端传播的H5(在中国通常这么叫)广告页. 秉承移动端web尽量少用px的概念,我使用rem进行了一次重构.对于rem,基本是给 html/body 元素定义一个字体大小 ...
随机推荐
- TZOJ 2478 How many 0's?(数位DP)
描述 A Benedict monk No.16 writes down the decimal representations of all natural numbers between and ...
- 判断是否微信浏览器,获取cookie,获取URL来源等
function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/MicroMessenge ...
- Liferay 7:Liferay DXP解决方案
分享是美德,欢迎探讨技术 这个作者很厉害呀,写的博客都是解决很刁钻问题的.强烈推荐 http://www.liferaysolution.com/2017/06/captcha-recaptcha-w ...
- JAVA面试常见问题之数据库篇
1.MySQL 索引使用的注意事项 更新频繁的列不要加索引 数据量小的表不要加索引 重复数据多的字段不要加索引,比如性别字段 首先应该考虑对where 和 order by 涉及的列上建立索引 2.D ...
- Kubernetes 基于 ubuntu18.04 手工部署 (k8s)
由于工作的需要, 手工部署一个 Kubernetes 环境(k8s).(以前都是云上搞定,拿来用) 习惯把这种工作记录下来,自己备查也和别人分享 网上相关文章很多, 我也参考了很多,这里推荐一个 链接 ...
- TomCat 启动默认加载项目
在最后加上这句代码即可:<Context path="" docBase="\项目名称" reloadable="true" cros ...
- 学习JDK1.8集合源码之--LinkedHashMap
1. LinkedHashMap简介 LinkedHashMap继承自HashMap,实现了Map接口. LinkedHashMap是HashMap的一种有序实现(多态,HashMap的有序态),可以 ...
- JavaScript 对象的所有方法名称转换为大写
function A() { this.do1 = function () { console.log(1); }; this.do2 = function () { console.log(2); ...
- Leetcode48. Rotate Image旋转图像
给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵.请不要使用另一个矩阵来旋转图像. 示例 1: 给定 m ...
- Leetcode33.Search in Rotated Sorted Array搜索旋转排序数组
假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值,如果数组中存在这个目标值, ...