博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
关于对于CSS的字体单位
阅读量:7069 次
发布时间:2019-06-28

本文共 1309 字,大约阅读时间需要 4 分钟。

对于CSS的长度单位,有下面几种:

长度单位可以分为相对长度单位和绝对长度单位:

存在五种绝对长度单位:

英寸(in):厘米(cm):毫米(mm):点(pt):派卡(pc):这几种单位我们几乎没有机会用上,因此知道就好

对于相对长度单位:

存在几种相对长度单位:em,ex,px,rem

em:在css中,一个em定义为 一种给定字体的 font-size值的大小,例如:如果一个元素的 font-size值为14px,那么对于该元素,1em等于14px,在设置字体的大小的时候,em的值会随着父元素的字体大小而变化,因此我们对于不同的段落设置不同的font-size,那么即使段落元素的height都为相同的em,实际上他们每个段落的heigh也是不同的,因为em是相对于他们的父元素font-size的大小而言的,他们的父元素是不同的

ex:ex是指所用字体中小写x的高度,在实际的应用中,我们可以假设 1ex等于 0.5em,不过这个单位还没有怎么见过用过

px:px表示像素,这应该是我们在pc端经常用到的了,这是一个相对单位,因为不同显示屏幕的像素是不同的

rem:rem表示的是 “root em” 这个意思,这个的计算单位和em是相同的,所不同的是这个em的大小是相对于根元素来定义的,因此在使用rem之前,我们可以先在html根元素上规定一个font-size:

对于webAPP而言,我们可以使用媒体查询和使用js动态计算来实现不同手机端的适配,使用js动态计算的优点在于可以适用不同浏览器进行兼容,我们使用媒体查询可以让手机端的适配看起来简单一些:

使用css查询如下:

‘例子如下’html {    font-size : 20px;}@media only screen and (min-width: 401px){    html {        font-size: 25px !important;    }}@media only screen and (min-width: 428px){    html {        font-size: 26.75px !important;    }}@media only screen and (min-width: 481px){    html {        font-size: 30px !important;     }}@media only screen and (min-width: 569px){    html {        font-size: 35px !important;     }}@media only screen and (min-width: 641px){    html {        font-size: 40px !important;     }}  

如上:上面是使用css进行的媒体查询

也可以使用js进行动态查询代码如下:

/*明天补充*/

 

转载于:https://www.cnblogs.com/qianduangaoshou/p/7045675.html

你可能感兴趣的文章
Git相关小记
查看>>
Python将字符串转为字典最佳实践
查看>>
Python3之字符串格式化format函数详解(下)
查看>>
Python笔记001-类的特殊方法
查看>>
10分钟快速精通rollup.js——Vue.js源码打包原理深度分析
查看>>
蜂鸟智游大数据:“人在囧途”的春运,航空公司们可操碎了心
查看>>
在 create-react-app 中启用装饰器语法
查看>>
python中的数据类型(list,tuple,dict,set,None)
查看>>
通过 Snabbdom 理解 Virtual DOM
查看>>
原生JS实现类似《掘金》网站的图片查看器
查看>>
微服务架构下,解决数据一致性问题的实践
查看>>
2019,Web前端开发还值得学吗?
查看>>
理财基金篇二——基金理财的种类
查看>>
React知识点:关于className处理
查看>>
超级易懂的互联网通信(上)
查看>>
vim set ts=4 自动缩进
查看>>
我的友情链接
查看>>
HTML(超文本标记语言)之【动态网页】
查看>>
【Linux】修改"$PATH"环境变量的探索
查看>>
我的友情链接
查看>>