css3 vw和vh介紹
本章節通過程式碼例項介紹一下vw和vh的用法。
這兩個和px,rem或者em類似,都是作為css中的單位。
這兩個單位分別用作於水平的寬度和垂直的高度,原理是一樣的,所以只介紹vw的用法即可。
概念如下:
[CSS] 純文字檢視 複製程式碼vw相對於視窗的寬度:視窗寬度是100vw
也就是整個視窗的寬度是100vm,那麼1vm就是百分之一視窗的寬度。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { margin: 0; padding: 0; } div { width:100vw; height:100vh; text-align:center; line-height:100vh; background:#ccc; } </style> </head> <body> <div>螞蟻部落</div> </body> </html>
上面的程式碼實現了div元素的全屏效果,非常簡單。
相關文章
- rem+vw、vh+sassREM
- css3中單位px,em,rem,vh,vw,vmin,vmax的區別CSSS3REM
- CSS3 vhCSSS3
- CSS3 vwCSSS3
- 【CSS筆記】— 使用calc()計算寬高(vw/vh)CSS筆記
- CSS中那些你不知道的長度的單位VW和VHCSS
- CSS3 介紹CSSS3
- 一次搞懂資料大屏適配方案 (vw vh、rem、scale)REM
- CSS3 Transition介紹CSSS3
- em,rem和vhREM
- css3 pointer-events 介紹CSSS3
- CSS3 clip-path 用法介紹CSSS3
- CSS3 calc()用法簡單介紹CSSS3
- 響應式佈局的常用解決方案對比(媒體查詢、百分比、rem和vw/vh)REM
- CSS3轉換(transform)基本用法介紹CSSS3ORM
- 【移動端適配】用vw、vh+媒體查詢打造最完美的移動端適配方案
- CSS3屬性選擇器簡單介紹CSSS3
- HTTP介紹和HTML簡介HTTPHTML
- Redis介紹和使用Redis
- Lombok介紹和配置Lombok
- (一) 機器學習和機器學習介紹機器學習
- MySQL MRR和ICP介紹MySql
- Tkprof工具介紹和分析
- ddddocr基本使用和介紹
- 【前端Talkking】CSS系列-css3之box-shadow介紹前端CSSS3
- iOS Runtime介紹和使用iOS
- 容器技術和Docker介紹Docker
- Python JWT 介紹和使用PythonJWT
- Charles 功能介紹和使用教程
- canvas描邊和填充介紹Canvas
- web worker的介紹和使用Web
- HTTPS 和HTTP的介紹HTTP
- XML和JSON的介紹XMLJSON
- Tensorflow介紹和安裝
- AsyncDisplayKit介紹(一)原理和思路
- ARKit 和 ARCore原理介紹(轉)
- mvn相關介紹和命令
- less的介紹和應用