Example analysis of length unit and width adaptation in CSS
CSS Unit
Author: Chinaxiang Source: Internet2015-12-01 23:36
There are many length units in CSS, so I feel it is necessary to organize notes.
Overview
There are many length units in CSS, so I feel it is necessary to organize a memo.
There are also many and complete introductions online, please see the reference materials for details.
Units are roughly divided into two categories:
Absolute units will not change due to changes in the size of other elements.
Relative unit does not have a fixed measurement value, but a relative value determined by the size of other elements.
| Unit | Type | Introduction |
|---|---|---|
px |
Absolute | Pixel (a point on the computer screen), 1px = 1/96in
|
pt |
Absolute | Points, 1pt = 1/72in
|
##pc
| AbsolutePicas, | 1pc = 12pt |
in |
Inches, | 1in = 96px = 2.54cm |
cm |
Absolute | Centimeters, 1cm = 96/2.54px
|
mm |
Absolute | Millimeters, 1mm = 1/10cm
|
q |
Absolute | Quarter-millimeters, 1q = 1/4mm
|
% |
Relative | The width or font size relative to the parent element |
em |
Relative | Font size relative to parent element |
#rem |
Relative | (i.e. root em) The font size relative to the html tag |
ex
|
Relative | The height of x letters in the current font environment |
ch |
Relative | The height of the number in the current font environment 0
|
vw |
Relative | 1% The width of the viewport (browser visible area) |
vh |
Relative | 1% The height of the viewport (visible area of the browser) |
vmin |
Relative | 1% The smaller of the width and height of the viewport (browser visible area) |
vmax |
Relative | 1% The larger of the width and height of the viewport (viewable area of the browser) |
Since the absolute unit is a fixed value, there is nothing to introduce. The following mainly introduces the relative unit.
%
#The size of the same attribute relative to the parent element. This is actually not a unit, but it can be used as a unit of length after all, so it is listed here.
If used to set the font, it will be relative to the font size of the parent element.
The default font size in the <html> and <body> tags in most browsers is 100%.
html {font-size: 100%;}body {font-size: 100%;}100% = 1em = 16px = 12pt
If used to set non-font sizes such as width and height, the length value in percentage is based on the same attribute The length value of the parent element.
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
p.parent { margin:150px; width: 200px; height: 200px; border: 1px solid blue; }
p.child { width: 50%; height: 50%; border: 1px dashed black; }
</style></head><body>
<p class="parent">
<p class="child"></p>
</p></body></html>再啰嗦一点关于父元素的问题：何为父元素，相对定位（relative），绝对定位（absolute），浮动（float），固定（fixed）中如何找寻父元素？
由于HTML是树形结构，标签套标签，一般情况下的父子关系很明朗。
<p class="parent">
<p class="child"></p>
</p>相对定位元素，它的父元素符合标签嵌套。
绝对定位元素，它的父元素是离它最近的定位元素（绝对定位，相对定位，固定，但不包括浮动）或者视窗尺寸（没找到定位元素时）。
浮动元素，它的父元素也符合标签嵌套。
固定元素（特殊的绝对定位），它的父元素是视窗（浏览器默认用来展示内容的区域的尺寸，不是html 或body 的尺寸）。
注意一下绝对定位就行了，其他的相对简单。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { position:absolute; top:100px; left:100px; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>box 宽度为视窗的一半，can 的宽高是 box 的宽高的一半。
将 can 设置为 position:
fixed; 则其父元素将不再是 box 而是浏览器视窗。
can 的宽高是视窗宽高的一半。
浮动元素的父元素跟普通元素的父元素是一样的。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { width:1000px; }
body { width:800px; }
#box { width:50%; height:300px; position: absolute; margin-left: 200px; border: 1px solid red; }
#can { float:left; width:50%; height:50%; border:1px solid black; }
</style> </head> <body>
<p id="box">
<p id="can"></p>
</p>
</body> </html>注意： padding、 margin 如果设置了百分比，上，下，左，右
用的都是父元素宽度 的值为标准去计算。
em 和 rem
两者都是基于字体尺寸的，区别在于 em 是相对于当前父元素的字体大小为标准，而 rem 是相对于 html 元素的字体大小为标准。
举个例子你就明白了。
<!DOCTYPE html><html><head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
html { font-size: 30px; }
body { font-size: 14px; }
p.em { font-size: 1.2em; }
p.rem { font-size: 1.2rem; }
</style></head><body>
<p class="em">
Test <!-- 14 * 1.2 = 16.8px -->
<p class="em">
Test <!-- 16.8 * 1.2 = 20.16px -->
<p class="em">
Test <!-- 20.16 * 1.2 = 24.192px -->
</p>
</p>
</p>
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
<p class="rem">
Test <!-- 30 * 1.2 = 36px -->
</p>
</p>
</p></body></html>
ex and ch
ex and ch units, depend on the current font font- family and font size font-size. ex refers to the height of the lowercase letters x in the current font environment, and ch refers to the width of the numbers 0 in the current font environment.
Already supported by IE9+ and modern browsers.
vw and vh
Responsive web design techniques rely heavily on proportion rules. However, CSS scale is not always the best solution for every problem. What if you want to use the width or height of the display window instead of the width of the parent element? This is exactly what the vh and vw units offer.
vh is equal to the height of the viewport 1/100. For example, if the height of the browser is 900px, 1vh The obtained value is 9px. In the same way, if the display window width is 750px, the value obtained by 1vw is 7.5px.
Both units are supported by IE10+ and modern browsers.
vmin 和 vmax
这两个单位是针对vw和vh
vmin 是vw和vh中比较 小 的值
vmax 是vw和vh中比较 大 的值
.box { height: 100vmin; width: 100vmin;}.box { height: 100vmax; width: 100vmax;}IE10+ 和现代浏览器都已经支持 vmin
webkit浏览器之前不支持vmax，现在已经支持，所有现代浏览器已经支持，但是IE不支持 vmax.
总结
尺寸单位虽然说不是很难的内容，但能够做到精准理解和熟练使用也是极其难得的，也许随着CSS的发展会有更多有用的单位引进。
对单位斤斤计较是一个优秀CSS使用者应该具备的品质，赶紧去挑选合适的单位去开发你的NB产品吧。
下面的代码用来检测您的浏览器是否支持常用单位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style type="text/css">
body {
padding: 20px;
}
div {
background: #99ff99;
padding: 5px;
margin-bottom: 10px;
white-space: nowrap;
width: 0;
}
div:after {
content: " (supported)";
}
div.fail {
width: 100% !important;
background: #ff6666 !important;
}
div.fail:after {
content: " (NOT supported)";
}
</style>
</head>
<body>
<div id="percentage">50% - percentage</div>
<div id="pixel">400px - pixels (device pixels)</div>
<div id="em">20em - relative unit</div>
<div id="rem">20rem - root em</div>
<div id="vw">15vw - viewport width</div>
<div id="vh">60vh - viewport height</div>
<div id="vmin">60vmin - smaller of vw or vh</div>
<div id="vmax">60vmax - larger of vw or vh</div>
<div id="inch">4in - inches</div>
<div id="cm">20cm - centimeters</div>
<div id="mm">200mm - millimeters</div>
<div id="pt">120pt - points</div>
<div id="pc">40pc - picas</div>
<div id="ex">60ex - x-height</div>
<div id="ch">60ch - based on width of zero (0) character</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
<script>
// 给指定元素设置宽度
var percentage = $("#percentage").css("width", "50%");
// 如果宽度值为0,即不支持，为此元素添加fail类
if (percentage.width() == 0) percentage.addClass("fail");
var pixel = $("#pixel").css("width", "400px");
if (pixel.width() == 0) pixel.addClass("fail");
var em = $("#em").css("width", "20em");
if (em.width() == 0) em.addClass("fail");
var rem = $("#rem").css("width", "20rem");
if (rem.width() == 0) rem.addClass("fail");
var vw = $("#vw").css("width", "15vw");
if (vw.width() == 0) vw.addClass("fail");
var vh = $("#vh").css("width", "60vh");
if (vh.width() == 0) vh.addClass("fail");
var vmin = $("#vmin").css("width", "60vmin");
if (vmin.width() == 0) vmin.addClass("fail");
var vmax = $("#vmax").css("width", "60vmax");
if (vmax.width() == 0) vmax.addClass("fail");
var inch = $("#inch").css("width", "4in");
if (inch.width() == 0) inch.addClass("fail");
var cm = $("#cm").css("width", "20cm");
if (cm.width() == 0) cm.addClass("fail");
var mm = $("#mm").css("width", "200mm");
if (mm.width() == 0) mm.addClass("fail");
var pt = $("#pt").css("width", "120pt");
if (pt.width() == 0) pt.addClass("fail");
var pc = $("#pc").css("width", "40pc");
if (pc.width() == 0) pc.addClass("fail");
var ex = $("#ex").css("width", "60ex");
if (ex.width() == 0) ex.addClass("fail");
var ch = $("#ch").css("width", "60ch");
if (ch.width() == 0) ch.addClass("fail");
</script>
</body>
</html>The above is the detailed content of Example analysis of length unit and width adaptation in CSS. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1672
14
1428
52
1332
25
1276
29
1256
24
How to use bootstrap in vue
Apr 07, 2025 pm 11:33 PM
Using Bootstrap in Vue.js is divided into five steps: Install Bootstrap. Import Bootstrap in main.js. Use the Bootstrap component directly in the template. Optional: Custom style. Optional: Use plug-ins.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
How to insert pictures on bootstrap
Apr 07, 2025 pm 03:30 PM
There are several ways to insert images in Bootstrap: insert images directly, using the HTML img tag. With the Bootstrap image component, you can provide responsive images and more styles. Set the image size, use the img-fluid class to make the image adaptable. Set the border, using the img-bordered class. Set the rounded corners and use the img-rounded class. Set the shadow, use the shadow class. Resize and position the image, using CSS style. Using the background image, use the background-image CSS property.
How to write split lines on bootstrap
Apr 07, 2025 pm 03:12 PM
There are two ways to create a Bootstrap split line: using the tag, which creates a horizontal split line. Use the CSS border property to create custom style split lines.
How to set up the framework for bootstrap
Apr 07, 2025 pm 03:27 PM
To set up the Bootstrap framework, you need to follow these steps: 1. Reference the Bootstrap file via CDN; 2. Download and host the file on your own server; 3. Include the Bootstrap file in HTML; 4. Compile Sass/Less as needed; 5. Import a custom file (optional). Once setup is complete, you can use Bootstrap's grid systems, components, and styles to create responsive websites and applications.
How to resize bootstrap
Apr 07, 2025 pm 03:18 PM
To adjust the size of elements in Bootstrap, you can use the dimension class, which includes: adjusting width: .col-, .w-, .mw-adjust height: .h-, .min-h-, .max-h-
How to use bootstrap button
Apr 07, 2025 pm 03:09 PM
How to use the Bootstrap button? Introduce Bootstrap CSS to create button elements and add Bootstrap button class to add button text
