关于对于CSS的字体单位

对于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