A, rem and vw Profile
1. rem
rem is the relative length unit means relative to the root element (i.e., the html element) multiple font-size (font size).
Browser support: Caniuse
Examples
- If the font-size of the root element 12px
html {
font-size: 12px;
}
h1 {
font-size: 2rem; /* 2 × 12px = 24px */
}
p {
font-size: 1.5rem; /* 1.5 × 12px = 18px */
}
div {
width: 10rem; /* 10 × 12px = 120px */
} - If the font-size of the root element 16px
html {
font-size: 16px;
}
h1 {
font-size: 2rem; /* 2 × 16px = 32px */
}
p {
font-size: 1.5rem; /* 1.5 × 16px = 24px */
}
div {
width: 10rem; /* 10 × 16px = 160px */
} 2. vw
vw is a relative unit of length with respect to the width, the width of the browser window, the browser window is divided into units of 100 vw
Browser support: Caniuse
- Opera Mini does not support this property
Examples
- When the width of the browser window 320px, 1vw = 3.2px
p {
font-size: 5vw; /* 5 × 3.2px = 16px */
}
div {
width: 20vw; /* 20 × 3.2px = 64px*/
}- When the width of the browser window 375px, 1vw = 3.75px
p {
font-size: 5vw; /* 5 × 3.75px = 18.75px */
}
div {
width: 20vw; /* 20 × 3.75px = 75px*/
}Two, rem, and vw binding realize adaptive scaling WEB page
1. The selection criteria and the window width
Example:
In the screen width iPhone 6/7/8 / X is the width of the window as a reference 375px;
at most font-size 15px html element, i.e. basic units of length rem.
html {
font-size: 15px;
}
h1 {
font-size: 2rem; /* 2 × 15px = 30px */
}
p {
font-size: 1.2rem; /* 1.2 × 15px = 18px */
}
div {
width: 10rem; /* 10 × 15px = 150px*/
} Note: html elements font-size should not be too big, nor too small.
When the font-size is too large, its value as a reference rem will lose precision, resulting in large errors.
When the font-size is too small, because many mainstream browsers font-size can not be smaller than 12px, when the font-size smaller than 12px, will show to 12px. At this point, rem units will be calculated with reference to 12px, the entire page will be deviation.
2. html font-size elements using an alternative representation vw
窗口宽度：375px
=> 1vw = 3.75px
=> 15px = ( 15 / 3.75 )vw = 4vw
Thus, html font-size elements can be replaced 4vw
html {
font-size: 4vw;
}
h1 {
font-size: 2rem; /* 2 × 4vw × 3.75px = 30px */
}
p {
font-size: 1.2rem; /* 1.2 × 4vw × 3.75px = 18px */
}
div {
width: 10rem; /* 10 × 4vw × 3.75px = 150px*/
}When the window width is adjusted 320px
1vw = 3.2px
4vw = 4 × 3.2px = 12.8px
html {
font-size: 4vw;
}
h1 {
font-size: 2rem; /* 2 × 4vw × 3.2px = 25.6px */
}
p {
font-size: 1.2rem; /* 1.2 × 4vw × 3.2px = 15.36px */
}
div {
width: 10rem; /* 10 × 4vw × 3.2px = 128px*/
}It is seen, when all units in rem size as the width and length are enlargement and reduction scaling is performed screens.
The important thing, said second time
Note: html elements font-size should not be too big, nor too small.
When the font-size is too large, its value as a reference rem will lose precision, resulting in large errors.
When the font-size is too small, because many mainstream browsers font-size can not be smaller than 12px, when the font-size smaller than 12px, will show to 12px. At this point, rem units will be calculated with reference to 12px, the entire page will be deviation.
3. Set the maximum width and the minimum width of the page
When the page is less than 300px by, not scaled down, when the page is larger than 500px, not like scaling
When the window width 300px
1vw = 3px
4vw = 4 × 3px = 12px
When the window width 500px
1vw = 5px
4vw = 4 × 5px = 20px
@media screen and (max-width: 300px) {
html {
width: 300px;
font-size: 12px;
}
}
@media screen and (min-width: 500px) {
html {
width: 500px;
font-size: 20px;
margin: 0 auto; /* 让窗口水平居中展示 */
}
}Third, the PC is switched depending on the browser and WAP page width
1. When the page width is greater than the threshold value, the PC will automatically switch to the page, when less than the threshold, switch back to the WAP page
WAP pages
<!DOCTYPE html>
<html lang="en">
<head>
<title>WAP页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="wap">
我是WAP页面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
var agent;
var clientWidth = document.body.clientWidth;
console.log(clientWidth);
if (clientWidth < 800) {
agent = 'wap';
} else {
agent = 'pc'
}
if ($('body').attr('id') !== agent) {
location.href = 'pc.html';
}
}
adapt();
window.onresize = function(){
adapt();
};
</script>
</body>
</html>PC page
<!DOCTYPE html>
<html lang="en">
<head>
<title>我是PC页面</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
</head>
<body id="pc">
我是PC页面
<script src="https://mat1.gtimg.com/libs/jquery2/2.2.0/jquery.js"></script>
<script>
function adapt() {
var agent;
var clientWidth = document.body.clientWidth;
console.log(clientWidth);
if (clientWidth < 800) {
agent = 'wap';
} else {
agent = 'pc'
}
if ($('body').attr('id') !== agent) {
location.href = 'wap.html';
}
}
adapt();
window.onresize = function(){
adapt();
};
</script>
</body>
</html>Here's the tip I recommend learning exchange circle: 767 273 102, which is learning from the most basic HTML + CSS + JS [cool special effects, games, plug-in package design patterns] to move the front end of HTML5 project real learning materials We are finishing, given to every small front-end partner. 2019 the latest technology, synchronization and business needs. Friends are inside learning exchanges, there will be a big cow every day to explain the timing of front-end technology!