CSS3 mobile vw+rem method to achieve responsive layout without relying on JS

1. Introduction

(1) Introduction to vw/vh

Before using, let's take a brief look at what vw and rem are and their functions. vw is a new unit in CSS3. It is the abbreviation of "view width". It is defined as dividing the current screen into 100 parts. 1vw is 1% of the screen. The corresponding vh is dividing the height into 100 parts. 1vh is 1% of the screen height. Generally, we often use vw units to complete responsive development.

(2) Introduction to rem

rem is a relative length unit. Relative to the root element (ie html element) font-size calculated value multiples, for example, if your html font is set to 20px, then 1rem in the page is equivalent to 20px, for example:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
html,h1 {
    font-size: 12px;
}
p {
    font-size: 2rem;
}
</style>
</head>
<body>
<h1>I am the text in h1</h1>
<p>I am the text in the p tag, twice as long as the h1 text</p>
</body>
</html>

2. Main text

(1) With the above understanding of these two units, we can complete the responsive layout processing of the mobile terminal through conversion. Here we take the iPhone 6/7/8 as an example, the screen width is 375px.

1vw = 3.75px

(2) Okay, now let’s imagine how many vw is equal to 100px? Some calculation is required here.

100px = 26.6666666vw //Because it is an infinite loop, take 7 decimal places here

(3) So how do we connect rem and vw? Here we write a small case:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css" media="screen">
        html{
            font-size: 26.6666666vw  
        }
        p{
            font-size: 0.2rem;
            width: 2rem;
            height: 1rem;
            background: pink;
            margin: 0 auto;
            line-height: 1rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <P>I am the text in the P tag</P>
</body>
</html>

In the above example, we set the font-size in HTML to 26.6666666vw, which means font-size = 100px, and then combined with the characteristics of rem to achieve the front-end CSS responsive layout

Summary: There are many kinds of front-end responsive layouts, there are also many responsive frameworks for PC, and many frameworks for mobile terminals are also responsive. I think this method is also a relatively easy-to-use method. The font-size in HTML can be set at will, but it is very troublesome to convert it, so many methods have been created. Many editors have automatic conversion functions, such as the sublime editor I use. There are also many online web page conversions on the Internet. Well, the above is my experience of using it. If there are any errors, please correct me!

3. Introduction to other responsive layouts

(1) Flow layout

Flow layout is percentage layout. For example, set the width of the web page body to 80% and the min-width to 960px. Images are processed similarly (width: 100%, max-width is usually set to the size of the image itself to prevent distortion due to stretching).

Layout characteristics: When the screen resolution changes, the size of the elements on the page will change but the layout will not change. [This means that if the screen is too large or too small, the elements will not be displayed properly]

Design method: Use % percentage to define the width, and the height is mostly fixed with px. It can be adjusted according to the real-time size of the viewport and the parent element to adapt to various resolutions as much as possible. It is often used in conjunction with max-width/min-width and other properties to control the size range to avoid being too large or too small to affect reading.

This layout method was used in the early history of Web front-end development to cope with PC screens of different sizes (when the screen sizes did not differ too much), and it is still a common layout method in today's mobile development, but it has obvious disadvantages: the main problem is that if the screen size span is too large, it will not be displayed properly on a screen that is too small or too large relative to its original design. Because the width is defined using % percentage, but the height and text size are mostly fixed using px, the display effect on a large-screen mobile phone will become that some page elements are stretched very long in width, but the height and text size remain the same as before (that is, these things cannot become "fluid"), and the display is very uncoordinated.

(2) Media Inquiries

Media query monitors the current screen width to respond to your corresponding settings. For example, the font size of a 375px screen is 12px, and the font size of a 960px screen is 18px. It is very large to write for a simple page, but it is very convenient for large projects. One feature of media query is that when you zoom from a 375px screen to a 960px screen, the font or image will suddenly enlarge. This is a bad experience, but it doesn't matter in actual use.
Layout features: There will be a layout style under each screen resolution, that is, the position and size of elements will change.

Design method: media query + fluid layout.

Summarize:

1. If you only work on the PC side, then the streaming layout (fixed width) is the best choice;

2. If you are working on a mobile terminal and the design does not require high height and element spacing, then elastic layout (vw) is the best choice, which can be done by adjusting the font-size with a CSS;

3. If PC and mobile need to be compatible and the requirements are very high, then media query is still the best choice, provided that the design is different according to different heights and widths, and the responsive layout is different according to the media query.

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.

<<: Detailed explanation of the execution principle of MySQL kill command

>>: Solve the problem that the directory mounted by docker cannot be read and written