The front-end page needs to be compatible with devices of different resolutions, and the effect presented on pages of different devices is often not ideal.

The main solutions are as follows:

  • Set different styles for different browser users
  • Adjust the page dynamically using JS
  • Using a front-end framework

Set different styles for different browser users

Developers need to provide different CSS styles for different resolutions. The purpose can be achieved in the following two ways:

  • Write a set of style files for each resolution and determine which resolution file to refer to during page initialization
  • use@mediaThe query

The first way, by comparison, is very complicated. Given the vast variety of devices and resolution types available to the public, it’s impossible for developers to write one and maintain it. It is not recommended.

@media queries are even more advantageous. With @media queries, you can define different styles for different media types. @Media can set different styles for different screen sizes, especially if you need to set up responsive pages.

Let’s say we need a black web background with a width below 1024 resolution.

The code is as follows:

@media screen and (max-width: 1024px) {
    body {
        backgroundThe front-end page is implemented across devices (platforms) through a browser, with different devices (platforms) having their own resolutions. > Only when these devices (platforms) are compatible can we develop a priority front end page. < p style = "max-width: 100%; box-sizing: border-box! Important; ## Common solutions: - Switch styles for different viewport widths - change styles for different viewport widths through JavaScript - responsive solution ## Switch styles for different viewport widths means to provide multiple styles for different viewport widths. There are two main ways to do this: - Provide multiple sets of style files, switch style file references - through '@media' (media query) The first way is feasible, but very complicated. Users use a variety of devices (platforms), each of which has to provide a set of styles, which are difficult and difficult to maintain. ** is not recommended. It is better to use '@media' (media query), which allows you to switch styles based on viewport width directly in the style code. For example, we need the width1024Enable black page background below resolution. ' 'CSS @media screen and (max-width:1024px) { body { background: black; }}Copy the code

Isn’t it much easier? For example, we need to enable a black background above 1920 width resolution. The code is as follows:

@media screen and (min-width: 1920px) {
    body {
        background: black; }}Copy the code

If we were to connect them. The code is as follows:

@media screen and (max-width: 1024px) and (min-width: 1920px) {
    body {
        background: black; }}Copy the code

This allows you to use a black background for Windows up to 1024 resolution or up to 1920 resolution. Haha, it’s that simple. Here’s a list of device resolutions if you’re interested.

Reference: Css3@media Media enquiries

Change styles to fit viewport width through JavaScript

With this approach, we often control the page indirectly by controlling the class. Manipulating the DOM directly will inevitably result in page redrawing and possibly page rearrangement. Performance can be stressful, and resolution is not recommended. But depending on your business needs, it’s still necessary to use JS to control DOM rendering, because that’s what it’s all about.

Because JS can directly obtain the screen width/height/resolution. This can be done in the following ways:

  • By controlling theclassIndirect control
  • By changing the elementsstyleAttribute control

Still achieve a width below 1024 resolution or a width above 1920 resolution using a black background. Indirect control via class control, code as follows:

.black {
    background: black;
}
Copy the code
const screenw = screen.width;
if (screenw < 1366 || screenw > 1920) {
    document.body.className = 'black';
}
Copy the code

By changing the element’s style attribute, the code looks like this:

const screenw = screen.width;
if (screenw < 1366 || screenw > 1920) {
    document.body.style.backgroundColor = 'black';
}
Copy the code

Resources: JavaScript HTML DOM elements

Responsive solutions

There are five main ways to implement responsive layout:

  • Percentage layout (%)
  • @media(Media Enquiries)
  • Rem way
  • Vw way
  • Flex Flex layout

Percentage layout (%)

When the width or height of the browser changes, the percentage unit can be used to make the width and height of the browser elements change with the browser, so as to achieve a responsive effect.

The percentage of the height and width attributes depends on the width and height of the parent tag. But the padding, border, margin, etc.?

The height of the top and bottom of the child elements relative to the parent element of the direct non-static positioning (the default positioning), if the percentage is set. Similarly, the left and right of child elements, if set to percentages, are the width of the parent element relative to the direct non-static positioning (the default positioning).

The padding of the child element, if set to a percentage, is either vertical or horizontal relative to the width of the parent element, regardless of the height of the parent element.

The margin of the child element, if set to a percentage, is relative to the width of the immediate parent element, both vertically and horizontally.

Border-radius is different. If border-radius is set to percentage, it is the width relative to the radius itself.

Disadvantages: difficult to calculate, if we want to define the width and height of an element, according to the design draft, must be converted into percentage units. If percentages are used in each attribute, the attribute relative to the parent element is not unique. The use of percentage units tends to complicate layout issues and is not recommended.

@media(Media Enquiries)

With @media media queries, different styles can be defined for different media types, especially for responsive pages, and multiple styles can be written for different screen sizes to achieve adaptive effects.

In the previous “different styles for different browser users” examples.

Cons: Multiple sets of style code can be cumbersome if too many styles need to be changed as the browser resizes.

Rem way

Rem units are HTML elements relative to font size, also known as root elements. By default, the font size of HTML elements is 20px. So 1rem is equal to 20px.

Using REM and media query, give it a different font size when the resolution changes.


body {
   font-size: 40px;
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 20px; }}div {
    width: 20rem;
}
Copy the code

In the code above, the div width shrinks to half its original size when the resolution is less than 1024px.

Vw way

Css3 introduced a new unit vw/vh related to the view window, where VW represents the width relative to the view window and vh represents the height relative to the view window. For any level element, 1vw is equal to 1/100th of the view width in vw units.

Similar to the percentage layout, but more useful.

Flex Flex layout

Elastic layout is a very convenient way to achieve a responsive layout that only relies on CSS styles. It is also the most used method to achieve a responsive layout.

I won’t expand it here, but I’ll give you a source.

Resources: Learn about the CSS3 elastic layout

conclusion

Finally, provide a solution to scale the page as a whole, but also adapt to different devices (platforms), do not expand. Device (platform) compatibility issues are common. Please forgive me if I don’t speak well.

}
Copy the code

}

