css单位盘点

时间 2019-12-11

标签 css 单位盘点栏目 CSS 繁體版

原文原文链接

css单位有：px，em，rem，vh，vw，vmin，vmax，ex，ch 等等css

一、px单位最多见，也最直接，这里不作介绍。html

二、em：em的值并非固定，它继承父级元素的字体大小，因此层数越深字体越大。css3

1 <body style="font-size:16px;">
2     hello - font-size:16px
3     <div style="font-size:1.5em;">
4         hello 01 - font-size:24px
5         <div style="font-size:1.5em;">
6             hello 02 - font-size:36px
7         </div>
8     </div>
9 </body>

View Code

三、rem：rem是css3新增的一个相对单位，与em不一样的一点是rem相对于根元素(html)字体大小。tip：浏览器默认字体大小是16px。浏览器

1 <body>
2     hello - font-size:16px
3     <div style="font-size:1.5rem;">
4         hello 01 - font-size:24px
5         <div style="font-size:1.5rem;">
6             hello 02 - font-size:24px
7         </div>
8     </div>
9 </body>

View Code

四、vh 和 vwapp

在进行响应式布局时，咱们经常会使用百分比来布局，然而CSS的百分比不老是解决每一个问题的最佳方案，CSS的宽度相对于离它最近的父元素的宽度。若是你想使用视口的宽度、高度而不是父元素的宽高，可使用vh和vw单位。 1vh = viewportHeight /100; 1vw = viewportWidth /100; 使用vh、vw就能够保证元素的宽高适应不一样设备。ide

五、vmin 和 vmax布局

vw和vh对应于viewport的width和height，而vmin和vmax分别对应于width、height中的最小值和最大值，例如若是浏览器的宽/高为1000px/600px，那么 1vmin = 600 /100; vmax = 1000 /100;字体

六、ex 和 chthis

ex、ch单位与em、rem类似之处在于都依赖于font-size，可是ex、ch还依赖于font-family，基于font-specific来计算。spa

不一样大小屏幕手机的一个自适应策略：

先引入viewport.js（执行viewport.init();），字体用rem单位（需 /100），须要自适应的图标加上icon-*这样的类名。

 1 var viewport = {
 2     viewportWidth : document.documentElement.clientWidth,
 3     calc : function() {
 4         var rootSize = this.viewportWidth / 750 * 100;
 5         document.documentElement.style['font-size'] = rootSize + 'px';
 6     },
 7     resetImageScale : function() {
 8         var scaleStr = this.viewportWidth / 750;
 9         var imageScaleStyle = document.createElement('style');
10         var inertCss =
11             '\n\
12             [class^="icon"]{\n\
13                 zoom:' + scaleStr + ';\n\
14             }\n\
15         ';
16         imageScaleStyle.innerHTML = inertCss;
17         document.head.appendChild(imageScaleStyle);
18     },
19     init : function() {
20         viewport.calc();
21         viewport.resetImageScale();
22         window.addEventListener('resize', function(){
23             viewport.calc();
24             viewport.resetImageScale();
25         });
26     }
27 };

View Code

1. css单位
2. CSS单位
3. css 单位
4. CSS 单位
5. css_04 | CSS——CSS 值和单位
6. CSS中的单位
7. css中的单位
8. CSS单位解释.
9. CSS--值和单位
10. css单位介绍
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• TiDB 在摩拜单车在线数据业务的应用和实践
• 使用阿里云OSS+CDN部署前端页面与加速静态资源