How to implement responsive layout with CSS

不言
Release: 2018-07-24 10:43:50
Original
3402 people have browsed it

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;
    }
}
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!