CSS3 responsive Layout

CSS3 responsive Layout
Advantages and disadvantages of responsive Layout

Advantages:
Strong flexibility for devices with different resolutions
Quick compatibility with multi-device display
Disadvantages:
High compatibility with various devices and low efficiency
Code is cumbersome, and useless elements are hidden, resulting in longer loading time.
In fact, this is a compromise design solution, which is affected by many factors and cannot achieve the best results.
To some extent, the original layout structure of the website is changed, and user confusion may occur.

1. Media Query

Media Query in CSS3 is a powerful tool for making responsive la S. With this tool, we can easily and quickly create a variety of highly practical interfaces. The layout is automatically adjusted based on the window size. ** 1. Define style sheet rules using different media types and conditions. ** Media query allows CSS to act more accurately on different media types and different conditions of the same media. Most media features of media queries use min and max to express "greater than or equal to" and "less than or equal ". For example, width supports min-width and max-width media queries, which can be used in the @ media and @ import rules in CSS or in HTML and XML. With this tag attribute, we can easily implement a wide variety of interfaces on different devices ** 2. Values that Media can obtain ** device width and height: device-width, device-height display screen/tactile device rendering window width and height: width, heigth display screen/tactile device handheld direction: orientation (portrait | lanscape) Horizontal/vertical image ratio: aspect ratio of the aspect-ratio Browser: the aspect ratio of the device-aspect-ratio device screen, such as 4/3, 16/9, etc. Visual Media: color defines the number of color originals of each set of output devices. If it is not a color device, the value is equal to 0 resolution: resolution defines non-violent devices, such as 96 dpi, more than DPI only orientation does not support max, min. ** 3. Available device parameter name ** all devices braille embossed braille print handheld device print Document print or print preview mode projection project demonstration (such as slides) screen color computer screen tty fixed letter spacing of network media, such as telex typewriter ** 4, logical keywords ** only limit a certain device type and logic and, connection Device Name and selection condition, selection condition 1 and selection condition 2not exclude a certain device (except what ), device List ** 5. syntax structure and usage ** @ media device name only (selection criteria) not (selection criteria) and (device selection criteria ), device 2 {sRules} Use @ media in link:

Href = “home.css "/>
Only can be omitted. The first condition is that the maximum width of the webpage is 640, and the second condition is that the maximum width of the device is 640px.
@ Media (min-device-width: 1024px) and (max-width: 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) {// code}
The size of the computer screen is no less than PX, and the maximum visible width is 989px. the maximum width of the device is PX, which is placed horizontally. The device width is not less than PX and smaller than PX.
The characters are connected by spaces. The selection conditions are included in parentheses. The code is the set style table, which is included in brackets. Only (a device can be omitted), and (logical and), not (exclude a device) is a logical keyword, multiple devices are separated by commas.
6. Test the responsive Layout
Responsive layout needs to be tested on different devices. You can use a browser tool to check the small display effects of screens of different sizes. Tools to help you browse website effects on screens of different sizes-Responsivator http://responsive.d3corp.com /? D3corp.com

7. Responsive Layout Design

/* The visible area of the browser is not less than 980px */@ media screen and (min-width: 980px ){. head {width: 100%; height: 70px ;}. head # logo {position: fixed; top: 0px; left: 50px ;}. head nav {width: 870px; background: # fff; height: 70px; margin: 0 auto ;}. head nav a {width: 100px; height: 40px; margin: 15px 0px; display: inline-block ;}} /* the visible area of the browser is between 640px and 980px */@ media screen and (min-width: 640px) and (max-width: 980px ){. head {width: 70px; height: 870px ;}. head nav {width: 70px; background: # fff; height: 870px; margin-top: 20px ;}. head nav a {width: 70px; height: 40px; margin: 15px 0px; display: inline-block ;}} /* the visible area of the browser is smaller than 640px */@ media screen and (max-width: 640px ){. head {width: 256px; height: 256px; position: fixed; bottom: 20px; left: 20px ;}. head # logo {position: absolute; top: 0px; left: 0px; right: 0; bottom: 0; padding: auto; margin: auto ;}. head nav {width: 256px; height: 256px; background-color: rgba (0.6, 0, 50%); border-radius: 0.1; transform: scale) rotate (-270deg); opacity: 0; transition: all 500 ms; margin-top: 0px ;}. head nav a {display: block; width: 40px; height: 40px; border-radius: 50%; position: absolute; margin-left:-20px; margin-top: -20px ;}

For better display, you must format the initial values of some CSS attributes, such:

/* Disable automatic font size adjustment of Safari in iPhone */html {-webkit-text-size-adjust: none;}/* Set HTML5 elements as blocks */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block ;}

2. Use meta tags to control viewport

The default viewport of a mobile device is layout viewport, which is a viewport wider than the screen. However, when developing a mobile device website, we need ideal viewport.
Set width to decice-width;

Parameter settings in content:
Width-width of viewport
Height-the height of viewport, which is rarely used
Initial-scale-initial scaling ratio
Minimum-scale-minimum scale allowed by users
Maximum-scale-maximum scale allowed by users
User-scalable-can the user manually scale no or yes?
Finally, for IE browser does not support media query, we can use Media Query JavaScript to solve, just need to reference css3-mediaqueries.js in the page header. Example:

IE8 and earlier Browsers Do not support CSS3 media queries