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

不要删除

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如下：

这是父级字体大小测试

这是子级字体大小测试

设置了父级为16px;子级为2em,则子级字体会比父级大一倍；思考：Chrome浏览器默认最小字体为12px;如果我父级设置12px.子级设置0.5em，字体大小会不会是6px呢；

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

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

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

rem

csshtml{

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。

%

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

../../md/HTML5+CSS3/

不要删除