Html5/css3 responsive layout introduction and design process, html5css3

Html5/css3 responsive layout introduction and design process, html5css3
Introduction to html5/css3 responsive Layout

Html5/css3 responsive layout introduction and design process, using the media query function of css3. Mobile Terminals generally have better support for css3. Advanced Browsers Do not need to consider the compatibility of responsive layout media queries.

A common self-adaptive three-bar webpage. When you use different terminals to view this page, it will display different styles based on several terminals, there are three columns on the computer, three columns on the pad, and three rows on the big screen mobile phone. Only the main content is displayed on the mobile phone with a screen smaller than 320, and the secondary elements are hidden. (There is also a good message about responsive layout, that is, dragging a browser can trigger judgment conditions. You do not need to find a bunch of mobile phones during the test, you only need to narrow down your browser window to a certain size .)

Let's get to know the attributes of media query.

1. @ Media screen and (min-width: 320px) and (max-width: 479px)

As described in this condition statement, the media attribute is followed by a screen media type (one of the ten media types mentioned above ). Then use the and keyword to connect to the condition (other keywords include not, only, which can be understood literally .), Then there is a media query statement in the brackets, which can be understood by those who have a little understanding of css. This condition statement indicates the style sheet activated at a resolution greater than 320 and less than 479.

This statement is the basic application of the responsive layout. After determining the terminal resolution size, assign different styles to them, just as 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. }

The number of resolutions to be determined depends on your product requirements. Common resolutions include mobile phones and tablets (note that these terminals have differences between landscape screens and vertical screens, which will be mentioned in the next article ), desktop display. Customize the style of the terminal you are facing.

Generally, displays larger than 960 can use the default style instead of media queries. Except for a terminal with a high pixel ratio, such as a retina screen above iphone 4, a small screen of iphone 5 (the screen of iphone is really small ), the resolution is 1136*640, which is almost the same as that of a notebook. You open a web page in such a small physical display interface, and he uses 1136 resolution to display it. The result is that all elements are small and pitiful.

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

For example

1. @ Media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1 ), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

That is, if the pixel ratio of the terminal is 2, The rendered style. The pixel ratio of iPhone 4 and above is 2, and the pixel ratio of high-resolution Andriod devices is 1.5. In this example, only the query of the pixel ratio is 2. The method of 1.5 or other proportions is the same, the private attributes of several browsers are used before, and the last one is general attributes,

1. @ Media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1 ), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

Equal

1. @ Media only screen and (min-device-pixel-ratio: 2)

For the sake of compatibility with some versions, it is hard to write long.

1. Body {
2. Font-size: 24px;
3. }
4. . Box2 {
5. Background: url (d/javaspng) # ccc;
6. Background-size: 50%;
7. }

In a pixel-2 terminal, the goal is to make it easier to identify the display. Generally, to display a 1px background image, we need to prepare a 2px image, then, the background-size: 50% is used. 1.5 pixel ratio.

For example, in the demo above, if you use an iPhone 4 or above, the background image in the middle should show "2.0 pixel ratio ".

A major drawback of the response style is also exposed: more background images are needed (for the moment, images displayed as content are ignored, and elastic images and fonts are also needed, next time, I will write an introduction blog ).

I don't think it is very important for media query compatibility, because few terminals have browsers with IE9 or lower. Almost all are advanced browsers. You can download a compatible JS file for special purposes.

1. <! -- [If lt IE 9]>
2. <Scriptsrc = "http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"> </script>
3. <! [Endif] -->

Add it to the file as a condition annotation.

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

Step 1 of html5/css3 responsive page design process: Determine the device type and screen size to be compatible

Through user research, you can learn about the distribution of devices used by users and determine the device type and screen size to be compatible.

Device Type: Includes mobile devices (mobile phones, tablets) and PCs. When designing and implementing mobile devices, pay attention to adding the gesture function.

Screen Size: includes the size of a variety of mobile phone screens (including horizontal and vertical), a variety of tablet sizes (including horizontal and vertical), normal computer screen and wide screen.

Considerations:

• What are the sizes applicable to a page for responsive design? For example, on the 1688 search result page, the span can be from the mobile phone to the wide screen, while on the 1688 homepage, because the structure is too complex, it is unrealistic to want to migrate directly to the mobile phone, it is better to design a mobile phone homepage.
• Select applicable dimensions based on user requirements and implementation costs. For example, for some functional operation pages, users generally do not need to perform operations on the mobile end, and there is no need for responsive design.

Step 2: Create a wiremap prototype

To create different wireframes for different sizes, consider how the page layout changes, how the content size scales, and how the functions and content are deleted, even special designs for special environments. This process requires close communication between designers and front-end developers.

Step 3: test the wiremap prototype

Importing images to corresponding devices for some simple tests can help us identify problems such as accessibility and readability as early as possible.

Step 4: Visual Design

Note that the pixel density of a mobile device screen is different from that of a traditional computer screen. You must ensure the readability of the text and the area of the area where the widget can be clicked.

Step 5: frontend implementation

Compared with traditional web development, the page layout and content size of responsive design have changed, so the final output is more likely to differ from the design draft, front-end developers and designers are required to communicate with each other.