In the ever-growing mobile Internet era, as front-end developers, we must understand and master the adaptation technologies for various mobile display effects. Among the many adaptation schemes, use remand vwlayout are the two most popular and commonly used technologies at present. By using these two technologies reasonably, we can make our web pages show the most superior visual effects on screens of different sizes. At the same time, they also bring greater flexibility and convenience. So, how can we better understand and use these two technologies? Let’s dig into mobile-friendly layouts remand layouts vw.

1. Logical pixels and physical pixels

Both logical and physical pixels are terms that describe the resolution of a computer screen.

Logical pixel : Also known as an independent pixel , it does not represent an actual point on the screen, but an abstract unit used by the system. For example, when programming, we often design layouts based on logical pixels, because logical pixels are stable and consistent, and they can remain unchanged in different devices and resolutions.
Physical pixels : Also known as device pixels , represent actual points on the screen. Each physical pixel consists of one or more sub-pixels (typically red, green and blue sub-pixels) that emit light. The screen resolution is 1920×1080, indicating that the screen width is 1920 physical pixels and the height is 1080 physical pixels.

The relationship between logical pixels and physical pixels is defined by a device pixel ratio (Device Pixel Ratio), which is the ratio of the number of physical pixels to the number of logical pixels. For example, a device pixel ratio of 2 means that a logical pixel equals a 2×2 physical pixel grid.

For example , iPhone 8the screen resolution of is 750×1334, but because the device pixel ratio is 2, so for developers, his screen size becomes 375×667a logical pixel, so that developers can 375×667carry out layout design and layout based on this fixed logical resolution The positioning of the element. Of course, the clarity and detail of the actual display will depend on the number of physical pixels.

Summarized as follows:

Logical pixel : Pixel in CSS, an absolute unit , ensures that the dimensions of elements on different devices are the same.
Physical pixel : the actual pixel of the device screen, relative unit , the physical pixel size is different under different devices.

2. Viewport meta tag

The viewport meta tag ( Viewport Meta Tag) is a version of the HTML <meta> tag that allows web developers to control the size and proportions of the viewport. This is especially important for responsive web design, as it can help ensure that content renders correctly on various devices.

The main uses of the viewport meta tag are:

Build a mobile-friendly site: Use the viewport meta tag to ensure that pages display correctly on mobile devices.
Control the size and zoom of the page: You can set the initial-scale, minimum-scale, and maximum-scale attributes to control the initial zoom level, minimum and maximum zoom level of the page.
Improve user experience: Using the viewport meta tag can give users a better experience when viewing web pages on different devices.

A common viewport meta tag looks like this:

<meta name="viewport" content="width=device-width, initial-scale=1">

name="viewport"This part of the code tells the browser that this is a viewport meta tag.
content="width=device-width, initial-scale=1.0"This part of the code defines the specific behavior of the viewport.
- width=device-widthSet the width of the layout viewport equal to the width of the front of the device (in device-independent pixels), then the page will have the same layout width on various devices.
- initial-scale=1.0Sets the initial scaling factor to 1.0, which means that by default the width of the page is the width of the browser viewport and no scaling will occur.

This tag means to set the width of the viewport equal to the width of the device, and the initial zoom level of the page is 1 .
The main purpose of this code is to ensure that your web pages display at the proper size and proportions on all screens and devices without requiring users to manually zoom or scroll .

The attributes that can be set in the meta tag are as follows:

Attributes	describe
width	The width of the display screen of the device, commonly used values are device-width (representing the width of the device) and 600 and other specific values
height	The height of the display screen of the device, commonly used values are device-height (representing the height of the device) and 800 and other specific values
initial-scale	The initial zoom ratio, that is, the zoom ratio when the webpage is displayed for the first time relative to the viewport, usually set to 1.0
minimum-scale	The minimum scale to which the user is allowed to zoom out, must be a number, the default value is 0.25
maximum-scale	The maximum scale that the user is allowed to zoom in to, must be a number, the default value is 1.6
user-scalable	Whether the user can manually zoom, the value is no means no, yes means yes.

Three, em and rem

1. The basic concept of em and rem

Both em and rem are length units in CSS, which are used to set the font size, height, width and other attributes of elements.

Em is a relative unit , relative to the font size of the parent element. If the font size of the parent element is not specified, the em will be relative to the browser's default font size, which is usually 16px. For example, if the font size of the parent element is 20px, then "1em" is equal to 20px, and "0.5em" is equal to 10px.
rem is a relative unit , similar to em, but rem is relative to the font size of the root element (html), not relative to the font size of the parent element. For example, if the font size of html is 20px, then "1rem" is equal to 20px, and "0.5rem" is equal to 10px.

Code example:

<html>
<head>
<style>
    /* 设置根元素的字体大小为20px */
    html {
      
       font-size: 20px; }
    div {
      
       font-size: 2rem; } /* 2rem = 40px */
    p {
      
       font-size: 2em; } /* 2em 的实际大小取决于其父元素div的字体大小，因此是2*40px=80px */
</style>
</head>
<body>
    <div>
        这段文字的字体大小是2rem，实际大小为40px。
        <p>这段文字的字体大小是2em，实际大小为80px。</p>
    </div>
</body>
</html>

