Response Layout product user experience so bad, does your boss know?

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

The word "response" is becoming more and more popular, and its appearance, the design of the Web front-end or code, played a great role in promoting.

With the improvement of the living standard of netizens, the screen of computer and mobile phone is bigger and larger, the user experience of the product will be more and more, which leads to the competition of the company's products.

If you often pay attention to some portal sites, such as Taobao, music, and so on, found that their current site layout at different resolutions have different effects, this technology is also a trend later, not only in the PC end, but in our mobile end, but also so. Now the basic staff of a smart machine, resolution is also many kinds, how at different resolutions, to give users a better experience, as a front-end staff should spend a little more thought. In the course of the project, we are often asked by the product and the tester for questions like the following:

> Why with Samsung S4 and Apple 4/5 dislocation, line, picture quality is too bad?

> Why do I use a laptop and desktop computer to browse, the effect is not the same?

> Can you guarantee that the content can be filled with screens at different resolutions?

.....

For the above problem, we introduce media queries to solve. You can set the expression for different media types and set different styles according to different conditions. For example, you can set a style for a large screen and a different style for mobile. This feature is quite powerful, and you can provide different style effects for different devices without modifying the content of the page.

Let's talk more about how to apply media queries!

Media Queries

Open the Demo page, adjust the size of the browser to see the page layout changes.

Max Width

When the Page view area is less than 600px wide, CSS is used.

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

. class {

Background: #ccc;

}}

You can also use the following method to refer to an external CSS file in the page.

Min Width

CSS is used when the view area is larger than the 900px width.

@media screen and (min-width:900px) {

. class {

Background: #666;

}}

Multiple Media Queries

You can combine multiple media queries and use the following CSS when the width of the view area is between 600px and 900px.

@media screen and (min-width:600px) and (max-width:900px) {

. class {

Background: #333;

}}

Equipment width

The following CSS will be used when the max-device-width is 480px, such as the iphone.

Note: Max-device-width refers to the actual resolution of the device, max-width refers to the area size.

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

. class {

Background: #000;

}}

For IPhone 4

The following hour is the iphone4 CSS.

For the IPad

You can also check the location on the ipad (portrait or Landscapse).

Media Queries for Internet Explorer

Because IE8 and previous versions of IE browsers do not support media query, you need to use JavaScript's hack to solve the problem. Here are some solutions:

CSS Tricks-using jquery to determine browser size

The man in Blue-using JavaScript

JQuery Media Queries Plugin

Sample site

You can use a browser that supports media query to access the following sites, such as Firefox, Chrome, and Safari. You can view their layout responses to the width of the browser.

1, the new version of Taobao home

Taobao home now the middle part of the layout is: left-right, where the left navigation is fixed width, the middle and right use of "media query" to the different resolutions using the response layout, as follows:

Default size [1190px]:

Medium size [1009px]:

Small size [740px]:

2, Hicksdesign

Large Size: 3 column Sidebar

Small size: 2 column sidebar (the middle sidebar runs to the left)

Smaller size: 1 column sidebar (the rightmost one runs below the logo)

Minimum size: No sidebar (logo and right sidebar up, other sidebar move Down)

3, Colly

The page layout toggles between 1, 2, and 4 columns based on the viewable area of the browser.

4, A List Apart

Large size: Navigation on the top, 1 lines of pictures

Medium size: Navigation on the left, 3-column picture

Small size: Navigation in the top, logo no background picture, 3-column picture

5, Tee Gallery

He's a bit like the previous colly, and the difference is that its picture will scale according to the layout of the page. The trick here is to use the percentage width of the picture instead of the fixed width, for example: width=100%.

All in all, Media query currently has a lot of applications on the mobile side, and although there are some limitations on the PC side, it's a trend that we should study more about, so that our project has a better user experience.

We need to note that a CSS for mobile does not mean that our site is optimized for mobile devices. For mobile devices to optimize, site images and HTML code also need to reduce the size, which is useful for loading. Media query does just the design presentation, not the optimized operation.

Finally just want to say, a good product, must have a good user experience. More exciting please pay attention to the Web front end home: www.jiangweishan.com!