A brief discussion on size units in CSS
|
The compatibility of browsers is getting better and better. Mobile terminals are basically all webkit-based. Different size/length units of CSS are often used. Here is a summary. Overview Absolute units
Relative units
Operation calc: four arithmetic operations Examples:
h1 {
width: calc(100% - 10px + 2rem);
}
Unit ratio 1in = 2.54cm = 25.4mm = 101.6q = 72pt = 6pc = 96px detailed Absolute units px - Pixel Pixels px are relative to the device display screen resolution.
div { font-size: 12px }
p { text-indent: 24px }pt Points 1 pt = 1/72 inch
div { font-size: 10pt }
p { height: 100pt }pc Picas Twelve-point movable type (used in printing) is equivalent to the size of my country's new No. 4 lead type.
div { font-size: 10pc }
p { height: 10pc }in Inches
div { font-size: 10in }
p { height: 10in }mm Millimeter
div { font-size: 10mm }
p { height: 10mm }cm Centimeter
div { font-size: 10cm }
p { height: 10cm }q Quarter millimeters 1/4 millimeter
div { font-size: 20q }
p { height: 100q }Relative units % Percent Relative to the parent element width
<body>
<div class="parent">
<div class="children"></div>
</div>
</body>
<style>
.parent { width: 100px }
.children { width: 66.6% }
/* The width of children is 66.6px */
</style>
em Element meter Calculates the size based on the document Relative to the font size of the text in the current document object, if the font size is not specified, it is inherited from the parent element, and so on, until the body. If the body is not specified, it is the browser default size.
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2em;
/* 2em === 32px */
}
</style>
rem Root element meter Calculates the size based on the root document ( body/html ) font Relative to the font size of the text in the root document object ( body/html ). If no font size is specified, it will inherit the browser's default font size.
<body>
<div class="element"></div>
</body>
<style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2rem;
/* 2rem === 28px */
}
</style>
ex document character "x" height Relative to the height of the "x" character, usually half the font height, or relative to the browser's default font size if no font size is specified. As for why it is x, I have no idea.
<body>
<div class="x"></div>
</body>
<style>
.x {
height: 1ex;
overflow: hidden;
background: #aaa;
}
</style>
ch The width of the document number "0" Same as above, relative to the width of the number "0".
<body>
<h1>Define a container that is just wide enough to hold 10 zeros:</h1>
<div class="0">0000000000</div>
</body>
<style>
.0 {
width: 10ch;
overflow: hidden;
background: #ccc;
}
</style>
A picture explains:
vh View height / vw View Width - Viewable area Relative to the height and width of the visible area, the visible area is divided equally into 100 units of vh/vw; the visible area refers to the visible area of the screen, not the parent element, and the percentage is relative to the height and width of the nearest parent element that contains it.
<body>
<h1>article title</h1>
<div class="element"></div>
<div class="full-height"></div>
</body>
<style>
.element {
width: 50vw;
height: 80vh;
/* If the screen height is 1000px, the element height is 800px, and the same goes for vw*/
}
.full-height {
height: 100vh;
/* Easily achieve elements with the same height as the screen */
}
h1 {
width: 100vw;
/* Set a title that is the same width as the screen. The title font size will automatically scale according to the width of the browser to achieve the effect of synchronizing the font and viewport size. */
}
</style>
vmin / vmax The smaller/larger size of the width or height of the visible range Assuming the browser width is set to 1200px and the height is set to 800px, 1vmax = 1200/100px = 12px, 1vmin = 800/100px = 8px. If the width is set to 600px and the height is set to 1080px, then 1vmin = 6px, 1vmax = 10.8px. Suppose you want to make an element always visible on the screen:
.box {
height: 100vmin;
width: 100vmin;
}
Suppose you want this element to always fill the entire visible area of the viewport:
.box {
height: 100vmax;
width: 100vmax;
}
Summarize Em and rem are the units we use most often in actual production. We can use them in conjunction with media queries to change the body font size to achieve responsive design. vh, vw, vmin, and vmax can also easily help us control the responsive size, but the actual controllability may not be as good as the former. Let's practice it according to our business needs! The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: HTML validate HTML validation
>>: How to use docker to build redis master-slave
![MySQL slow query operation example analysis [enable, test, confirm, etc.]](/upload/images/67cad8bc206fd.webp)
Recommend
Detailed analysis of the difference between Ref and Reactive in Vue3.0
Table of contents Ref and Reactive Ref Reactive T...
A quick solution to the automatic line break problem of table header in responsive framework
I've been using Bootstrap to develop a websit...
Solution to IDEA not being able to connect to MySQL port number occupation
I can log in to MYSQL normally under the command ...
MySQL table addition, deletion, modification and query basic tutorial
1. Create insert into [table name] (field1, field...
WeChat applet to obtain mobile phone number step record
Preface Recently, I encountered such a problem wh...
What to do if you forget your password in MySQL 5.7.17
1. Add skip-grant-tables to the my.ini file and r...
Disable IE Image Toolbar
I just tried it on IE6, and it does show the toolb...
How to use VUE and Canvas to implement a Thunder Fighter typing game
Today we are going to implement a Thunder Fighter...
Docker configuration Alibaba Cloud image acceleration pull implementation
Today I used docker to pull the image, but the sp...
CSS to implement sprites and font icons
Sprites: In the past, each image resource was an ...
Detailed explanation of MySQL master-slave replication read-write separation construction
MySQL master-slave setup MySQL master-slave repli...
Linux nohup to run programs in the background and view them (nohup and &)
1. Background execution Generally, programs on Li...
Solution to secure-file-priv problem when exporting MySQL data
ERROR 1290 (HY000) : The MySQL server is running ...
Implementation of Docker Compose multi-container deployment
Table of contents 1. WordPress deployment 1. Prep...
Example of building a Jenkins service with Docker
Pull the image root@EricZhou-MateBookProX: docker...