HTML5/CSS3-Responsive layout Introduction and design process

HTML5/CSS3-Responsive Layout Introduction

HTML5/CSS3 Responsive layout Introduction and design process, using CSS3 Media query function. Mobile terminals are generally good for CSS3. Advanced browsers do not need to consider a responsive layout for media query compatibility issues

A normal adaptive display of the three columns, when you use a different terminal to view this page, he will be based on several terminals to display different styles, on the computer is three columns, on the pad should also be three columns, on the big screen mobile phone is three lines, on the screen less than 320 of the mobile phone only display the main content, hiding the secondary elements. (There is a relatively good response to the layout of the message, that is, drag the browser can also trigger the judgment condition, the test you do not need to find a bunch of mobile phones, as long as your browser window to a certain size to be able to.) ）

Let's recognize the media query property.

1. @media screen and (min-width:320px) and (MAX-WIDTH:479PX)

Starting with this conditional statement, the media property is followed by a screen type (one of the 10 media types mentioned above). Then use the AND keyword to join the condition (other keywords also have not, only, see literally everyone can understand, not much to say. ), and then in parentheses is a media query statement, a little bit of CSS can be understood by the students, this conditional statement meaning is more than 320 less than 479 of the resolution of the style sheet activated.

This statement is the basic application of the responsive layout. After judging the terminal resolution size, give different styles into it, just like in our example

1. @media screen and (max-width:320px) {
2. Body{...}
3. }
4. @media screen and (min-width:800px) and (max-width:1024px) {
5. Body{...}
6. }

As to how many resolutions to judge, it depends entirely on the needs of your products, the common resolution of mobile phones, tablets (note that these terminals are present in horizontal screen vertical screen differences, this next one), desktop display. Customize the style for the terminal you're facing.

Displays with a general value greater than 960 can be used in the default style without having to be judged in a media query. In one case, the high-pixel ratio of the terminal, such as iphone4 above the retina screen, a small iphone5 screen (iphone screen is really small AH), his resolution has reached 1136*640, almost equal to a notebook resolution. You open a webpage in such a small physical display screen, he shows it with 1136 resolution, the result is all the elements are small poor.

In the face of this fine resolution of the terminal, we have another conditional query statement device-pixel-ratio.

Like in the example.

1. @media only screens and (-moz-min-device-pixel-ratio:2), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1), only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixel-ratio:2)

is to determine the pixel ratio of the terminal is 2 words, the style rendered. Iphone4 above pixel ratio is 2, high resolution andriod device pixel ratio is 1.5, the example is only a pixel ratio of 2 query, 1.5 or other proportional method, the front with a few browser private properties, the last is a common property,

1. @media only screens and (-moz-min-device-pixel-ratio:2), only screens and (-O-MIN-DEVICE-PIXEL-RATIO:2/1), only screens and (-webkit-min-device-pixel-ratio:2), only screen and (Min-device-pixel-ratio:2)

Equals

1. @media only screen and (Min-device-pixel-ratio:2)

For some versions of compatibility, have to write long.

1. body{
2. font-size:24px;
3. }
4. . box2{
5. Background:url (d/20.png) #ccc;
6. background-size:50%;
7. }

The purpose of this writing in the 2-pixel terminal is to make his display easier to identify, generally to display a 1px background image, and we want to prepare a 2px, and then background-size:50% this. 1.5 pixels compared to the same example.

For example, the above demo, if you use iphone4 above the Apple phone to see, the middle of the background image should be displayed "2.0 pixel ratio."

Here also exposes the response of a big drawback: need to do a number of background map (as the content of the picture temporarily ignored, elastic images and elastic fonts, next time to write an introduction to the blog).

For media query compatibility, I don't think it's important because there are very few browsers with IE9 below. Basic is the advanced browser. If special need, can download a compatible JS file

1. <!--[If Lt IE 9]>
2. <scriptsrc= "Http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js" ></script>
3. <! [endif]-->

Added to the file in the form of conditional annotations.

=========================================

HTML5/CSS3 design process for responsive pages Step one: Determine the type of device that needs to be compatible, screen size

Through user research, to understand the distribution of devices used by users, to determine the type of equipment to be compatible, screen size.

Device type: Includes mobile device (mobile phone, tablet) and PC. For mobile devices, the design and implementation of the time to pay attention to increase the function of gestures.

Screen size: Includes the size of various phone screens (both horizontal and vertical), the size of various plates (including horizontal and vertical), normal computer screens and widescreen.

Questions to consider:

• What size range is applied to a page when it responds to design? For example, 1688 search results page, the span can be from mobile phones to widescreen, and 1688 of the first page, because the structure is too complex, want to move directly to the mobile phone, not too realistic, rather than directly design a mobile phone version of the homepage.
• In combination with user requirements and implementation costs, the applicable size of the trade-offs. For example, some functional operation of the page, users generally do not operate on the mobile side of the demand, there is no need for responsive design.

Step two: Make Wireframe prototypes

In order to determine the size of a number of different types of wireframe prototype, you need to consider the different sizes, how the layout of the page changes, how the size of the content is scaled, the function, the content of the deletion, and even for the special environment for specialized design. This process requires the designer and front-end developers to maintain close communication.

Step three: Test wireframe prototypes

Importing pictures into the appropriate device for a few simple tests can help us discover accessibility, readability, and other issues as early as possible.

Fourth step: visual design

Note that the screen pixel density of mobile devices is not the same as that of traditional computer screens, so the readability of content text, the area of control clickable area, etc. should be ensured when designing.

Fifth step: front-end implementation

Compared with the traditional web development, the responsive design of the page because of the page layout, content size has changed, so the final output is more likely to be larger than the design manuscript, requires the front-end developers and designers to communicate.

HTML5/CSS3-Responsive layout Introduction and design process