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部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。