Responsive page Refactoring Response page refactoring what you learned

Article Description: about response pages

As a person in the wireless department, it is not possible to understand mobile devices. And as a wireless reconfiguration, will not write a response page is not. And I, a wireless refactoring, before I do a mobile end of the project, does not write the response page, so, strictly speaking, before this project, I was an unqualified wireless refactoring.

This project, however, allows me to quickly grasp some of the ways in which you can respond to page refactoring. Here's a summary of what I learned in response page refactoring from this project.

As we all know, the so-called response page, is able to use a set of styles, so that your page can be in different resolutions of the screen has a good performance. Responsive Web design, which is the name of Ethan Marctte in an article published in a List of "responsive Web designs" by invoking the response architecture:----Apart

Responsive architecture (responsive architecture), the physical space should be appropriate according to the circumstances of the person in which it exists.

Based on some of the articles and materials I've read, I've summed up several key components of the response page:

1, the page head of the meta description, you can use the viewport meta tags to make your HTML page width according to the device resolution to allow the browser's visual width to adapt, you can set the page zoom ratio and so on, so in a proportional resolution device, Can be more simple to implement the response.

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

2, fluid layout (fluid grid), the so-called fluid layout, in fact, is in your PC-side implementation of the page, based on the number of elements of the width of the original fixed number of pixels (PX) adjusted to percent (%) or font scale (EM) (or layout of the margin, padding, left , top and so on PX as the unit value), this is the current implementation of the response layout of the two main implementation methods.

The first is in percent (%), where the width of the parent container of the element is 100%, and the width of the other elements is proportional to the parent container, as long as the specific pixel value is converted to a percentage of his parent container. Of course, the conversion of this method is a bit complicated, because many of the relative width and height of the conversion percentage factor is decimal, so this time you may have enough patience to achieve.

In a demo given in Ethan Marctte's responsive Web design article, we can see in 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 size ratio (EM) to achieve, in fact, the same method is the same as the above, but we will change the% of EM, this method is the specific element of the width (px) in the current base size (font-size) to convert the number of EM. Eg: a 64px*64px element with a width high of 480 resolution, its parent container's font size (font-size) is 20px, then it translates into EM as the unit is 3.2EM*3.2EM. When its parent container size datum varies according to different resolution, the width of the element can be scaled proportionally according to the size datum, and the response change can be realized.

From the two examples above, we can see that the same element, the width of the 3.2em*3.2em, at 360px resolution, because the reference size is 15px, so the actual size of the resolution is 48px*48px, and at 480px resolution, the benchmark font size is 20px, So the actual size is 64px*64px.

3, fluid picture (liquid image), in my understanding of a lot of information, the image processing this piece, if you want to make the picture according to the resolution to adapt, but also not distorted, it seems very difficult. But we do not need to consider so complicated, we have to do is to make the image according to the different resolution of the adaptation, we do not care whether the picture will be stretched and distorted, because the real situation, we can consider at different resolutions to use different pictures, this is much simpler. So let the picture size adaptive, we simply do not give the picture to set a specific width and height, as long as the picture in the style of a width:100%, so that the picture can be based on the size of its parent container automatically adjusted.

4, media query, this is also a response to a key technology page, according to the different resolution to adjust some different styles.

@media screen and (max-device-width:480px) {

. column {

Float:none;

}

}

Through the above media query structure, we can set the different resolution to choose different styles to adjust the response page. Like the previous 2nd fluid layout, we use the percentage or the size ratio to achieve the fluid layout, the first method is to be used without media query directly to achieve the fluid layout, is the element of the wide high-energy adaptive different resolution screen.

But the second method uses the size ratio (EM) to achieve the fluid layout, we have to combine the media query, because our size ratio is based on the base size, that is, in the case of a certain reference size, the size of the element is fixed, and we want to achieve the size of the element adaptive, Can only be achieved by adjusting the base font size. Through the media query, we can make the reference font Font-size at different resolutions, so that its child elements relative to the size of the pixel px is not the same, so you can implement the response.

So when we are compatible with different resolutions, we can achieve the perfect refactoring at a certain resolution, then convert all the elements specific dimensions (px) to EM (according to the font-size of the parent container), and then through the media query, Adjust the base font size font-size at different resolutions to achieve a specific response.

Of course, the function of media query is based on different resolution of different styles, we can through the above approach is to achieve fluid layout, but also through the media query to fine tune the specific page at different resolution of different forms.

In my specific project process, the use of media query is mainly to adjust the size of the base 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 the PX width screen * *

@media only screens 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 screens 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, and when the resolution exceeds the maximum screen width of my media query, the base font size is applied, and the following media queries are used to fine-tune the base font size for devices with 800px and 720px resolution. (Of course here you can add more styles to adjust the specific performance at different resolutions) so that the page at two resolution can have a better performance. As you can see, in the 800px resolution device, my base size is set to 33.34px, and the base font is 30px under the 720px resolution device.

Original link: http://cued.xunlei.com/log057

Why in the 800px resolution of the base font size is 33.34px, in the 720px resolution of the base font is 30px, this is because I was the 480px resolution of the benchmark font to achieve the 20px, then the 800px or 720px under the base font size based on the ratio of the device resolution to calculate. Only two examples of resolution are given here, as are implementation methods at different resolutions.

Through some of the key technologies above, we can implement the specific response page. After reading this article, do not feel that the response page is actually not so difficult to imagine it? Then, have time to try it yourself, only the realization of their own hands to truly understand the mysteries of the Oh!