Powered by md-Blog  文 - 篇  访客 -

CSS里px、em、rem、%、vw、vh、vmin、vmax这些单位的区别


  分类:HTML5+CSS3  / 
更新:2020-01-16 14:03:56  /  创建:2020-01-16 14:02:44
不要删除

CSS中常见的单位

  • px:最常见的,页面按照精准样式展示,属于绝对单位
  • em:基准点为父节点字体的大小,如果自身定义了font-size按自身来计算;也就是说这个em不是一个固定值,属于相对单位
  • rem:相对单位,r可以看作为 ”root“,结合em,理解为相对根节点HTML的字体大小来计算
  • vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%
  • vh:viewpoint height,视窗高度,1vh等于视窗高度的1%
  • vmin:vw和vh中较小的那个
  • vmax:vw和vh中较大的那个
  • %:百分比

PX

px是常见的,页面按照精准样式展示,常用于确定了模块固定宽高的样式书写中;

em

css如下:

.father-div{
    font-size: 16px;
}
.son{
    font-size:3em;
}

div如下:

<div class="father-div">
    这是父级字体大小测试
    <div class="son">这是子级字体大小测试</div>
</div>

设置了父级为16px;子级为2em,则子级字体会比父级大一倍;

思考:Chrome浏览器默认最小字体为12px;如果我父级设置12px.子级设置0.5em,字体大小会不会是6px呢;

答案测试后之后是不会的;

思考:Chrome如何设置小于12px的字体呢

transform: scale(0.5); 使用缩放进行控制

rem

css

html{
    font-size:32px;
}
.father-div{
    font-size: 16px;
}
.son{
    font-size:2rem;
}

设置了根元素为32px;子级使用2rem,父级16px;最后效果为子集以根元素的大小为相对像素显示为64px;

思考:响应式布局我们就可以写上不同的媒体查询,做到字体的响应式
@media screen and (max-width:320px ) {
    html{font-size: 12px;}
}
@media screen and (min-width:321px) and (max-width:750px ) {
    html{font-size: 14px;}
}
@media screen and (min-width:751px ) {
    html{font-size: 16px;}
}

VM & VH

最近在大屏开发中用这个属性比较多;设置一个div响应式的铺满整个可视窗体,以前我会这么写:

html,
body {
    height: 100%;
    margin:0;
    padding:0;
}

.div{
    width: 100%;
    height: 100%;
    background: #000;
}

必须设定好父节点100%,需要铺满的 div 才能让 height: 100%; 起作用。

于是在大屏开发中,我就使用到了vh和vm的单位;只需要这么写:
.div-all {
    width: 100vw;
    height: 100vh;
    background: #000;
}

大屏中,有时候 div 直接需要相隔像素,于是可以使用CSS3新增的 计算函数 进行像素的计算,也是非常方便:

calc(100vh - 10px) 表示整个浏览器窗口高度减去10px的大小
calc(100vw - 10px) 表示整个浏览器窗口宽度减去10px的大小

vmax & vmin

有一个1000px(宽)和800px(高)的视窗(Viewport);
vmin——vmin的值是当前vw和vh中较小的值。在我们的例子里因为是横向模式,所以50vmin = 400px。
vmax——大尺寸的百分比。50vmax = 500px。

%

百分比则表示当前以父级为相对大小的百分比;


不要删除

小站不易,感谢支持!