In this example, the font size of the p element is 2em. Because the font size of its parent div is 40px (2rem), 2em is actually equal to 80px. Therefore, using em and rem as length units can be convenient for relative layout and responsive design.

The advantage of using em and rem is that it can make web pages display better on different devices and browsers, and can easily implement responsive design.

2. vscode plugin px to rem

px to remIt is recommended to use plug-ins in vscode
insert image description here
pxand remboth are length units in CSS styles. On different devices and displays, pxthe size of the is fixed, while remthe size of the is relative and can root embe scaled according to the root font size ( ) of the web page. In responsive design, in order to enable the layout and elements of web pages to be displayed adaptively on devices of different sizes, it is usually used remas a unit of length.

The VSCode plug-in can help you automatically convert units to units px to remwhen writing CSS styles , so that you don't need to manually calculate and convert, which improves the efficiency of programming. You only need to define the root font size in the settings, and the plugin will automatically convert the value you enter into the corresponding value according to this size.pxrempxrem

Configure the conversion rate

Configure the conversion unit here, that is, how much px is equal to 1rem, generally set to 100 for easy calculation.
The conversion shortcut key alt + z is also very simple to use. Select the code

you wrote and press it to convert it to rem.pxalt+z

four, vw

1. vw basic concept

Vw is a relative unit used in CSS , the full name is viewport width, that is, viewport width. 1vw is equal to 1% of the viewport width.

In responsive design, the vw unit is widely used to create layouts that work well on different screen sizes and resolutions. Because they are relative to the viewport size and not fixed like pixels, elements using vw units can automatically resize when the viewport changes size to maintain their relative position and size within the viewport.

For example, if you set an element's width to 50vw, the element's width will always be 50% of the viewport's width, regardless of the viewport's width. This makes it possible to keep the layout consistent across different devices and screen sizes.

2. Convert px to vw

In different devices and viewports, the size of 1vw represents 1% of the viewport width, and the vw unit can help create more flexible and adaptable layouts.

Converting px to vw can be calculated manually, or it can be automatically converted by online tools or plug-ins.

Manual calculation:
The conversion formula is: 1vw = 100 / width of design draft (px).
So converting px to vw is: element width (px) * (100 / design draft width (px)) = element width (vw). For example, if the width of the design draft is 750px, then the element width of 20px can be converted to: 20 * (100 / 750) = 2.667vw.
Online Tools:
Online unit conversion tools such as PX to VW/VH conversion tools are available.
Plug-ins:
Some front-end development tools and IDEs provide plug-ins to support automatic conversion. For example, VSCode has plug-ins such as px to vw.

This usage method is similar to px-to-rem, so I won't go into details.

It should be noted that the vw unit may not be perfectly supported on all browsers and devices, and you can choose to use it according to actual needs.

3. Practical application

When developing pages on the mobile side, vw (Viewport-Width) is a unit relative to the width of the viewport, which can be used to implement responsive layout. The following is a complete case, the specific steps are as follows:

Create an HTML file and import the CSS file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>使用vw实现响应式布局</title>
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <h1>使用vw实现响应式布局</h1>
  <p>这是一段文字，会随着屏幕大小的变化而改变大小。</p>
</body>
</html>

In CSS files, use vw to define the size and position of elements.

h1 {
    
    
  font-size: 6vw;
  margin-top: 3vw;
}

p {
    
    
  font-size: 4vw;
  line-height: 6vw;
}

In the above code, the font size and margin-top of h1 both use vw as the unit, which means that their size is proportional to the width of the viewport. The font size and line height of the p element also use the vw unit, so that the adaptation of text size and line spacing can be realized under different screen sizes.

Check the page effect in the browser.

Open the HTML file in the browser, you can see that the page will automatically adapt to the screen size, and the text size and line spacing will also be scaled proportionally. If you view it on a PC, you can try to change the size of the browser window to observe the effect.

Through the above case, you can see that using the vw unit can easily achieve responsive layout without using complex CSS media queries. But it should be noted that when using the vw unit, you need to set an appropriate ratio according to the specific situation, otherwise it may cause poor display effect.

Five, pxcook pixel conversion tool

pxcook is a design tool, mainly aimed at designers and front-end developers, and can quickly generate css style code. It can do the following operations:

It can extract the color, font, size, spacing and other attributes in the UI design draft.
It can cut the design draft directly into the dialogue, which greatly reduces the communication time between the design and the front end.
The pxcook tool can export design specifications that both designers and developers can understand, making communication between teams more efficient.
It provides global and unified analysis of design drafts, quickly generates theme color palettes and extracts font elements.
Supports analysis of design drafts for multiple platforms and multiple design tools (PS/Sketch/Blue Lake/drag and drop pictures).

pxCook download address: https://www.fancynode.com.cn/pxcook

insert image description here

6. Summary

In the mobile terminal adaptation layout scheme, both rem and vw are worth recommending. Using rem can adapt relative units according to the font size of the root element, while vw can adapt according to the width of the viewport. When choosing which solution to use, you need to choose according to the specific conditions of the project. Whether you use rem or vw, you need to fully consider the differences in various screen sizes and device pixel densities to achieve the best adaptation effect. I hope this article can provide you with some help and let you have a deeper understanding of the relevant knowledge of mobile terminal adaptation layout.

Mobile terminal adaptation layout rem and vw