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 元素定义一个字体大小 ...
随机推荐
- 请问Pycharm如何实现变量的批量重命名?
1.点击你要改的单词,右键refactor ->rename 2. Ctrl + R 替换 Ctrl + Shift + F 全局查找 Ctrl + Shift + R 全局替换
- xhEditor 简单用法
1.下载需要文件包: http://xheditor.com/ 2.解压文件中文件 xheditor-zh-cn.min.js以及xheditor_emot.xheditor_plugins和xhed ...
- fedora input problem...
davelv最近很郁闷,因为他在Fedora 下用Eclipse写程序的时候,一旦有Eclipse实现了自动提示.代码补齐等功能后,键盘就失去相应,必须根据点右键或者切换窗口才能输入.就上网查,发现是 ...
- 学习Boost/Asio
编译boost 在Mac下使用brew编译boost,为了使用C++11,需要加入参数–c++11 $ brew install boost --c++11 在我的Mac虚拟机里面用了20分钟左右编译 ...
- django中的路由规则
项目的目录结构 外层的firstysite目录与Django无关,只是你项目的容器,可以任意重命名. #其中settings.py是django的总配置文件,即项目的总管家#urls.py,则是项目的 ...
- openpyxl 模块的使用
参考博客:https://www.cnblogs.com/anpengapple/p/6399304.html?utm_source=itdadao&utm_medium=referral 在 ...
- 2-2 Numpy-矩阵
# !usr/bin/env python # Author:@vilicute import numpy as np # 矩阵的创建 matr1 = np.mat("4 2 3;4 5 6 ...
- python实现统计字符类型
#字符串处理统计类型def my_func(*str): list_num = [] list_big = [] list_small = [] list_qt = [] str = input('请 ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...