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

This article mainly shows you the "sample analysis of responsive layout in html", which is easy to understand and clear. I hope it can help you solve your doubts. Let me lead you to study and learn the article "sample analysis of responsive layout in html".

Analysis of responsive layout

The so-called responsive layout means that the page will be adjusted according to the size of the currently running device. There are three main implementation schemes:

1) Hidden

For example, some links or unimportant content on the PC side can be hidden on the mobile side.

2) Line break

The contents of a line are displayed on the PC side, and because the width of the mobile device is relatively small, you can choose to display several lines.

3) Adaptive space

For example, the element on the left is given a specific value, and the width of the element on the right allows it to adjust to different device widths.

The specific implementation methods are mainly as follows:

1) rem

Rem is a relative unit, usually 1rem = the value of font-size set by html.

For a detailed introduction to rem, please refer to the free course on Mobile web Development adaptation Secret Book Rem.

Change the value of rem by setting the font-size of different device html, so that the value of 1rem unit increases with the increase of the device.

2) viewport

Settings, which will be described below.

3) media query

Determine what the current device is, and then set different styles according to different devices.

Next, let's talk about the meta tag viewport.

Why make the width of the visual area equal to the width of the device?

Viewport refers to the visual area (to put it bluntly, the area where the page is displayed. In general, of course, the size of the display page is as big as the screen size of the device. If the width of the screen is 320px, the size of the visual area is not set to 320px, and a 960px page (assuming that the PC end page is as big as 960px) is rigidly displayed on the 320px screen, and the overall size of the page can only be reduced to the original 1Rand3 to display. Then the user seems to have too small words on the page.

If the width of the visual area is adjusted to the width of the device screen, the 960px page on the PC will be rearranged on the device with 320px width. For example, the content to be displayed on one line on the PC side will not be displayed on the mobile side, so the line will be wrapped because the width is only one line of 320px. The font size shown in this layout is the same as that on the PC side, and the user experience will be better.

So we need to set the width of the visual area to the width of the device, and then there will be code to verify it.

For the following code

.container {margin:0 auto; max-width:800px; display: flex; border:1px solid black;} .left {display: flex; width: 200px; background:red; margin:5px;} .right {display: flex; flex: 1; background:blue; margin:5px } here is some unimportant content, such as links, advertisements, here is some important content, such as an article, the article is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page. Here is some important content, such as an article, which is the core content of the whole page.

If not, the page on the PC side is as follows

The page on iPhonex

Obviously, there is no adaptation on the mobile side, but proportional scaling, resulting in small fonts and poor user experience.

At this time, plus, the page on the mobile side is as follows

It can be seen that it is not scaled as a whole, but adapted by line breaks according to the width of the device. At this time, the font size is similar to that of the PC side, and the user experience is good.

Mobile adaptation through this statement is OK in some relatively simple cases and low requirements for mobile adaptation, but if you want to better mobile adaptation, you have to adopt some other measures, such as media query.

In the image above, the red part actually does not have to be displayed on the mobile side, because it is not important, so you can use media query to hide the red area on the left when the width of the device is less than a certain value.

You can add a media query to the above css code to hide the red area on the left when the width of the device is less than 640px.

@ media (max-width: 640px) {.left {display: none;}}

The display in iphonex is shown in the following figure:

Let's look at another case:

HTML Code:

Introduction 1 introduction 2 introduction 3 introduction 4

CSS code

.container {margin:0 auto; max-width:800px; border:1px solid black;} .intro {display: inline-block; width:180px; height:180px; line-height: 180px; text-align: center; border-radius: 90px; border:1px solid red; margin:7px;}

The page on the PC side appears as follows:

The non-overtime mobile page is as follows:

You will find that the page has only been scaled proportionally on the basis of the pc side, and now add the meta tag

You can see that after adding the meta tag, it will automatically adapt according to the width of the device. The width of iphone 5 is 320px, the width of the circle is 182px, the width of margin-left is 7px, plus the margin-right of 7px on the right, so it accounts for a total of 196px, so there is only 124px left, so the second circle can only be ranked in the second line.

Now there is a problem that there is too much on the left, we want it to be centered on the mobile side, so use the media query, plus the following css code.

@ media (max-width: 640px) {.intro {margin: 7px auto; display: block;}}

Note that this place must add display: block, before it is inline-block, under the condition of inline-block, auto will not work, there is no margin value around.

The block element occupies a row, so the auto can be centered, and the inline-block will not occupy a separate line, and its width is limited, not to mention auto.

After adding the above media query, the circle will be centered when the width of the device is less than 640px.

Now there is another problem because the value of the circle is written in px units, so no matter how the size of the device changes, the size of the circle will not change, as the width of the device (less than 640px) changes, the size of the circle will never change.

In this way, with the increase of the width of the equipment, the circle appears to be relatively small, so is there any way to make the circle increase as the width of the device increases?

Yes, it can be achieved through rem.

Rem is a relative unit that dynamically modifies values according to font-size changes in html.

By setting the media query, we can set the font-size of different html under several device widths, so that when the device width becomes larger, the value of 1 rem increases, so that the circle becomes larger.

Let's assume 1rem = 20px

Change px in css code to rem

.container {margin:0 auto; max-width:800px; border:1px solid black;} .intro {display: inline-block; width:9rem; height:9rem; line-height: 9rem; text-align: center; border-radius: 4.5rem.border:1px solid red; margin:.3rem;} @ media (max-width: 375px) {html {font-size:24px;}} @ media (max-width: 320px) {html {font-size:20px } @ media (max-width: 640px) {.intro {margin: .3rem auto; display: block;}}

Note that @ media (max-width: 375px) must be written in front of @ media (max-width: 320px), otherwise the style of @ media (max-width: 375px) will always be applied, for example, the width of the device is 220px, and both will be satisfied, but since @ media (max-width: 375px) is behind, the style it sets will override the previous style.

After setting, the font-size of html is 24px when the width of the device is 375, and then 1rem = 24px (before 1rem = 20px), so the circle will be enlarged.

As you can see from the image above, the size of the circle has become 218-218, which is no longer the previous 182-182.

Note that when using rem, sometimes the calculated pixels are not accurate. For example, in the above example, I want the height of the .intro element to be 175 px. Since 1 rem = 24 px, you need to set the

Height = 7.2916666666666666666666666666667rem generally does not take as many digits after the decimal point in practical applications. Suppose height = 7.3rem, so height should be 7.3x24 = 175.2, but in the browser, height is 177.19 minus the upper and lower frame equals 175.19, not equal to 175.2, so there will be a little deviation.

Therefore, in places that require high pixel precision, you should be extra careful when using rem.

The above is all the content of the article "sample Analysis of responsive layout in html". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.