Water-based: Revealing the secrets of CSS responsive interface design, making content flexible and free, just like the changes of water

Jiangcheng Cheerful Pea: Personal homepage

Personal column :《VUE》《javaScript》

Personal website : “Jiangcheng Cheerful Pea”

The ideal of life is for an ideal life!

Table of Contents

? Column introduction

Article introduction

1. What is

2. Implementation method

Media inquiries

percentage

vw/vh

rem

summary

3. Summary

?Write at the end

? Column Introduction

Welcome to the front-end entry journey! This column is created for readers who are interested in web development and have just started learning front-end. Whether you are a beginner or a developer with some basic knowledge, we will provide you with a systematic and friendly learning platform here. We update it in the form of questions and answers to present you with selected front-end knowledge points and best practices. By explaining concepts in simple and easy-to-understand terms and providing practical examples and exercises, you can gradually build a solid foundation. Whether it is HTML, CSS, JavaScript or the latest front-end frameworks and tools, we will provide you with rich content and practical skills to help you better understand and apply various technologies in front-end development.

At the same time, we will also pay attention to the latest front-end trends and developments. As Web technology continues to evolve, front-end development is also constantly innovating. We will introduce the latest front-end frameworks, tools and technologies in a timely manner so that you can stay at the forefront and keep pace with the times. By mastering the latest front-end technologies, you will be able to become more competitive in the highly competitive field of web development.

Article introduction

1. What is it

Responsive Web design is a web page design layout. The design and development of the page should respond and adjust accordingly according to user behavior and device environment (system platform, screen size, screen orientation, etc.)

The most famous sentence describing a responsive interface is “Content is like water”

As the saying goes, “If you think of the screen as a container, the content is like water.”

Common features of responsive websites:

  • Compatible with PC + tablet + mobile phone at the same time

  • Tab navigation changes to classic drawer navigation when approaching the handheld terminal device

  • The layout of the website will adjust the size and position of modules according to the viewport

2. Implementation method

The basic principle of responsive design is to detect different device screen sizes through media queries for processing. In order to handle mobile terminals, the page header must have a meta statement viewport

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”>

The properties correspond to the following:

  • width=device-width: is the size and width of the adaptive mobile phone screen

  • maximum-scale: is the maximum value of the scaling ratio

  • initial-scale: is the initialization of scaling

  • user-scalable: is the user’s scalable operation

The ways to implement responsive layout are as follows:

  • Media inquiries
  • percentage
  • vw/vh
  • rem

Media Query

More media queries have been added in CSS3 . Just like the if conditional expression, we can set different types of media conditions and give corresponding Qualified media calls the corresponding style sheet

Using @Media query, you can define different styles for different media types, such as:

@media screen and (max-width: 1920px) { ... }

When the viewport is between 375px – 600px, set a specific font size of 18px

@media screen (min-width: 375px) and (max-width: 600px) {
  body {
    font-size: 18px;
  }
}

Through media queries, you can implement responsive layout by writing different styles for devices with different resolutions. For example, we can set different background images for screens with different resolutions.

For example, setting @2x images for small-screen mobile phones and @3x images for large-screen mobile phones can be easily achieved through media queries.

Percent

Use the percentage unit ” % ” to achieve responsive effects

For example, when the width or height of the browser changes, through the percentage unit, the width and height of the components in the browser can change with the change of the browser, thereby achieving a responsive effect.

The percentages of the height and width attributes depend on the width and height of the parent tag, but other box attributes do not completely depend on the parent element:

  • If the top/left and bottom/right of the child element are set as percentages, they will be relative to the height/width of the parent element with direct non-static positioning (default positioning)

  • If the padding of a child element is set as a percentage, whether it is vertical or horizontal, it will be relative to the width of the direct parent element, and has nothing to do with the height of the parent element.

  • If the margin of a child element is set to a percentage, whether it is vertical or horizontal, it will be relative to the width of the direct parent element.

  • The border-radius is different. If you set the border-radius to a percentage, it is relative to its own width.

You can see that each attribute uses a percentage, which will affect the complexity of the layout, so it is not recommended to use percentages to implement responsiveness.

vw/vh

vw represents the width relative to the view window, and vh represents the height relative to the view window. For any level element, when using the vw unit, 1vw is equal to one percent of the view width.

It is very similar to the percentage layout. The difference with % has been mentioned in the previous article, so I will not elaborate on it here.

rem

As mentioned before, rem is the font-size attribute relative to the root element html. By default, the browser font size is 16px, at this time 1rem = 16px

You can use the media query mentioned earlier to change the value of font-size for different device resolutions, as follows:

@media screen and (max-width: 414px) {
  html {
    font size: 18px
  }
}

@media screen and (max-width: 375px) {
  html {
    font-size: 16px
  }
}

@media screen and (max-width: 320px) {
  html {
    font size: 12px
  }
}

In order to more accurately monitor changes in the device’s visible window, we can insert the script tag before css, with the following content:

//Dynamicly set the font size for the root element
function init () {
    // Get the screen width
    var width = document.documentElement.clientWidth
    //Set the font size of the root element. At this time it is 10 equal parts of the width
    document.documentElement.style.fontSize = width / 10 + 'px'
}

//Load the application for the first time and set it up once
init()
// Monitor the timing of the mobile phone rotation event and reset it
window.addEventListener('orientationchange', init)
// Monitor phone window changes and reset
window.addEventListener('resize', init)

No matter how the device’s visible window changes, always set rem to 1/10 of width to achieve percentage layout.

In addition, we can also use the grid layout provided by mainstream UI frameworks, such as element ui and antd to implement responsiveness

Summary

Responsive design implementation usually considers the following aspects:

  • Flexible boxes (including images, tables, videos) and media queries and other technologies
  • Use percentage layout to create a flexible UI with fluid layout, while using media queries to limit the size and content change range of elements.
  • Use relative units to make content adaptive
  • Select breakpoints to achieve different layouts and content display for different breakpoints

3. Summary

The advantages of responsive layout can be seen:

  • Strong flexibility when facing devices with different resolutions
  • Can quickly solve the problem of multi-device display adaptation

shortcoming:

  • Only suitable for department-type websites with uncomplicated layout, information, and framework
  • Compatible with various devices, heavy workload and low efficiency
  • The code is cumbersome, hidden and useless elements will appear, and the loading time will be lengthened.
  • In fact, this is a compromise design solution that is affected by many factors and cannot achieve the best results.
  • To a certain extent, the original layout structure of the website has been changed, which may cause confusion among users.

? Write at the end

Please feel free to give me some advice, comment below or send me a private message. Thank you very much.

? I think a certain part of my design is too cumbersome. Is there a simpler or higher-quality packaging method?

? Think some of my code is too old and can provide new API or the latest syntax?

? Don’t understand some of the content in the article

?Answer some questions in my article

? Think that some interactions and functions need to be optimized, and find bugs

? Want to add new features and have better suggestions for the overall design and appearance?

Finally, thank you for your patience in watching. Now that we are here, click Like and go!