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

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 ...