How to implement responsive web design

不言
Release: 2018-07-24 11:17:44
Original
1671 people have browsed it

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:

How to implement responsive web design

Example

html:

nbsp;html>


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

    <link>
    <link>
    <link>


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

Copy after login

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

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

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

Running results:

1,

How to implement responsive web design

2,

How to implement responsive web design

3,

How to implement responsive web design

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!

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