An example of CSS3 media responsive layout

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 the code

@media can be used for single conditions or for double conditions such as:

<! DOCTYPE html>




This code is less than 200px or greater than 500px does not display the effect

A simple @media implementation of the responsive page, is not very easy,

Oneself casually do a page which is above 450px page effect


This is the page effect below 450px


The overall approach is to shrink each piece of P-response below 450px with a width of 100% per p

Height for auto, I am writing this web page encountered a small problem, so that the bottom of the page when the bottom navigation fly, it does not have peace of the sub-points in the bottom but in the middle, I am here to share a little bit of knowledge that is my last solution, only need to give the bottom of the p a style style Clear:both so the bottom will be peace points fixed to the following, in the media will also have a horizontal screen and vertical screen response, vertical screen for @media (orientation:portrait)

Vertical screen for @media (orientation:landscape) so you can adapt to horizontal screen and vertical screen, the advantages of media very much for example, we can create our own resume with the use of responsive layout so our chances are not much bigger, HR may also be able to see your resume on the phone this time the opportunity may quietly come to your side

Above this CSS3 media response layout of a simple example is the small part of the whole content to share to everyone, I hope to give you a reference, but also hope that we support a lot of topic.alibabacloud.com.