You have to know a few things about reactive layout

Time:2019-11-8

I. Preface

Responsive web design allows a website to adapt to multiple devices and screens at the same time, and allows the layout and functions of the website to change with the user’s use environment (screen size, input method, device / browser capabilities). This paper mainly introduces some knowledge points which are easy to be ignored but very important in reactive layout.If you want to read more excellent articles, please jab GitHub blog

Two, viewport

The viewport in the mobile front-end is the area used to render web pages in the browser. The viewport is usually not equal to the screen size, especially if you can zoom the browser window。 There is a difference between the viewport on the mobile phone and the one on the PC. the width of the viewport on the PC is equal to the resolution, while the width of the viewport on the mobile phone is not related to the resolution. The default value of the width is specified by the device manufacturer. IOS and Android basically set the viewport resolution to 980px.

1. Why is the viewing port set to 980px?

In that year, jobs imagined that if Apple mobile phone became popular in the market, but there was no time to create mobile pages for various websites, users would have to use their mobile phones to access the computer version of the web pages,How to use small screen to access large screen pages is also readable? Joe wants to fix a viewport width for the mobile phone, so that the viewport width of the mobile phone is equal to the width of the center 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 zooms, the text will become very small. Users need to manually zoom in and out to see clearly. The experience is very poor.
 

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 width of the device (that is, the width set by the user). // if it is not set, the default value is 980px
Initial scale = 1.0 the initial viewport size is 1.0 times
Maximum scale = 1.0 the maximum multiple is 1.0 times
User scalable = 0 do not allow viewport scaling

The label for this viewport tells the browser how to render the web page. In this case, the meaning of the tag is to render the web content according to the device width. In fact, show you the effect on the device that supports this tag, and you’ll see.

约束视口后

Not bad! User experience 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 phone screen, and the approximate viewport width is between 320-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, such as 16px, is clear and just the right size in its own viewport. thereforeConstraint viewport of large screen mobile phone > constraint viewport of small screen mobile phone. This can ensure that our web page can use PX to write numbers and line heights
It should be noted that the viewport width after constraint is not its own resolution!! The resolution of each cell phone is much larger than the width of its own viewport!
The most important sentence: the front-end development engineer doesn’t care about the resolution of the mobile phone at all, we only care about the viewport.

Three, picture

People often say that “a picture is worth a thousand words”, which is true. No matter how many words about muffins we have on our website, there are no pictures that are attractive. Next, we will add a picture of muffins (2000 pixels wide) at the top of the page. The effect is similar to the big picture that lures users to look down.

添加图片后

Wow, it’s such a big picture. It makes the whole web page look unbalanced and overflows horizontally. No, we must solve the problem. You can use CSS to specify a fixed width for a picture,But the problem is that we want it to scale automatically on screens of different sizes。 For example, the iPhone screen in our example is 320 pixels wide. If we set the picture to 320 pixels wide, what happens when the iPhone screen rotates? At this point, 320 pixels becomes 480 pixels.
The solution is simple, as long as a line of CSS code can make the picture automatically scale with the container width:


img {
 max-width: 100%;
} 

Go back to the phone, refresh the page, the result is more in line with expectations.
The declaration of the max width rule here is to ensure that all pictures are displayed as 100% of their own maximum (that is, the maximum can only be displayed as their own size).In this case, if the element containing the picture (such as the body or div containing the picture) is smaller than the inherent width of the picture, the picture will be zoomed to occupy the maximum available space

Why not use width: 100%?

To achieve automatic image zooming, you can also use more general width attributes, such as width: 100%. However, this rule does not apply here. Because this rule causes it to appear as wide as its container.When the container is much wider than the picture, the picture will be unnecessarily stretched.

IV. mobile browser core

On the mobile side, there are only four independent browser cores, namely Microsoft’s trident, Firefox’s gecko, open-source kernel WebKit and opera’s presto.
At present, Microsoft’s trident is mainly built-in browser of WP7 and 8 system on mobile terminal. Opera’s Presto kernel mainly includes Opera Mobile, Opera Mini, oppon browser and oppon HD beta.WebKit kernel is widely used. Android native browser, Apple’s Safari and Google Chrome (Android 4.0) are all developed based on WebKit open-source kernel.

Compatible prefix:
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 WebKit kernels, accounting for the majority of the market share from the graph.
So be sure to serve WebKit Some companies are simply compatible with – WebKit -, while others, such as – MS -, are not.

V. flow layout

