Css3media-Responsive layout "Go"

Responsive layouts can provide a more comfortable interface and a better user experience for users of different terminals, and with the current popularity of large-screen mobile devices, the "general trend" to describe is not too. As more and more designers adopt this technology, we see not only a lot of innovation, but also some forming patterns. With the development of technology CSS3 features are also widely used, its many new tags are also very useful and very easy to learn, like CSS3 's responsive layout is also very 6, the original can only be displayed on the PC Web page can now be added through the @media can be a Web page into a response, PC can also be mobile side can be really flexible ah, for example

<! DOCTYPE html>
The effect of this piece of code:
@media can be used for single conditions or for double conditions such as:
<! DOCTYPE html>
　　
This code is less than 200px or more than 500px does not show the effect, a simple @media implementation of the responsive page, is not very easy.
Self-made a page this is the effect of the page above 450px:
This is the page effect of 450px below the overall approach is to each div response to 450px below the width of each div is 100%, the height of auto, I write this page when I encountered a small problem, so that the bottom of the page when the bottom navigation fly, It does not fall on the bottom of peace, but in the middle, I am here to share a little bit of knowledge point that is my last solution, only need to give the bottom of the Div a style style clear:both so that the bottom of the peace sub-point fixed to the following, in the media will have a horizontal screen and vertical screen response , the vertical screen is @media (orientation:portrait) Vertical screen for @media (orientation:landscape) so it can be adapted to the horizontal and vertical screen, Media has a lot of advantages, such as when we create our own resume can be used in response to the layout of our chances are not much larger, HR may also be on the phone to see your resume this time the opportunity may quietly come to your side
Css3media-Responsive layout "Go"