Css3media responsive layout and css3media response
Responsive layout can provide more comfortable interfaces and better user experience for users of different terminals. With the popularization of large-screen mobile devices, it cannot be described as "the trend of the times. As more and more designers use this technology, we not only see a lot of innovation, but also see some forming models. With the development of technology, the feature of css3 has been widely used. Many of its new labels are also very easy to use and learn, just like the responsive layout of css3 is also very 6, the web page that can only be displayed on the pc end can now be converted into a responsive webpage by adding @ media. The pc end can also be scaled freely on the Mobile End, for example.
<! DOCTYPE html>
Effect of this Code
@ Media can be used for single or double conditions, for example:
<! DOCTYPE html>
This code is smaller than 200px or greater than 500px and does not show any effect.
A simple @ media interface implements a responsive page. Is it very easy,
Create a page by yourself. This is the effect of a page above pixel.
This is the overall method for page effects below pixel PX, that is, to scale the response of each div below pixel to 100% in width.
The height is auto. When I write this webpage, I encounter a small problem. When the page is at the bottom, the navigation goes off. It falls in the middle instead of the security score, here I will share a little knowledge point, which is my final solution. I just need to give the div at the bottom a style clear: both so that the bottom will be fixed to the bottom, in media, there will also be response styles for horizontal and vertical screens. The vertical screen is @ media (orientation: portrait)
The portrait screen is @ media (orientation: landscape) so that you can adapt to the landscape and landscape screens, media has many advantages. For example, when we create our resumes, we can use responsive layout. This is not a great opportunity, HR may also be able to see your resume on the mobile phone. At this time, the opportunity may quietly come to your side.