A rookie like to use the responsive layout, easy to operate, simple, stylish and simple, suitable for beginners! (a Dreamweaver CS6 generates a responsive layout)

Front-end development is not an easy task, not only to master HTML, CSS, and JavaScript, but also to understand how to design cross-platform sites for different browser versions and platforms. With the popularity of responsive design today, front-end development becomes more difficult and takes longer.

Using the front-end framework has the following benefits:

• • cross-browser. this has been confirmed.
  • consistency. UI components, such as navigation, buttons, labels, forms, drop-down boxes, tables ..., are designed to keep the style consistent.
  • rapid development. you can quickly and easily build layouts. These frameworks are all equipped with detailed documentation.
  • responsive. all CSS components and JavaScript plugins can transition from the desktop to the mobile device well.

     but this slag thinks that if you can handle a responsive layout without the need to use a responsive framework on the web,

1. 1. for a novice, it takes some time to learn the features and methods of the familiar framework;
   2. compatible with a variety of equipment workload, inefficient

Today I would like to share my own so-called to explore a set of responsive layout implementation scheme, easy to operate, stylish and simple. The place to use, nothing but cool! Cool! Cool! Novice just snapped can automatically generate, quite powerful, and very small oh, directly compatible to IE6, the slag after n test and use, Mom no longer worry I will not write the response.

First of all, we have a simple understanding of the response to the layout of the implementation of logic, in the past when we design the site will be affected by the compatibility of different browsers, but also to a different size of equipment, how can we settle down? There is a need to have a solution, when it comes to responsive layout, you have to mention media query in CSS3, this is a good thing, easy-to-use, powerful, fast ... Media Query is a great tool for making responsive layouts, and with this tools, we can easily and quickly produce a wide variety of practical and powerful interfaces.

1. What are media query (media queries) in CSS3? [2]Style sheet rules are defined by different media types and conditions. Media queries allow CSS to work more precisely on different media types and different conditions in the same medium. Most media features of media queries accept Min and Max to express "greater than or equal to" and "less than 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 property, we can easily achieve a rich interface under different devices, especially mobile devices, will be more widely used. 2. What values can media query get? Device width and Height device-width,device-height display screen/tactile device.    The width and height of the render window width,height display screen/haptic device.    The handheld direction of the device, transverse or vertical orientation (portrait|lanscape) and printer.    Screen ratio aspect-ratio dot matrix printer.    Device ratio 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 (select condition) not (selection condition) and (device selection condition), device two {srules}     Example one: Using @media:    <link rel= in link "stylesheet" type= "Text/css" media= "only screen and (max-width:480px), only screen and (max-device-width:480px) "href=" Link.css "/>     The above use only can be omitted, limited to the computer monitor, 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 device.      example two: inline @media:     @media (min-device-width:1024px) and (max-width) in the style sheet : 989px), screen and (max-device-width:480px), (max-device-width:480px) and (Orientation:landscape), (min-device-width : 480px) and (max-device-width:1024px) and (orientation:portrait) {srules}     in Example two, Set the computer monitor resolution (width) greater than or equal to 1024px (and the maximum visible width is 989px), the screen width in 480px and the following handheld devices, screen width in 480px and horizontal (that is, 480 dimensions parallel to the ground) placed handheld devices , the screen is large or equal to 480px less than 1024px, and vertical placement of the device's CSS style.      as can be seen from the above example, the character putting is concatenated with a space, the selection condition is enclosed in parentheses, and the Srules is a compatible set of style sheets, enclosed in brackets. Only (limited to a certain device, can be omitted), and (logic and), not (excluding a device) is a logical keyword, a variety of devices separated by commas, which inherits the CSs basic syntax.   All right, no more blind! Straight to the subjectWhen it comes to the first contact-responsive layout It starts with a response from a customer asking me to do a set of responsive layouts. Related to the credibility of the problem, can not take the job, then the time is particularly tight, see the project delivery period is not far, how to do? East asked west, all kinds of Baidu swing, all kinds of exchange learning. It was amazing when I touched a couple of response frames, but the problem came again!    Frame css file Ah, JS Ah, than I write more, this is nothing but the devaluation of me. Finally, finally .... Well, it's not a blind race. Download a Dreamweaver cs6! This guy's new HTML5. The streaming network layout feature is what we want (responsive layout).
don't blink, beginners can also crash! The first step is to create a new fluid network layout:     The second step is to save the relevant files to your project.
       Then see how large the file, according to their own needs can be properly deleted or compressed. Key code:        Now we run and look at the effect in a simulated environment: (The simulation effect at 6p) (the first and most popular small screen) (ipad 3/4 Environment) (The evil IE6 has previously been measured IE7 instead of uncomfortable can try)
please call me Lei Feng! It's not the right place to spray. Or a piece of slag. Talk not much, try it yourself!

A rookie like to use the responsive layout, easy to operate, simple, stylish and simple, suitable for beginners! (a Dreamweaver CS6 generates a responsive layout)