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

This article introduces the relevant knowledge of "web responsive page example analysis". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

1, the page header meta description, you can use the viewport meta tag to make the width of your html page can adapt to the browser's visual width according to the device resolution, you can also set the page zoom ratio here, etc., so that in proportional resolution devices, you can more easily implement responsive.

2, fluid layout (fluid grid), the so-called fluid layout, in fact, on the basis of the page you implement on the PC side, adjust the width and height of some elements from the original fixed number of pixels (px) to a percentage ( %) or font ratio (em)(or layout of margin, padding, left, top, etc. in px units), which is also the current implementation of responsive layout of the two main implementation methods.

*** A percentage ( %) is the ratio of the width and height of the parent container of the element to the width and height of the parent container of the other element, as long as the specific pixel value is converted to a percentage of its parent container. Of course, this method of conversion is a bit complicated, because many of the relative width and height conversion percentage coefficients are decimal, so this time you may have enough patience to achieve.

In a demo given in Ethan Marktte's Responsive Web Design article, we can see his actual code:

@media screen and (max-width: 400px) { .figure, li#f-mycroft { margin-right: 3.317535545023696682%; /* 21px / 633px */ width: 48.341232227488151658%; /* 306px / 633px */ }

The second method is to use the font ratio (em) to achieve, in fact, the method is the same as above, but we replace % with em, this method is the specific width and height of an element (px) in the current reference font (font-size) converted to how many em. eg: An element with a width and height of 64px*64px at 480 resolution and a font-size of 20px for its parent container, then it is converted to em units of 3.2em*3.2em. When the parent container font base changes according to different resolutions, the width and height of the element can also be scaled proportionally according to this font base, which can achieve responsive change.

From the above two example pictures, we can see that the same element, width and height is 3.2em*3.2em. At 360px resolution, because the reference font is 15px, the actual size analyzed is 48px * 48px, while at 480px resolution, the reference font is 20px, so the actual size is 64px * 64px.

3. Liquid image. In many materials I know, it seems quite difficult to process the image if the image can be adapted according to the resolution without distortion. But in fact, we don't have to think about that complicated, we just have to make the image adaptive according to different resolutions, we don't care if the image will be distorted because of stretching, because really encounter such a situation, we can consider using different images at different resolutions, so it's much simpler. So to make the image size adaptive, we just don't set a specific width/height size for the image, just give the image a width: 100% in the style, so that the image can automatically adjust according to the size of its parent container.

4, media query (media query), this is also a key technology of responsive pages, according to different resolutions to adjust some different styles.

@media screen and (max-device-width: 480px) { .column { float:none; } }

With the above media query structure, we can set different styles to adjust responsive pages at different resolutions. Like the second point in the fluid layout, when we use percentage or font ratio to achieve fluid layout, *** methods can directly achieve fluid layout without media query, that is, the width and height of elements can adapt to different resolution screens.

However, when the second method uses the font ratio (em) to realize the fluid layout, we must combine the media query, because our font ratio is realized according to the reference font, that is to say, under the condition that the reference font is fixed, the size of the element is fixed, and we can only realize the size adaptation of the element by adjusting the reference font. Through media query, we can make the font-size of the reference font different at different resolutions, so that the pixel px calculated by the proportion em of its sub-elements relative to the font size is different, so that we can implement the responsive formula.

Therefore, when we are compatible with different resolutions, we can first implement *** reconstruction at a certain resolution, then convert the specific size (px) of all elements into em (according to the font-size of the parent container), and then adjust the font-size of the reference font at different resolutions through media query to achieve specific responsive expressions.

Of course, the function of media query is to adapt different styles according to different resolutions. We can achieve fluid layout through the above method, and we can also fine-tune the different expressions of specific pages at different resolutions through media query.

In my specific project process, using media query is mainly to adjust the size of the reference font at different resolutions, as shown in the following code:

body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:20px;} /* for 800 px width screen */ @media only screen and (max-device-width:800px),only screen and (max-width:800px){ body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:33.34px;} } /* for 720 px width screen */ @media only screen and (max-device-width:720px),only screen and (max-width:720px){ body,section,button,h1,p,.layer,.downall_btn,.introduce,.playlist,.recom_picbox{font-size:30px;} }

Set the universal font size to 20px in the front, when the resolution exceeds the *** screen width that I found in the media query, the reference font size will be adapted. Below, adjust the reference font size in detail for the devices with resolution of 800px and 720px through media query (of course, you can add more styles here to adjust the specific performance under different resolutions) so that the page can have better performance under both resolutions. As you can see, my reference font size is set to 33.34px on an 800px resolution device and 30px on a 720px resolution device.

"Web responsive page example analysis" content is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

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.