How to implement responsive web design

The content shared with you in this article is about the implementation of responsive web design. The content is of great reference value. I hope it can help friends in need.

Usage of media query

media media query contains an optional media type and, subject to the conditions of the CSS3 specification, contains zero or more expressions that describe the media Features will eventually be parsed as true or false. If the media type specified in the media query matches the type of device used to display the document, and all expressions evaluate to true, then the result of the media query is true.

• 500px -800px for devices between @media screen and (min-width: 500px) and (max-width: 800px) { ... }

• Minimum width 500 @media screen and ( min-width: 500px){... }

• @media not print and (max-width: 1200px)

Usage:

Example

html：

nbsp;html>


    <meta>
    <title>响应式设计</title>

    <link>
    <link>
    <link>


    <p>头部</p>
    <p>
        </p><p>左边</p>
        <p>中间</p>
        <p>右边</p>
     
    <p>底部</p>

css1：

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
}

.left{
    width:100%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:100%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css2:

.body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    
    
}

.left{
    width:30%;
    height:200px;
    background:#0f0;
}

.zhon{
    width:70%;
    height:350px;
    background:#f00;
}

.right{
    width:100%;
    height:200px;
    background:#00f;
}

css3:

 .body{
    margin:0;
    
}


.top,.zhong,.xia{
    width:100%;
    margin:0 auto;
    
}


.top{
    height:100px;
    background:#00f;
    
}


.zhong{
overflow:hidden;
    
}

.xia{
    height:100px;
    background:#ff0;
    
}

.left,.zhon,.right{
    float:left;
    background:#0f0;
    
}

.left{
    width:20%;
    height:200px;
    
}

.zhon{
    width:45%;
    height:350px;
    margin:0 20px;
    
}

.right{
    width:25%;
    height:200px;
}

Running results:

1,

2,

3,

Summary:.Media QueryMedia Queries can use different styles under different conditions, so that the page can achieve different rendering effects under different terminal devices; so far, CSS3 Media Queries is supported by many browsers, and is perfectly supported in all modern browsers except IE6-8 browsers. Another difference is that Media Queries do not need to be prefixed in different browsers like other CSS3 properties.

Related recommendations:

About css responsive implementation code and effects

How to implement responsive layout with CSS

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