A few things you need to know about responsive layout

1. Introduction

Responsive Web design allows a website to adapt to multiple devices and multiple screens at the same time, allowing the layout and functions of the website to change according to the user's usage environment (screen size, input method, device/browser capabilities). This article mainly introduces some important but easily overlooked knowledge points of responsive layout. If you want to read more high-quality articles, please click on the GitHub blog

2. Viewport

The viewport commonly mentioned in mobile front-end is the area in the browser used to present web pages. The viewport is usually not equal to the screen size, especially if the browser window can be resized . There are differences between the viewports on mobile phones and PCs. The viewport width on PCs is equal to the resolution, while the viewport width on mobile devices has nothing to do with the resolution. The default width value is specified by the device manufacturer. iOS and Android basically set the viewport resolution to 980px.

1. Why should the mobile viewport be set to 980px?

At that time, Jobs imagined: If the iPhone becomes popular in the market, but various websites have not had time to create mobile-friendly web pages, then users will have to use their mobile phones to access the computer version of the web pages. How can they make the pages on the large screen readable using a small screen ? Boss Joe wanted to fix a viewport width for mobile phones, making the viewport width of mobile phones equal to the page width of most PC web pages in the world, which is 980px. In this way, when you use your mobile phone to access the computer version of the web page, there is no blank space next to it. However, after the page is zoomed, the text will become very small, and users need to manually zoom in and out to see it clearly, which is a very poor experience.

2. Constrain the viewport

To solve the previous problem, you can add the following line of code to the web page:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

width=device-width The viewport is the device width (a width set by humans) //If not set, the default is 980px
initial-scale=1.0 The initial viewport size is 1.0 maximum-scale=1.0 The maximum multiple is 1.0 user-scalable=0 Scaling the viewport is not allowed

The viewport tag tells the browser how to render the web page. Here, the tag means: render the web page content according to the device width (device-width). In fact, if you take a look at the effect on a device that supports this tag, you will understand.

Not bad! User experience is greatly improved! ! !
At this time, if you use document.documentElement.clientWidth to test the browser screen width, you will find that the current viewport width is equal to the width of the mobile phone screen, and the approximate viewport width is between 320 and 480 (when the phone is used vertically).
The size of this viewport is set by the mobile phone manufacturer, which can ensure that our text, for example 16px, is clear and of the right size in this viewport. Therefore, the constrained viewport of a large-screen phone is greater than the constrained viewport of a small-screen phone. This will ensure that our web pages can use px to write font size and line height .
It should be noted that the viewport width after constraint is not its own resolution! ! The resolution of each mobile phone is much larger than its viewport width!
The most important sentence: front-end development engineers don’t care about the resolution of the mobile phone at all, we only care about the viewport.

3. Pictures

People often say “a picture is worth a thousand words”, and it’s true. No matter how much text we put on our webpage about muffins, it will not be as attractive as the pictures. Next, we will add a picture of a pancake (2000 pixels wide) at the top of the page, which will have a similar effect to the large title picture that entices users to look down.

Wow, that’s a really big image. It makes the whole page look unbalanced and overflows horizontally. No, this problem must be solved. We can use CSS to give the image a fixed width, but the problem is that we want it to scale automatically on screens of different sizes . For example, the iPhone screen width in our example is 320 pixels. If we set the image to 320 pixels wide, what happens when the iPhone screen is rotated? At this time, 320 pixels becomes 480 pixels.
The solution is simple. Just one line of CSS code will make the image automatically scale with the container width:

img {
 max-width: 100%;
}

Going back to the phone and refreshing the page, the result is more in line with expectations.
The max-width rule is declared here to ensure that all images are displayed at a maximum of 100% of their own size (i.e., they can only be displayed as large as themselves). At this time, if the element containing the image (such as the body or div containing the image) is smaller than the image's intrinsic width, the image will scale to fill the maximum available space .

Why not use width:100%?

To achieve automatic scaling of images, you can also use the more general width attribute, such as width:100%. However, this rule does not apply here. Because this rule will cause it to appear as wide as its container. In cases where the container is much wider than the image, the image will be stretched unnecessarily.

4. Mobile browser kernel

On the mobile side, there are only four independent browser kernels, namely Microsoft's Trident, Firefox's Gecko, the open source kernel Webkit, and Opera's Presto.
Currently, Microsoft's Trident is mainly used as a built-in browser for WP7 and 8 systems on mobile terminals. Opera's Presto kernel mainly includes Opera Mobile, Opera Mini, Opera browser and Opera HD Beta version. The application scope of the Webkit kernel is relatively wide. Android native browser, Apple's Safari, and Google Chrome (used by Android 4.0) are all developed based on the Webkit open source kernel.

Compatible prefixes:
1-ms-
2 -moz-
3 -o-
4 -webkit-

Browser market share of Chinese users:

UC, Android built-in, Chrome, Safari, and QQ Browser are all based on webkit kernels, and as can be seen from the figure, they account for the vast majority of the market share.
So you must take good care of -webkit-. Some companies simply only write compatibility with -webkit- and do not write other compatibility such as -ms-.

5. Flow layout

Percentage layout is also called flow layout and flexible box layout. The mobile web page has no center page, it is filled up on both sides.
The properties that can be set in percentage are width, height, padding, and margin. Other properties such as border and font-size cannot be set using percentages.

