What is the response layout, how the response layout is designed

Source: Internet
Author: User
Tags define object header integer interface key key words touch

Article Introduction: Let 's talk about response layout This little thing today, including what is the response layout, the pros and cons of the response layout, and how the response layout is designed (the response layout is implemented via CSS3 Media query).

Talk about the response layout, I believe we all have some understanding, responsive layout is a popular design concept this year, with the popularity of mobile internet, in order to solve today's various browser resolution and the display of different mobile devices, designers proposed a response layout design. Let's talk about response layout This little thing today, including what is the response layout, the pros and cons of the response layout, and how the response layout is designed (throughCSS3 Media Query实现响应布局)。

One, what is the response layout?

The responsive layout is a concept that Ethan Marcotte in May 2010, in short, that a Web site can be compatible with multiple terminals-not a specific version for each terminal. This concept was created to address mobile internet browsing.

The responsive layout can provide users with a more comfortable interface and a better user experience for different terminals, and with the current popularity of large screen mobile devices, it is not too much to describe by the general trend. As more and more designers adopt this technology, we not only see a lot of innovation, but also see some forming patterns.

Second, what are the advantages and disadvantages of the response layout?

Advantages:

    1. High flexibility in the face of different resolution devices
    2. Able to quickly solve multiple equipment display adaptation problems

Disadvantages:

    1. Compatible with a wide range of equipment workload, low efficiency
    2. Code cumbersome, there will be hidden useless elements, loading time lengthened
    3. In fact, this is a compromise of the design of the solution, many factors affect the best results not achieved
    4. To some extent, change the original layout structure of the site, there will be user confusion

Third, the response layout how to design?

We learned what a responsive layout is, and how do we design it in our actual project? In the past when we design the site will be different browser compatibility problems, and now have to come to a different size equipment, how do we set it down? There is a need for solutions, hehe, when it comes to responsive layout , you have to mention media query in CSS3, which is a good thing, easy to use, powerful, fast ... Media Query is a powerful tool for making a responsive layout, and using the tools, we can easily and quickly create a variety of rich and practical interface. The next step is to get a closer look at media Query.

1. What is media query in CSS?

Define style sheet rules with different media types and conditions. Media queries allow CSS to work more precisely on different media types and different conditions for the same media. Most media properties for media queries accept that min and Max are used to express "greater than or equal to" and "small and or equal to". Such as: Width will have min-width and max-width media queries can be used in CSS @media and @import rules, can also be used in HTML and XML. With this tag attribute, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used.

2. What are the values that media query can get?

    • Wide and high device-width,device-heigth display screens/tactile devices.
    • The width and height of the render window width,heigth display screen/tactile devices.
    • The handheld direction of the device, horizontal or vertical orientation (portraitlanscape) and printer.
    • Screen proportions aspect-ratio dot matrix printer.
    • The proportion of equipment device-aspect-ratio-dot matrix printer.
    • The object color or color list color,color-index the display screen.
    • The resolution of the device is resolution.

3. Grammatical structure and usage

@media Device name only (selection criteria) not (selection criteria) and (device selection criteria), device two {srules}

Example one: Using @media in Link:

Only screen and (max-device-width:480px) "href=" Link.css/>

The above use only can be omitted, limited to computer monitors, the first condition max-width refers to the maximum width of the rendering interface, the second condition max-device-width refers to the maximum width of the equipment.

Example two: inline @media in a style sheet:

@media (min-device-width:1024px) and (max-width:989px), screen and (max-device-width:480px),
 
(max-device-width:1024px) and (orientation:portrait) {srules}

In example two, the computer monitor resolution (width) is set to be greater than or equal to 1024px (with a maximum visible width of 989px); A handheld device that is wide in 480px and below; a handheld device that is positioned at 480px and horizontally (i.e. 480 dimensions parallel to the ground) The screen is larger than or equal to 480px less than 1024px and the CSS style is positioned vertically.

As you can see from the example above, the word Fu is connected by a space, and the selection criteria are enclosed in parentheses, srules for a compatible style sheet, enclosed in brackets. Only (limit some device, can omit), and (logic and), not (excluding a device) for logical keywords, a variety of devices separated by commas, this inherits the CSS basic syntax.

4, the available device name parameters:

type explain
All All devices
Braille Braille
Embossed Braille Printing
Handheld Handheld devices
Print Document printing or Print preview mode
Projection Project demonstrations, such as slides
Screen Color Computer screen
Speech Speech
Tty A grid of media, such as a typewriter, that has a fixed letter spacing.
Tv TV

5, the logical key word:

Key Words Description
Only Qualify a type of device
and Logic and, connection device name and selection condition, Choice condition 1 and selection Condition 2
Not Exclude some kind of device
, Device List

