Web front-end-mobile responsive and adaptive

I. Adding META tags to the head of HTML

Add a meta tag to the head of the HTML header, which tells the browser that the page width is equal to the screen width of the device and does not scale, as follows:

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

A simple analysis of the meaning of this line of code: Width=device-width indicates that the width of the Web page is equal to the width of the device screen, initial-scale=1.0 indicates that the setting page initial scaling is 1,user-scalable=no to prohibit the user from scaling, The maximum-scale=1.0 and minimum-scale=1.0 represent the largest and smallest page scaling ratios. Because the browser does not have the same degree of parsing as meta tags, we want to be as compatible as possible with all browsers.

Two. Percent layout

In the page layout, the relative width and the absolute width of the combination of layout, will be more conducive to the maintainability of the Web page.

Three. Implementation of responsive pages

At present, there are two ways to implement the response, one is to use Media query , the other is the grid layout under Bootstrap, introduce the bootstrap when introducing the grid layout, Here's how to use media queries to implement responsive layouts.

Media queries, that is @media queries, media queries can set different styles for different screen sizes , especially if you need to design responsive pages, @media is very useful. When you reset the browser size, the page will also re-render the page based on the browser's width and height. Because the style is set, the code that is associated with the media query is placed at the bottom of the CSS file.

In order to understand the usage of the response more clearly, I have listed two cases below. The first case is relatively simple, which realizes the effect of changing the body background color in different page widths. The second case is an example of a specific project, more user-friendly

Example 1:

If the page width is less than 300 pixels, the background color of the modified body is red:

@media screen and (max-width:300px) {    body {         background-color:red;    }}

If the page width is greater than 300 pixels and less than 600 pixels, the background color of the modified body is green:

@media screen and (min-width:300px) and (max-width:600px) {    body {         background-color:green;    }}

If the page width is greater than 600 pixels, the background color of the modified body is blue:

@media screen and (min-width:600px) {    body {         background-color:blue;    }}

Code Explanation:

Screen means computer screens, tablets, smartphones, etc., Min-width and max-width are used to define the minimum and maximum width of the page in the device.

Four. Pages using relative fonts

We often use absolute pixel (px) to lay out the layout of our usual Web page layout, which is not suitable for the implementation of our adaptive Web page, so we now introduce two common absolute units, EM and REM. REM (font size of the root element) refers to the unit of font size relative to the root element. Simply put, it is a relative unit. See REM Everyone will think of EM units, EM (font size of the element) is the unit relative to the font size of the parent element. They are very similar, except that a calculated rule is dependent on the root element one is dependent on the parent element calculation.

As a matter of fact, you may have understood the use of REM, but have not yet learned how to use REM to achieve adaptive mobility. In the final analysis, the REM adaptive Mobile is the original feature of its own, it can always according to the root element of the font size to change its own values. The screen size of various common mobile phones is as follows:

　　

We want to achieve mobile phone-side adaptation, that is, you can make the page element font, spacing, width and high attribute values can vary with the size of the mobile phone screen changes, next we see how to use JS to dynamically set up REM and mobile-based adaptive, JS code is as follows:

Gets the HTML element var html = document.getelementsbytagname (' html ') [0]; Width of screen (compatible handling) var w = Document.documentElement.clientWidth | | document.body.clientwidth;//750 This number is based on the actual size of your design diagram, so the value is specific to the size of the design html.style.fontSize = w/750 + "px";

The above code realizes using JS to get the width of the device screen, and dynamically change the Font-siz property of the root element html according to the width of the screen . For example, for iphone6, the screen size is 750, then in IPhone6 the HTML font-size is 1px, so 1rem = 1px; for iPhone5, the screen size is 640, Then under IPhone5 the HTML font-size is 640/750 = 0.85333px, so 1rem = 0.85333px. That way, even if we set the same size and unit for an element, it will show a different size under different devices. For example Div{width:100rem}, under IPhone6 its width will be equal to 100px, and under iPhone5 it is equal to the width of * 0.85333 = 85.333px. In this way, we can really realize the adaptive of the mobile end.

Web front-end-mobile responsive and adaptive