How to implement responsive layout with CSS

The content shared with you in this article is about the method of implementing responsive layout with CSS. The content is of great reference value. I hope it can help friends in need.

Use CSS to implement responsive layout

Responsive layout feels very high-end and difficult, but in fact, responsive layout can also be achieved using only CSS
What you need to use is CSS There is no query, here is how to use it:

Three ways to use @media

1. Use it directly in the CSS file:

@media 类型 and (条件1) and (条件二){
    css样式
}
@media screen and (max-width:1024px) {
    body{
        background-color: red;
    }
}

2. Use @import import

@import url("css/moxie.css") all and (max-width:980px);

3. It is also the most commonly used method-directly Use link connection, the media attribute is used to set the query method

                        

头部

    

        

左边

        

中间

        

右边

    

    

底部

The above is the detailed content of How to implement responsive layout with CSS. For more information, please follow other related articles on the PHP Chinese website!