Website Design Analysis: key components of responsive pages

　　

 

A person in the wireless Department cannot understand mobile devices. As a wireless reconstruction, it is not possible to write responsive pages. However, for me, a wireless restructuring, I did not write a responsive page before a mobile project I recently developed. Therefore, strictly speaking, before this project, I am an unqualified wireless reconfigurator.

However, this project allows me to quickly master some methods of responsive page reconstruction. The following is a summary of what I learned in the response page refactoring through this project.

As we all know, the so-called responsive page is to be able to use a set of styles, so that your page can have a good form of Display Under the screen of different resolutions. Responsive Web Design, which is named after Ethan Marctte cited Responsive building in A List of Apart's article "Responsive Web Design:

Responsive architecture, physical space should be able to respond to the situations where people exist.

Based on some articles and materials I have read, I have summarized several key components of the response page:

1. meta description of the page header. You can use the viewport meta tag to adjust the width of your html page to the visible width of the browser based on the device resolution, you can also set the page scale here. In this way, the response can be implemented more simply under a proportional resolution device.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. fluid layout (fluid grid), the so-called fluid layout, is actually based on the page implemented on your pc end, the width and height of some elements are changed from the original fixed number of pixels (px) adjusted to percentage (%) or font ratio (em) (or layout-related values such as margin, padding, left, and top in px ), this is also the two main implementation methods for implementing responsive layout.

The first percentage (%) indicates that the width and height of the parent container of the element are 100%, and the width and height of other elements are relative to the parent container, you only need to convert a specific pixel value to a percentage of its parent container. Of course, the conversion of this method is a bit complicated, because many of the relative width-to-Height Conversion Percentage coefficients are decimal, so you may have to be patient to achieve this at this time.

In a demo provided in Ethan Marctte'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 size ratio (em). In fact, the method is the same as above, but we changed % to em, this method is used to calculate the number of em values for the specific width and height (px) of an element under the current base font-size. Eg: an element with a width and height of 64px * 64px at a resolution of 480. The font-size of its parent container is 20px, which is converted to em in the unit of 3.2em * 3.2em. When the font size of its parent container changes based on different resolutions, the width and height of the element can be scaled proportionally according to the font size benchmark to achieve responsive changes.

　　

 

　　

 

From the two examples above, we can see that the width and height of the same element are 3.2em * 3.2em. In 360px resolution, because the base font size is 15px, therefore, the actual size parsed is 48px * 48px. In the 480px resolution, the baseline font size is 20px, so the actual size is 64px * 64px.

3. liquid image (liquid image): in many of the materials I know, if you want to adapt the image to the resolution without distortion, it seems quite difficult. However, we don't have to worry about the complexity. All we have to do is make the image adaptive based on different resolutions. no matter whether the image is stretched or not, it will be distorted, we can consider using different images at different resolutions, which is much simpler. So to make the image size adaptive, as long as we do not set the specific width and height for the image, as long as the image is given a width: 100% in the style, in this way, the image can be automatically adjusted according to the size of its parent container.

4. media query, which is also a key technology for responsive pages, adjusts different styles according to different resolutions.

@ Media screen and (max-device-width: 480px ){
. Column {
Float: none;
}
}

Through the above Media query structure, we can set different styles for different resolutions to adjust the response page. As in the Fluid layout at the second point above, when we use the percentage or font size ratio to achieve the Fluid layout, the first method is to directly implement the Fluid layout without media queries, it is the wide and high-energy adaptive screen with different resolutions of elements.

However, when the second method uses the font size ratio (em) to achieve Fluid layout, we must combine the media query, because our font size ratio is based on the baseline font size, that is to say, when the baseline font size is certain, the size of the element is fixed. To adapt the size of the element, we can only adjust the baseline font size. Through media query, we can make the font-size of the baseline font different in different resolutions, so that the pixel px calculated by the ratio of its subelements to the font size em is different, in this way, the response can be implemented.

So when we are compatible with different resolutions, we can achieve perfect reconstruction under a certain resolution, and then the specific size of all elements (px) convert it to em (based on the font-size of the parent container), and then adjust the baseline font-size under different resolutions through media queries to implement a specific response.

Of course, the function of media query is to adapt to different styles based on different resolutions. We can use the above method to achieve Fluid layout, you can also use media queries to fine-tune different forms of presentation of specific pages at different resolutions.

In my specific project process, the use of media queries mainly adjusts the size of the baseline 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 ;}
}

The general font size is set to 20 PX. The baseline font size is used when the resolution exceeds the maximum screen width queried by the media, the following figure shows how to adjust the baseline font size for devices with the resolution of 800px and 720px by means of media queries. (Of course, you can add more styles here to adjust the specific performance of different resolutions) make the page better in two resolutions. It can be found that in the PX resolution device, my base font size is set to 33.34px, and the base font size under the PX resolution device is 30px.

Why is the base font size 33.34px at PX resolution and 30px at PX resolution? This is because the base font size is 20px at PX resolution, the baseline font size under 800px or 720px is calculated based on the proportion of the device resolution. Here only two resolution examples are provided. The implementation methods are the same for different resolutions.

Through the key technologies above, we can implement a specific response page. After reading this article, Do you think responsive pages are not as difficult as you think? If you have time, try it by yourself. You can really understand the mysteries of it only after you implement it yourself !!!