Home > Article > Web Front-end > css3media responsive layout example analysis

css3media responsive layout example analysis

高洛峰Original: 2017-03-07 15:27:561855browse

Responsive layout can provide a more comfortable interface and better user experience for users on different terminals. With the current popularity of large-screen mobile devices, it is not an exaggeration to describe it as "the general trend". As more and more designers adopt this technology, we are not only seeing a lot of innovation, but also seeing some established patterns. With the development of technology, the characteristics of CSS3 have also been widely used. Many of its new tags are also very easy to use and easy to learn. Just like the responsive layout of CSS3, it is also very powerful. Web pages that were originally only displayed on the PC Now you can make a web page responsive by adding @media. It can be used on PC or mobile and can be really scalable. For example,

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media only screen and (max-width:200px ) {   
            #p{   
                background: red;   
            }   
        }   
/*    大于300px*/   
        @media only screen and (min-width:300px ) {   
            #p{   
                background: yellow;   
            }   
        }   

    </style>
    <body>
        <p id="p">小于200px背景变红色大于300px背景为黄色</p>
    </body>
</html>

this The effect of the code segment css3media responsive layout example analysis

@media can be used for single conditions or double conditions. For example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
/*    小于200px*/   
        @media (min-width:200px ) and (max-width:500px ) {   
            #p{   
                background: red;   
            }   
        }   
    </style>
    <body>
        <p id="p">200px以上并且500px以下背景变成红色</p>
    </body>
</html>

This code is less than 200px or If the size is larger than 500px, the effect will not be displayed.

A simple @media can realize the responsive page. Isn’t it very easy?

A page I made casually. This is the page effect above 450px css3media responsive layout example analysis

This is the page effect below 450px css3media responsive layout example analysis The general approach is to responsively shrink each p block to below 450px. When the width of each p is 100%

The height is auto. I encountered a small problem when I was writing this web page. When I reached the bottom of the page, the bottom navigation flew away. It did not fall peacefully at the bottom but in the middle. I will share a little knowledge here. That's my final solution. I just need to give the p at the bottom a style clear: both, so that the bottom will be securely fixed to the bottom. In the media, there will also be responsive styles for horizontal and vertical screens, and vertical screens. For @media (orientation:portrait)

vertical screen is @media (orientation:landscape) so that it can adapt to horizontal and vertical screens. Media has many advantages, such as when we create our own resume. If we can use responsive layout, our chances will be much greater. HR may also see your resume on the mobile phone. At this time, opportunities may quietly come to you.

The above article is css3media The responsive layout example is all the content shared by the editor. I hope it can give you a reference, and I also hope you will support the PHP Chinese website.

For more css3media responsive layout example analysis and related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Introduction to the method of making rounded images and oval images with CSS3Next article：Introduction to the method of making rounded images and oval images with CSS3

See more

css3media responsive layout example analysis

Related articles