标签:size idt 宽度 需要 页面布局 taobao 数值 media 效果
1、px:绝对单位,页面按精确像素展示
2、em:相对单位,基准点为父节点字体的大小,如果自身定义了font-size按自身来计算(浏览器默认字体是16px),整个页面内1em不是一个固定的值。
em是指字体高度 浏览器默认1em=16px,所以0.75em=12px;我们经常会在页面上看到根元素写的font-size:62.5%; 这样em就成了16px*62.5=10em;这是显示在页面的字体大小是10px; 这样12px=1.2em,10px=1em,也就是说只需要将你的原来的px数值除以10,然后换上em作为单位就行了,
em的特点 em是个相对值 他会根据父级元素的大小而变化 但是如果嵌套了多个元素 要计算它的大小,是件很头疼的事情
这样的情况下,就出现了rem rem的区别在于它是相对于根基元素的,因此不会被它的父类影响到
结论:之所以前端行业做移动端会普遍默认用rem或em,是因为可以通过js控制根元素(或者用@media)来达到适配各种分辨率的字体大小的效果
3、rem:相对单位,可理解为”root em”, 相对根节点html的字体大小来计算,CSS3新加属性,chrome/firefox/IE9+支持。// 是截止目前用的最多也是最流行的
rem在移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取)
4、vw、vh、vmin、vmax 主要用于页面视口大小布局,相对于rem;v*在页面布局上更加方便简单
vw:viewpoint width,视窗宽度,1vw等于视窗宽度的1%。
vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。
vmin:vw和vh中较小的那个。
vmax:vw和vh中较大的那个。
简析 rem,em, px, vw, vh, vmax, vmin
标签:size idt 宽度 需要 页面布局 taobao 数值 media 效果
原文地址:https://www.cnblogs.com/Apiccc/p/13952094.html