6, the available device name parameters:

Media features value Available Media types Accept Min/max Brief Introduction
Width Visual screen/Touch device Yes Define the width of the page visible area in the output device (typically PX)
Heigth Visual screen/Touch device Yes Define the height of the page visible area in the output device (typically PX)
Device-width Visual screen/Touch device Yes Defines the screen-visible width of the output device (typically PX)
Device-heigth Visual screen/Touch device Yes Defines the screen visibility height of an output device (typically PX)
Orientation Portrait landscape Bitmap Media Type No Defines whether ' height ' is greater than or equal to ' width '. The value portrait Representative is, the landscape represents whether is set, prepares the hand-held direction: portait is transverse, landscape is vertical
Aspect-ratio Bitmap Media Type Yes Defines the ratio of ' width ' to ' height ', that is, the aspect ratio of the browser
Device-aspect-ratio Bitmap Media Type Yes Defines the ratio of ' device-width ' to ' device-height ', that is, the device screen aspect ratio. such as the common display ratio: 4/3, 16/9,16/10
Color Visual Media Yes Defines the number of color originals for each set of output devices. If it is not a color device, the value is equal to 0
Color-index Visual Media Yes Defines the number of entries in a color query table in an output device. If no color query table is used, the value equals 0
Monochrome Visual Media Yes Defines the number of monochrome originals per pixel contained in a single color frame buffer. If it is not a monochrome device, the value is equal to 0
Resolution Bitmap Media Type Yes Defines the resolution of the device. such as: 96DPI,300DPI,118DPCM
Scan Progressive Interlace TV class No Define scanning procedures for TV-class devices, progressive scan by line, interlace interlaced scanning
Grid Grid devices No Used to query whether the output device uses a grid or a dot matrix. Only 1 and 0 are valid values, 1 represents yes, and 0 represents No.

7. Test Media Queries

Finally, we need to test the media queries we just designed, to test the effect of media queries on different devices, and to use a browsing tool to verify the display on different sizes of screens, and here's a good online tool for you. Responsivator, it can simulate a variety of devices such as the iphone, and can also customize the display of different size screens, just enter a URL or even a local URL (such as: HTTP://127.0.0.1/), You can see the results of the Web site under different sizes of screens.

8, through media queries implementation of response layout design

OK, so we know what media Query is, so we're going to use it in a design project with a responsive layout. The idea is simple, first define the fixed width in the standard browser (if the standard browser resolution is 1024PX, then we set width to 980px), and then use media query to monitor browser size changes, when the browser resolution is less than 1024px, You set the width of the page to a percentage by the style sheet preset by media query, and the structure elements of the page are adjusted according to the size of the browser. Similarly, when the viewable area of the browser changes to a value (if 650px), the structure elements of the page are adjusted according to the cascading style sheet preset by media query. Take a look at our example:

/* When the viewable area of the browser is less than 980px * *
@media screen and (max-width:980px) {      
#wrap {width:90%; margin:0 auto;}      
#content {width:60%;p adding:5%}      
#sidebar {width:30%;}      
#footer {padding:8% 5%;margin-bottom:10px}}  
 
@media screen and (max-width:650px) {      #header {Height:auto}      
#searchform {position:absolute;top:5px;right:0;}      
#content {width:auto; float:none; margin:20px 0;}      
#sidebar {width:100%; float:none; margin:0}  }

Through the above we can monitor the visual area of the browser change is the time our page structure elements will also correspond to changes, of course, you can set a few more sizes of monitoring cascading style sheet, this way can be based on different sizes of equipment to respond to the layout. For better display, we often have to format the initial values of some CSS properties:

 
HTML { 	
 
Article, aside, details, figcaption, figure, Footer, Header, Hgroup, menu, nav, section { 	
 
img { 	max-width:100%; 	Height:auto; 	
. Video embed,. Video object,. Video iframe { 	width:100%; 	Height:auto; }

The final note is to add the following sentence between the head of the page:

 

Meta Viewport This property is a declaration that sets the original size display and whether it is scaled on a mobile device.

Parameter settings:

    • Width of Width–viewport
    • The height of the Height–viewport
    • initial-scale– the initial scaling ratio
    • minimum-scale– allows the user to zoom to the minimum ratio
    • maximum-scale– allows the user to zoom to the maximum percentage
    • user-scalable– whether users can scale manually

Finally, if you don't support media query in IE browser, we can use media query JavaScript to solve it, just refer to Css3-mediaqueries.js in the page header. Example:

 

Well, the response to the layout of the trivial is so much, if you have good additional comments or different insights, you can contact me, we explore this small matter ...



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.