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
Recommend
JavaScript anti-shake and throttling explained
Table of contents Stabilization Throttling Summar...
When catalina.bat is set to UTF-8 in Tomcat, garbled characters appear on the console
1. The catalina.bat must be set to UTF-8. If I do...
Example of Form action and onSubmit
First: action is an attribute of form. HTML5 has d...
How to install nginx in centos7
Install the required environment 1. gcc installat...
Introduction to fourteen cases of SQL database
Data Sheet /* Navicat SQLite Data Transfer Source...
JavaScript countdown to close ads
Using Javascript to implement countdown to close ...
SSH port forwarding to achieve intranet penetration
The machines in our LAN can access the external n...
Detailed explanation of Vue login and logout
Table of contents Login business process Login fu...
Implementing carousel effects with JavaScript
This article shares the specific code for JavaScr...
A Brief Analysis of Patroni in Docker Containers
Table of contents Create an image File Structure ...
How to install and deploy gitlab server on centos7
I am using centos 7 64bit system here. I have tri...
In-depth analysis of MySQL explain usage and results
Preface In daily work, we sometimes run slow quer...
Detailed introduction to nobody user and nologin in Unix/Linux system
What is the nobody user in Unix/Linux systems? 1....
Detailed explanation of MySQL database triggers
Table of contents 1 Introduction 2 Trigger Introd...
Pure HTML and CSS to achieve JD carousel effect
The JD carousel was implemented using pure HTML a...