Home > Developer > Web Develop
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>/*less than 200px*/@media only screen and (max-width:200px){#p {background:Red; } }/*Greater than 300px*/@media only screen and (min-width:300px){#p {background:Yellow; }} </style> <body> <p id= "P" > less than 200px background to red larger than 300px background for yellow </p> </ Body>
The effect of this piece of code
@media can be used for single conditions or for double conditions such as:
<! DOCTYPE html>/* less than 200px* /{ #p { background: red; } } </style> <body> <p id= "P" >200px above and 500px below the background turns red </p> </body>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 indent each div response to 450px below the width of each div is 100%
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 final solution, only need to give the bottom of the Div 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
Css3media-Responsive layout
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