• If width is written as a percentage, it refers to the percentage of the parent element's width.
• If height is written as a percentage, it refers to the percentage of the parent element's height.
• If padding is written in percentage, it refers to the percentage of the parent element's width, whether it is horizontal padding or vertical padding.
• If margin is written in percentage, it refers to the percentage of the parent element's width, whether it is horizontal margin or vertical margin.
• You cannot use percentages to set the border width.
  

Let's look at an example:

	div{
		width:200px;
		height:300px;
		padding:10px;
	}
	div p{
		width:50%;
		height:50%;
		padding:10%;   
	}
    What is the actual width of p at this time? 

At this time, the actual width of p is 140px*190px

VI. Media Inquiries

1. Why does responsive web design need media queries?

CSS3 media queries allow us to apply specific CSS styles to web pages based on specific device capabilities or conditions . Without media queries, it would be impossible to significantly modify the appearance of a web page using CSS alone. This module allows us to write CSS rules in advance that adapt to many unpredictable factors, such as horizontal or vertical screen orientation, large or small viewports, and so on. Although flexible layout allows the design to adapt to more scenarios, including screens of certain sizes, it is sometimes not enough because we also need to make more detailed adjustments to the layout. Media queries make this possible, which are the equivalent of basic conditional logic in CSS.

2. Media query syntax

The first rule we write outside of the media query is the “base” style that applies to any device. On this basis, we gradually add different visual effects and functions for devices with different viewports and capabilities.

body {
    background-color: grey;
 } 
@media screen and (min-width:1200px) {
    body{
        background-color: pink;
	}
}
 @media screen and (min-width:700px) and (max-width:1200px) {
    body{
	background-color: blue;
	}
}
@media screen and (max-width:700px) {
    body{
	background-color: orange;
        }
}

@media represents media query, which queries what device is currently viewing this web page and its width. Screen means that the device for viewing this webpage is a monitor, not a hearing device for the disabled or a printer. Use the and symbol to list all the possibilities.
Note: Media queries can only wrap selectors, not k:v pairs.
IE6, 7, and 8 do not support media queries. In order to prevent some mobile browsers from not supporting media queries, do not put all selectors in media queries.

7. Rem responsive layout

rem responsive layout idea

• Generally, you should not set a specific width for an element, but you can set a specific width value for some small icons.
• The height value can be set to a fixed value. We will strictly write the size of the design draft.
• All fixed values ​​are set in REM units (first set a benchmark value in HTML: the corresponding ratio of PX and REM, then get the PX value on the rendering, and convert it to REM value when laying out)
• JS gets the actual screen width, divides it by the width of the design draft, calculates the ratio, and resets the previous benchmark value according to the ratio, so that the project can adapt to the mobile terminal
  

What is rem and how does it differ from em?

rem: The style values ​​of the REM units of the elements in the current page are dynamically calculated based on the font-size value of the HTML element.
em: Indicates a multiple of the parent element's font size. (Special case: in the text-indent attribute, it indicates the text width)

  body →font-size:20px;
   <div class="box1"> → font-size:2em;
	box1
	  <div class="box2"> → font-size:2em;
		box2
	    <div class="box3"> → font-size:2em;
	    	box3
	    </div>
	 </div>
  </div> 

When em is used as the unit, the font-size property is calculated and inherited, and box1 is calculated to be 40px. Then box2 and box3 inside inherit 40px. The em unit can not only be used to set font size, but also to set any box model properties, such as width, height, padding, margin, border
One advantage of rem is that it can be used with media queries to achieve responsive layout:

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

Application Scenarios

If the H5 page we made is only accessed on mobile devices, this is because REM is not compatible with lower versions of browsers. If the mobile and PC terminals share a set of codes, it is recommended to use flow layout.

How to make a REM responsive layout

1. Get the PSD design from the UI designer, and then set a font-size value for HTML in the style. We usually set a value that is convenient for later calculations, for example: 100px

html{
font-size:100px; //1rem=100px
}

2. Write the page and the style <br /> First, write the style according to the size of the design draft. Then, when writing the style value, you need to divide the pixel value by 100 to calculate the corresponding REM value.
It is worth noting that in real projects, we generally do not write a fixed value for the width of the outer box. Following the idea of ​​flow layout, we use percentages to layout.

margin:0 0.2rem
height:3rem;

3. Calculate the font-size value of our HTML based on the current screen width and the width of the design draft <br /> For example: the width of the design draft is 640px, and one of the parts is a slideshow, which is 600*300 in size. In the style, set a font-size value of 100px for HTML, then the slideshow size should be 6rem×3rem. If the mobile phone screen width is 375px, how much should its font-size be set to.

375/640*100->fontsize=58.59375//The slideshow can adapt to the size of the mobile phone screen

Based on the ratio of the current screen width to the design draft width, dynamically calculate what the fontsize value should be at the current width. If the fontsize value changes, the values ​​of all previously set REM units will automatically increase or decrease accordingly . This can be achieved with the following code:

<script>
~function(){
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW;
document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>

But if the current screen width is larger than the design width, the image will be stretched and distorted, so the above code needs to be slightly modified:

//html part <section id="main">
<div class="box"></div>
</section>
//js part <script>
~function(){
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW;
var oMain = document.getElementById('main');
if(winW>desW){
oMain.style.width=desW+"px";
oMain.style.margin="0 auto";
return;
}
document.documentElement.style.fontSize=ratio*100+"px";
}();
</script>

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.