Responsive layout
First: correctly understand responsive layouts
Responsive web design is a Web site that can be compatible with multiple terminals-instead of making a specific version for each terminal. For example: Now the community has a lot of response products, such as folding sofa, rollaway bed and so on, when we need to put the sand to a corner, the sofa is like Div, and somewhere in the corner is like the parent element, because the parent element space changes, we have to adjust the div, So that it can still be put in the corner. In the project you will encounter different terminals, because the terminal resolution is different, so you want to make the user experience better, it is necessary to make your page compatible with multiple terminals.
Second: The steps of responsive design
The step of the responsive design is 1. Write the non-responsive code, 2. Processing into a responsive code, 3. Responsive detail processing, 4. Complete responsive development? ”
1. Layout and Settings meta tag
When creating a responsive web site, or when a non-responsive web site becomes responsive, focus first on the layout of the element. I am accustomed to write non-responsive layout when creating a responsive layout, the page fixed width size, if the completion of the non-responsive I am going to add media query and response code. This operation makes it easier to implement responsive features.
When you're done with the unresponsive site, the first thing to do is to paste the following code between your HTML page and the tag. This will set the screen to a size of 1:1, which provides a full view of the website in the browser of the IPhone and other smartphones, and prevents users from zooming in on the page.
- < Meta name= "viewport" content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" >
- < meta http-equiv= "x-ua-compatible" content= "ie=edge,chrome=1">
- < meta name= "handheldfriendly" content= "true">
- The User-scalable property solves the problem of the ipad's touch to return to a specific size after switching across the screen.
2. Set the style media query
Media query is the core of responsive design, it can communicate with the browser to tell the browser page how to render, if the resolution of a terminal is less than 980px, then write
- @media screen and (max-width:980px) {
- #head {...}
- #content {...}
- #footer {...}
- }
This style overrides the previously defined style.
3. Set multiple view widths
If we're going to be compatible with the ipad and iphone view, we can set this up:
- /**ipad**/
- @media only screen and (min-width:768px) and (max-width:1024px) {}
- /**iphone**/
- @media only screen and (width:320px) and (width:768px) {}
3. Font settings
So far, most of the font units used by developers are pixels, although pixels are OK on ordinary websites, but we still need responsive fonts. A responsive font should be associated with the width of its parent container in order to accommodate the client screen.
CSS3 introduced a new unit called REM, which is similar to EM but for HTML elements, REM is more convenient to use.
REM is relative to the root element, and do not forget to reset the font size of the roots:
- html{font-size:100%;}
- When you're done, you can define a responsive font:
- @media (min-width:640px) {Body{font-size:1rem;}}
- @media (min-width:960px) {Body{font-size:1.2rem;}}
- @media (min-width:1200px) {Body{font-size:1.5rem;}}
- Do not understand the REM children's shoes, here to recommend a good blog to write (http://www.cnblogs.com/YYvam1288/p/5123272.html)
4. Responsive design issues to be aware of
1. Width is not fixed, can use percent
- #head {width:100%;}
- #content {width:50%;}
2. Picture Processing picture Liquid
- #wrap img{
- max-width:100%;
- Height:auto;
- }
After this setting, the image with the ID wrap will be widened to fit the width of wrap, and the height auto setting is to guarantee the image's original height-to-width ratio so that the picture does not distort.
Process Summary
- 1. Responsive layout
- 1.Meta Label definition
- 2. Use media queries to match the style
- 2. Responsive content
- 1. Responsive images
(1) According to the @media screen width (max-width) to view
<!--the 1140px Grid--
<link rel= "stylesheet" href= "Css/1140.css" type= "text/css" media= "screen"/>
<!--[If LTE IE 9]>
<link rel= "stylesheet" href= "Css/ie.css" type= "text/css" media= "screen"/>
<! [endif]-->
<!--make minor type adjustments for 1024x768 monitors--
<link rel= "stylesheet" href= "Css/smallerscreen.css" media= "only screens and (max-width:1023px)"/>
<!--resets grid for mobile--
<link rel= "stylesheet" href= "Css/mobile.css" media= "handheld, only screen and (max-width:767px)"/>
Or:
@media 1240MinMedia, only screen and (min-width:1241px) {
. bgcolor{
Background:gray;
}
}
@media 1240Media, only screen and (max-width:1240px) {
. bgcolor{
background:red;
}
}
@media 767Media, only screen and (MAX-WIDTH:767PX) {
. bgcolor{
Background:blue;
}
}
@media 480Media, only screen and (max-width:480px) {
. bgcolor{
Background: #ccc;
}
}
Market Screen Width Distribution
The spirit of intervention do not practice false bashi principle, I did a simple first page, the content did not fill, mainly to introduce ideas, I hope that we have a lot of corrections
github:https://github.com/xiaofang142/html5andresponse/
HTML5-Responsive layout