Responsive web Development

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no "/>

which
Width of the Width-viewport
The height of the Height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale

/* Zoom for all pages */
. Viewport{width:100%;min-width:320px;max-width:640px;margin:auto;overflow:hidden;background: #e2e2e2;}

@media only screen and (max-width:320px) and (min-width:300px) {
Body {
Font-size:12px!important
}
. viewport {
max-width:320px
}
}
@media only screen and (max-width:360px) and (min-width:320px) {
Body {
Font-size:12px!important
}
. viewport {
max-width:320px
}
}
@media only screen and (max-width:360px) and (min-width:350px) {
Body {
Font-size:12px!important
}
. viewport {
max-width:360px
}
}
@media only screen and (max-width:480px) and (min-width:360px) {
Body {
Font-size:12px!important;
}
. viewport {
/*max-width:360px*/
}
}
@media only screen and (max-width:480px) and (min-width:470px) {
Body {
Font-size:12px!important;
}
. viewport {
max-width:320px
}
}
@media only screen and (max-width:560px) and (min-width:480px) {
Body {
Font-size:18px!important;
}
. viewport {
max-width:480px
}
}
@media only screen and (max-width:560px) and (min-width:540px) {
Body {
Font-size:18px!important;
}
. viewport {
max-width:540px
}
}
@media only screen and (max-width:570px) and (min-width:560px) {
Body {
Font-size:18px!important
}
. viewport {
max-width:480px
}
}
@media only screen and (max-width:640px) and (min-width:570px) {
Body {
font-size:18px
}
. viewport {
max-width:480px
}
}
@media only screen and (max-width:640px) and (min-width:630px) {
Body {
Font-size:18px!important;
}
. viewport {
max-width:480px
}
}
@media only screen and (max-width:710px) and (min-width:640px) {
Body {
Font-size:24px!important
}
. viewport {
max-width:640px
}
}

Sample site: http://mediaqueri.es/
Http://www.w3cfuns.com/article-5596330-1-1.html
http://2011.dconstruct.org/

Mobile-Design Principles

3S principle refers to: simple, Small, Speedy. This is a summary by a foreign Daniel, you can see the Mobile Web design:best practices. To these three points, I deeply agree. What I want to say is that speedy should be a result in strict sense and not be classified as principle. Web design, I have been advocating simple style: convenient operation, a refreshing interface, friendly tips, small pictures, simplified code, etc., when done, I believe that the site will become speedy.
Mobile Web development should prioritize the inherent nature of mobile phones. First of all, the phone screen compared to the desktop screen is very small, so the full screen can display less content, which requires us to select the appropriate font size when the page design, but also to consider the priority of the content of the document, the important content of the front display, second, the mobile phone interaction mode let us have to reconsider the design of the page element. Desktop Web to the main mouse operation, so that the scope of operation is very accurate, mobile web to touch the main operation, the operating range of the finger is relatively broad, reflected on the page, I take the button for example, for small screen low-resolution mobile phone, you can set the button to. button{display:block;} , and for large screen high-resolution phones, can be set to. button{display:inline-block;}, this is the button. For the list of links, to set the appropriate row height, to avoid the clickable range is too small and operation error; Finally, the picture. Mobile phone development should try to avoid the use of pictures, such as round corners, shadows, gradients and so on before the desktop poor implementation of the situation, in the mobile phone development has not existed, can be used CSS3 to achieve, so designers in the design of PSD, the effect is made, but transduction when you do not have to give.

Responsive web Development

B) Editor Installation: Subline Text2 (Support HTML5, installation CSS3 extension failed), TopStyle5 (support CSS3).
C) Clarify the difference between the viewport and the screen. The viewport is the content display area of the browser, and the screen is the physical display area of the device. For example, the width of the viewport is usually expressed in width, and the screen width is expressed in device-width. It is believed that the children's shoes that have done the mobile page are often seen this code:
<meta name= "viewport" content= "width=device-width,initial-scale=1.0";
where width= Device-width means to set the width of the page to the same width as the screen.
D) Responsive design Creative site collection: http://mediaqueri.es. There are a number of responsive web design sites for your reference and learning.
2) Journey ing:
E) Media query for Responsive web design:

In order to reduce the HTTP request, I think it would be a good idea to make a media query in the CSS stylesheet instead of using link to load it in the Head section of the page. The media query format for the style table is:
@media screen and (max-width:960px) {}
The inner writing style of the curly braces. The statement is equivalent to a judgment statement, there are two conditions, one is the width of the viewport maximum not more than 960px,screen represents the display, both conditions are available, the style within the call brace.
f) responsive web design streaming layout:
The flow layout is laid out as a percentage. The most important thing is to keep an eye on the parent layer of the element, all elements are based on the parent layer. Streaming layouts are used to perfectly combine with media queries, resulting in a smooth layout change jump effect. Generally speaking, the style of media is mostly the width, padding, margin, font-size, line-height.
g) Liquid picture of responsive web design:
To implement a liquid picture, simply add the following code: img{max-width:100%;}
Responsive web development is not very difficult, just a previous page only need the artist to give a picture, now to give more than two, so that the workload correspondingly increased a lot. We suggest that we first have the idea of flow layout and reduce the nesting level. I will post the article at the end of a test page I do, you can see, the page originates from http://2011.dconstruct.org/, due to time, some details can not be dealt with in place, but also for the lower version of the browser processing did not take into account. It is for reference only. Article theory is too much, no way, often write to write on the theory, Haihan. Thanks for reading!

Responsive web Development