Website production analysis: several key components of responsive pages
Source: Shangpin China |
Type: website encyclopedia |
Time: March 12, 2013
As a person in the wireless department, it is impossible not to understand mobile devices. As a wireless reconfiguration, Website production Not being able to write responsive pages is even worse. However, I, a wireless reconfiguration, did not write responsive pages before a mobile terminal project I recently worked on. So, strictly speaking, I was an unqualified wireless reconfiguration person before this project.
This project has enabled me to quickly master some methods of responsive page refactoring. The following is a summary of what I learned in responsive 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 presentation under different resolutions of the screen. Responsive Web design, which is named after Ethan Marctte's article "Responsive Web Design" published in A List Apart, citing responsive architecture:
For the reactive architecture, the physical space should be able to respond according to the situation of the people who exist in it.
Based on some articles and materials I have read, I summarized several key components of the responsive page:
1. The meta description of the page header can make the width of your html page adapt to the browser's visual width according to the device resolution through the viewport meta tag. You can also set the page's zoom ratio here, so that under the proportional resolution device, you can more easily achieve responsiveness. <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Fluid grid, the so-called fluid layout, is actually to adjust the width and height of some elements from the original fixed number of pixels (px) to percentage (%) or font proportion (em) (or the value of margin, padding, left, top, etc. in terms of layout in px) on the basis of the page implemented on your PC, which are also the two main methods of implementing responsive layout.
The first method is to use percentage (%), which means that the width and height of the parent container of the element is 100%, and the width and height of other elements are relative to their parent containers. It is only necessary to convert the specific pixel value to a percentage of its parent container. Of course, the conversion of this method is a bit complicated, because many relative width height conversion percentage coefficients have decimals, so you may have to be patient enough to achieve this.
In a demo given 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). The method is the same as above, except that we have replaced% with em. This method is how many ems are converted from the specific width and height (px) of an element under the current font size. Eg: An element with width and height of 64px * 64px at 480 resolution. If the font size of its parent container is 20px, it is converted to em in 3.2em * 3.2em. When the font size reference of its parent container changes according to different resolutions, the width and height of the element can also be scaled proportionally according to the font size reference to achieve responsive changes.
From the above two examples, we can see that the width and height of the same element is 3.2em * 3.2em. At 360px resolution, because the reference font size is 15px, the actual size parsed is 48px * 48px, while at 480px resolution, the reference font size is 20px, so the actual size is 64px * 64px.
3. In many materials I know about liquid image, it seems very difficult to process the image according to its resolution without distortion. But in fact, we don't need to consider the complexity. What we need to do is to make the image adaptive according to different resolutions. We don't care whether the image will be distorted due to stretching, because in such a case, we can consider using different images at different resolutions, which is much simpler. So let the image size be adaptive. As long as we don't set specific width and height dimensions for the image, we just give the image a width of 100% in the style, so that the image can be automatically adjusted according to the size of its parent container.
4. Media query, which is also a key technology of responsive pages, adjusts some 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 under different resolutions to adjust responsive pages. As for fluid layout in the second point above, when we use percentage or font size ratio to achieve fluid layout, the first method is to directly achieve fluid layout without media query, that is, wide and high-energy adaptive screens with different resolutions of elements.
But the second method is to use the font size proportion (em) to achieve fluid layout, we must combine media queries, because our font size proportion is based on the benchmark font size, that is, when the benchmark font size is fixed, the size of the element is fixed, and we can only achieve the self-adaptive size of the element by adjusting the benchmark font size. Through media query, we can make the font size of the reference font size different under different resolutions, so that the pixel px calculated by the sub element's ratio em to the font size is different, so that we can achieve responsiveness.
So when we are compatible with different resolutions, we can first achieve perfect reconstruction at a certain resolution, then convert the specific dimensions (px) of all elements to 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 queries to achieve specific responsiveness.
Of course, the function of media query is to adapt different styles according to different resolutions. We can use the above method to achieve fluid layout, and we can also use media query to fine tune the different manifestations of specific pages under different resolutions.
In the process of my specific project, media query is mainly used to adjust the size of reference font under 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 20px in the front, and the reference font size will be adapted when the resolution exceeds the maximum screen width queried by my media. Next, the reference font size will be adjusted in detail for devices with 800px and 720px resolution respectively through media queries (of course, you can add more styles here to adjust the specific performance under different resolutions) Make the page perform better at both resolutions. It can be found that in the 800px resolution device, my reference font size is set to 33.34px, and in the 720px resolution device, the reference font size is 30px.
Why is the reference font size 33.34px at 800px resolution and 30px at 720px resolution? This is because I first implemented the reference font size 20px at 480px resolution. Then the reference font size at 800px or 720px is calculated according to the proportion of the device resolution. Only two examples of resolutions are given here. The implementation method is the same for other resolutions.
Through the above key technologies, we can implement specific responsive pages. After reading this article, do you think that responsive pages are not as difficult as you think? Then, try it yourself when you have time, and you can really understand the mystery only after you do it yourself!!! This article was published in Shangpin China Enterprise website construction Service provider //ihucc.com/
Source Statement: This article is original or edited by Shangpin China's editors. If it needs to be reproduced, please indicate that it is from Shangpin China. The above contents (including pictures and words) are from the Internet. If there is any infringement, please contact us in time (010-60259772).
