Shulou(Shulou.com)06/03 Report--

This article will explain in detail how to realize the adaptive layout of the mobile end in the front-end development. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

one。 Add a meta tag to the header of HTML

Add a meta tag to the header of HTML, that is, the head tag, to tell the browser that the width of the web page is equal to the width of the device screen and does not zoom. The code is as follows:

Briefly analyze 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 initial zoom ratio of the setting page is 1, which means that the user is not allowed to zoom, and maximum-scale=1.0 and minimum-scale=1.0 means to set the maximum and minimum page scaling. Because the degree of parsing of meta tags varies from browser to browser, we should try to be compatible with all browsers as much as possible.

two。 Percentage layout

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

The following figure shows the layout of the pull net under iPhone5, iPhone6 and iPhone6 Plus, respectively. You can see that the font size and spacing displayed by the same set of web code are different depending on the screen width of the device. The percentage layout is used in the red frame, so the maintainability of the web page will be better.

three。 Implementation of responsive pages

At present, there are two common ways to implement response, one is to use media query, and the other is the grid layout under bootstrap. When we introduce bootstrap later, we will introduce the grid layout. Here we mainly talk about how to use media query to achieve response layout.

Media queries, or @ media queries, can be styled differently for different screen sizes, especially if you need to design responsive pages. @ media is very useful. When you resize the browser, the page will also re-render the page according to the width and height of the browser. Because you are setting the style, you can put the code related to the media query at the bottom of the css file.

In order to understand the use of responsiveness more clearly, I have listed two cases below. The first case is relatively simple, realizing the function of changing the background color of body in different page widths. The second case takes a specific project as an example to make it more convenient for users.

Example 1:

If the page width is less than 300 pixels, change the background color of body to 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, change the background color of body to green:

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

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

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

Code interpretation:

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

Example 2: responsive implementation of Visual China homepage

First, let's take a look at how the page is displayed in different windows:

When the window width is greater than 1200px, the page style is as follows:

When the window width is larger than 900px and smaller than 1200px, the page style is as follows:

When the page width is less than 900px, the page style is as follows:

Next, let's look at the specific code implementation:

The html code is as follows: note that there are several pictures and write a few col.

The css code is as follows. The default is the page whose width is larger than 1200px:

.group _ wrap {width: 100%; overflow: hidden;} .group {width: 1200px; margin: 0 auto; overflow: hidden;} .col {width: 280px; margin: 10px; float: left;} .img_logo {padding: 10px; background: white;}

The response code for implementation is as follows, which can be placed at the bottom of the css file:

/ * when the width of the page is between 900px and 1200px * / @ media screen and (min-width: 900px) and (max-width: 1200px) {.group {width: 900px;}} / * when the width of the page is between 600px and 900px * / @ media screen and (min-width:600px) and (max-width: 900px) {.group {width:600px;}}

Conclusion: in fact, the realization of responsive page is very simple, as long as you study carefully and practice frequently, you can master it skillfully!

four。 The page uses a relative font

Absolute unit pixel (px) is often used in our usual web page layout process, which is not suitable for our adaptive web page implementation, so let's introduce two common absolute units, em and rem. Rem (font size of the root element) is the unit of font size relative to the root element. Simply put, it is a relative unit. When you see rem, you must think of em units. Em (font size of the element) is the unit of font size relative to the parent element. They are actually very similar, except that one calculation rule depends on the root element and the other depends on the parent element.

1. Unit of relative length em

The characteristics of em: the value of ① em is not fixed; ② em always inherits the font size of the parent element.

Don't say much nonsense, just go to the code:

Html Code:

The first floor, the second floor, the third floor.

Css Code:

Body {font-size: 20px;} .one {font-size: 1.5mm;} .two {font-size: 0.5em;} .three {font-size: 2em;}

Results:

.one-- > 30px 1.5 * 20 = 30px

.two-> 15px 0.5 * 30 = 15px

.three-- > 30px 2 * 15 = 30px

Code analysis:

Em inherits the font size of the parent element, and for most browsers, if you don't give body font size, it defaults to 16px, so for div whose class name is one, its father is body, so 1em = 16px; in this case, the font size for body is 20px, so for .one, 1em = 20px, then 1.5em = 30px. So the font-size of one is 30px.

For a div whose class name is two, its father is one, because em inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size of two is 15px.

For a div whose class name is three, its father is two, because em inherits the font size of the parent element, so 1em = 30px, then 0.5em = 15px, so the font-size of two is 15px.

two。 Unit of relative length rem

Rem is a new relative unit (root em, root em) of CSS3, which has attracted wide attention. What's the difference between this unit and em? The difference is that when you use rem to set the font size for an element, it is still a relative size, but the opposite is only the HTML root element. This unit can be described as a combination of relative size and absolute size, through which all font sizes can be adjusted proportionally only by modifying the root element, and the chain reaction of font size layer by layer can be avoided.

Let's look at the following example:

Html Code:

The first floor, the second floor, the third floor.

Css Code:

Html {font-size: 20px;} .one {font-size: 1.5rem.} .two {font-size: 0.5rem..three {font-size: 2rem;}

Results:

.one-- > 30px 1.5 * 20 = 30px

.two-> 10px 0.5 * 20 = 10px

.three-- > 40px 2 * 20 = 40px

Code analysis:

Rem is a new unit introduced in css3. The value of rem is always relative to the font-size size set in the root element html. If it is not set, font-size defaults to 16px in most browsers, then 1rem = 16px

So for a div whose class name is one, 1.5rem = 1.5 * 20 = 30px. Other similar, will not repeat one by one.

Summary of em and rem:

"em" sets the font size relative to its parent element, so there is a problem. Any element setting may need to know the size of his parent element, which brings unpredictable error risk when we use it many times. On the other hand, rem is much easier to use, and as far as my company is concerned, there are a lot of cases of using rem in actual project development. It is estimated that in the near future, domestic designers will fall in love with rem like foreign designers.

five。 Js dynamically sets rem to realize adaptive font on mobile terminal.

In fact, having said so much, you may already know the use of rem, but you don't know how to use rem to achieve mobile adaptation. In the final analysis, what makes rem self-adaptive on the mobile side is its own feature, which can always change its value according to the font size of the root element. At present, the screen sizes of various common mobile phones are shown below:

We want to achieve self-adaptation on the mobile end, that is, we can make the attribute values of the element font, spacing, width and height of the page change with the change of the screen size of the phone. Next, let's take a look at how to use Js to dynamically set rem and achieve self-adaptation on the mobile end. The Js code is as follows:

/ / get the html element var html = document.getElementsByTagName ('html') [0]; / / the width of the screen (compatible processing) var w = document.documentElement.clientWidth | | document.body.clientWidth;//750 is based on the actual size of your design drawing, so the value depends on the size of the design drawing html.style.fontSize = w / 750 + "px"

The above code realizes the function of using Js to obtain the width of the device screen and dynamically changing the font-siz attribute of the root element html according to the width of the screen. For example, for iphone6, the screen size is 750, then the font-size of html under iPhone6 is 1px, so 1rem = 1px; for iPhone5, the screen size is 640, then the font-size of html under iPhone5 is 640 0.85333px, so 1rem = 0.85333px. In this way, even if we set the same size and unit for an element, it will display different sizes under different devices. For example, div {width:100rem}, under iPhone6, its width will be equal to 100px, and under iPhone5 its width will be equal to 100 * 0.85333 = 85.333px. In this way, we have really realized the adaptation of the mobile end, how, is it very simple!

This is the end of the article on "how to achieve adaptive layout of mobile terminal in front-end development". I hope the above content can be helpful to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.