Percentage layout is also called flow layout and elastic box layout. The mobile web page has no forum, and it’s full around.
The attributes that percentage can set are width, height, padding and margin. Other attributes such as border and font size cannot be set with percentage.

  • If you write width as a percentage, it refers to the percentage of the parent element width.
  • If you write height as a percentage, it refers to the percentage of the parent element height.
  • If you write padding as a percentage, it refers to the percentage of the parent element width, whether it is horizontal or vertical padding.
  • If you write margin as a percentage, it refers to the percentage of the parent element width, whether it is a horizontal margin or a vertical margin.
  • The width of the border cannot be written as a percentage
     

Let’s take an example:

div{
		width:200px;
		height:300px;
		padding:10px;
	}
	div p{
		width:50%;
		height:50%;
		padding:10%;   
	}
    What is the true width of P?

p的盒模型图

At this time, the true width of P is 140px * 190px

Vi. media query

1. Why responsive web design needs media query

CSS3 media query enables us to apply specific CSS styles to web pages based on specific device capabilities or conditions。 If there is no media query, CSS alone can not greatly change the appearance of the web page. This module allows us to write CSS rules that adapt to many unpredictable factors in advance, such as horizontal or vertical screen direction, viewport or large or small and so on. Although flexible layout can make the design adapt to more scenes, including some sizes of screens, sometimes it is not enough, because we still need to make more detailed adjustments to the layout. Media query makes this possible, which is equivalent to the basic conditional logic in CSS.

2. Media query syntax

The first rule we write outside of media queries is the “basic” style, which applies to any device. On this basis, we will gradually add different visual effects and functions for devices with different views 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;
        }
}

Among them, @ media means media query. Query what is the device of this web page and what is its width. Screen said the device to see the web page is a monitor, not a hearing device for the disabled or a printer. All possibilities are listed with the and symbol.
It should be noted that:Media queries can only package selectors, not k: V pairs.
IE6, 7 and 8 do not support media query. To prevent some browsers on the mobile phone from not supporting media query, do not put all selectors in media query.

VII. REM responsive layout

REM responsive layout idea

  • Generally, do not set specific width for elements, but for some small icons, you can set specific width values
  • The height value can be set as a fixed value. We can write exactly how large the design draft is
  • All the set fixed values are in rem (first, set a benchmark value in HTML: the corresponding proportion of PX and REM, then get PX value on the rendering, and convert to REM value when layout)
  • JS obtains the width of the real screen, divides it by the width of the design draft, calculates the scale, and resets the previous benchmark value according to the scale, so that the project can be adaptive at the mobile end
     

What is REM and how it differs from EM

REM: the style value of the REM unit of the element in the current page is dynamically calculated based on the font size value of the HTML element
Em: multiple representing the font size of the parent element. (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 the unit, font size attribute is inherited after calculation, and box1 is calculated as 40px. Then the box2 and box3 in it inherit 40px.The EM unit can not only be used to set the font size, but also the properties of any box model, such as width, height, padding, margin, border
One advantage of REM is that it can cooperate with media query 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 scenario

If the H5 page we make is only accessed on the mobile side, this is because rem is not compatible with the browser of the lower version. If the mobile terminal and the PC terminal share a common set of code, it is recommended to use streaming layout.

How to make a REM responsive layout

1. Get PSD design draft from UI designer, and then set a font size value for HTML in the style. We usually set a value convenient for later calculation, such as 100px


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

2. Write page and style
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’s worth noting that in real projects, we usually don’t write fixed values for the width of the outer box. We use the flow layout method, and we use the percentage layout method


margin:0  0.2rem
height:3rem;

3. Calculate the font size value of our HTML according to the width of the current screen and the width of the design draft
For example: the width of the design draft is 640px, and one part of it is the carousel chart, whose size is 600 * 300. Set a value of font size of 100px for HTML in the style, the size of the carousel chart should be 6rem × 3rem, and if the screen width of the mobile phone is 375px, how much should its font size be set.

375 / 640 * 100 - > fontsize = 58.59375 // at this time, the carousel map can adapt to the screen size of the mobile phone

According to the proportion of the current screen width and the design draft width, dynamically calculate the fontsize value under the current width. If the fontsize value changes, all the previously set REM units will automatically increase or decrease with it。 It can be realized by 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 draft width, the picture will be stretched and distorted, so the above code needs to be slightly modified:

Part //html
<section id="main">
<div class="box"></div>
</section>
Part //js
<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 whole content of this article. I hope it will help you in your study, and I hope you can support developepaer more.