Isn't it a lot easier? For example, we need to use a black background above 1920 width resolution. CSS @media screen and (min-width: 1920px) {body {background: black; }}Copy the code

So now let’s connect them. The code is as follows:

@media screen and (max-width: 1024px) and (min-width: 1920px) {
    body {
        background: black; }}Copy the code

If the width is below 1024 resolution or above 1920 resolution, use a black background. Indeed, if you want to know more about the current resolution, click here.

Reference: Css3@media query

Adjust the page dynamically using JS

With this approach, we often control the page indirectly by controlling the class. Manipulating the DOM directly will inevitably result in page redrawing and possibly page rearrangement. Performance can be stressful, and resolution is not recommended. But depending on your business needs, it’s still necessary to use JS to control DOM rendering, because that’s what it’s all about.

Because JS can directly obtain the screen width/height/resolution. This can be done in the following ways:

  • By controlling theclassIndirect control
  • By changing the elementsstyleAttribute control

Still achieve a width below 1024 resolution or a width above 1920 resolution using a black background. Indirect control via class control, code as follows:

.black {
    background: black;
}
Copy the code
const screenw = screen.width;
if (screenw < 1366 || screenw > 1920) {
    document.body.className = 'black';
}
Copy the code

By changing the element’s style attribute, the code looks like this:

const screenw = screen.width;
if (screenw < 1366 || screenw > 1920) {
    document.body.style.backgroundColor = 'black';
}
Copy the code

Resources: JavaScript HTML DOM elements

Using a front-end framework

The framework provides a better customer experience by enabling responsive layouts. There are five ways to implement a responsive layout:

  • Percentage layout (%)
  • Media Query Layout
  • Rem responsive layout
  • Vw responsive layout
  • Flex Flex layout

Percentage layout (%)

When the width or height of the browser changes, the percentage unit can be used to make the width and height of the browser elements change with the browser, so as to achieve a responsive effect.

The percentage of the height and width attributes depends on the width and height of the parent tag. But the padding, border, margin, etc.?

The height of the top and bottom of the child elements relative to the parent element of the direct non-static positioning (the default positioning), if the percentage is set. Similarly, the left and right of child elements, if set to percentages, are the width of the parent element relative to the direct non-static positioning (the default positioning).

The padding of the child element, if set to a percentage, is either vertical or horizontal relative to the width of the parent element, regardless of the height of the parent element.

The margin of the child element, if set to a percentage, is relative to the width of the immediate parent element, both vertically and horizontally.

Border-radius is different. If border-radius is set to percentage, it is the width relative to the radius itself.

Disadvantages: difficult to calculate, if we want to define the width and height of an element, according to the design draft, must be converted into percentage units. If percentages are used in each attribute, the attribute relative to the parent element is not unique. The use of percentage units tends to complicate layout issues and is not recommended.

Media Query Layout

With @media media queries, different styles can be defined for different media types, especially for responsive pages, and multiple styles can be written for different screen sizes to achieve adaptive effects.

In the previous “different styles for different browser users” examples.

Cons: Multiple sets of style code can be cumbersome if too many styles need to be changed as the browser resizes.

Rem responsive layout

Rem units are HTML elements relative to font size, also known as root elements. By default, the font size of HTML elements is 20px. So 1rem is equal to 20px.

Using REM and media query, give it a different font size when the resolution changes.


body {
   font-size: 40px;
}

@media screen and (max-width: 1024px) {
    body {
        font-size: 20px; }}div {
    width: 20rem;
}
Copy the code

In the code above, the div width shrinks to half its original size when the resolution is less than 1024px.

Vw responsive layout

Css3 introduced a new unit vw/vh related to the view window, where VW represents the width relative to the view window and vh represents the height relative to the view window. For any level element, 1vw is equal to 1/100th of the view width in vw units.

Similar to the percentage layout, but more useful.

Flex Flex layout

Elastic layout is a very convenient way to achieve a responsive layout that only relies on CSS styles. It is also the most used method to achieve a responsive layout.

I won’t expand it here, but I’ll give you a source.

Resources: Learn about the CSS3 elastic layout

conclusion

In fact, there is another way, is the whole page scale to adapt to different resolutions. This is also very common and I won’t expand it. Resolution issues are very common, and I prefer to solve them in a responsive way.