Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of media responsive layout in css3, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

Responsive layout can provide users with more comfortable interfaces and better user experience for different terminals, and with the popularity of large-screen mobile devices, it is not too much to describe it as "the trend." As more and more designers adopt this technology, we are not only seeing a lot of innovation, but also some patterns taking shape. With the development of technology css3 features are also widely used, many of its new tags are also very easy to use and very easy to learn, just like css3 responsive layout is also very 6, originally can only be displayed on the pc side of the web page can now be added through @media can turn a web page into responsive, pc side can also be mobile side can also be really flexible ah, for example

/* 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; } } Less than 200px background turns red greater than 300px background turns yellow

Effect of Code

@media can be used for single or double conditions e.g.:

/* Less than 200px*/ @media (min-width:200px ) and (max-width:500px ) { #p{ background: red; } } Above 200px and below 500px background turns red

Code less than 200px or greater than 500px does not show effect

A simple @media to achieve a responsive page, is not very easy,

This is a page effect above 450px.

This is a page effect below 450px.

The general approach is to shrink each div responsive to 450px or less, and the width of each div is 100%.

Height is auto, I encountered a small problem when writing this page, when the bottom navigation flies at the bottom of the page, it does not fall at the bottom but in the middle, I share a small knowledge point here that is my final solution, just need to give the bottom div a style clear: both so that the bottom will be fixed to the bottom, there will be horizontal and vertical screen responsive in the media, vertical screen is @media (orientation:portrait)

Portrait screen is @media(orientation:landscape), so you can adapt to landscape screen and portrait screen. There are many advantages of media. For example, when we create our resume, we can use responsive layout. Isn't our opportunity a lot bigger? HR may also see your resume on your mobile phone. At this time, the opportunity may quietly come to your side.

Thank you for reading this article carefully. I hope that the article "Sample Analysis of Media Responsive Layout in css3" shared by Xiaobian will be helpful to everyone. At the same time, I hope that everyone will support you a lot and pay attention to the industry information channel. More relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.