Implementieren Sie ein einfaches responsives Layout mit CSS3 (Code)-CSS-Tutorial-php.cn

Implementieren Sie ein einfaches responsives Layout mit CSS3 (Code)

PHPz

Freigeben： 2017-04-03 15:09:57

Original

2836 Leute haben es durchsucht

In diesem Artikel wird kurz erklärt, wie Sie mit CSS3 ein einfaches responsives Layout implementieren:

CSS3-Datei:

*{
    margin:0px;
    padding: 0px;}.heading,.container,.footing{
    margin: 10px auto;}.heading{
    height: 100px;
    background-color: red;}.left,.right,.main{
    height: 300px;
    background-color: yellow;}.footing{
    height: 100px;
    background-color: gray;}
<!--media="only screen and (max-width:640px)" 这句话的意思是:只要当渲染屏幕的宽度不大于640px的时候才会使用这个样式表-->
@media screen and (min-width: 960px){    .heading,    .container,    .footing{
        width:960px;

    }    .left,    .main,    .right{
        float: left;
        height: 500px;
    }    .left,    .right{
        width:200px;

    }    .main{
        margin: 0px 5px;
        width:550px;
    }    .container{
        height: 500px;
    }
}
@media screen and (min-width: 600px) and (max-width: 960px){    .heading,    .container,    .footing{
        width: 600px;

    }    .left,    .main{
        float: left;
        height:400px;

    }    .right{
        display: none;
    }    .left{
        width: 160px;

    }    .main{
        width: 435px;
        margin-left: 5px;
    }    .container{
        height: 400px;
    }
}

@media screen and (max-width: 600px){    .heading,    .container,    .footing{
        width: 400px;
    }    .left,    .right{
        width: 400px;
        height: 100px;
    }    .main{
        margin-top: 10px;
        width:400px;
        height:200px;
    }    .right{
        margin-top: 10px;

    }    .container{
        height: 420px;
    }
}

Nach dem Login kopieren

HTML5-Datei:

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <meta name ="viewport" content="width = device-width,initial-scale=1">
    <title>index01</title>
    <link href="style01.css" type="text/css" rel="stylesheet"></head><body>
    <p></p>
    <p>
        <p></p>
        <p></p>
        <p></p>
    </p>
    <p></p></body></html>

Nach dem Login kopieren

Der Code in diesem Artikel kann dieselbe Schnittstelle implementieren und unterschiedliche Layouts mit unterschiedlichen Rendering-Breiten anzeigen.

Das obige ist der detaillierte Inhalt vonImplementieren Sie ein einfaches responsives Layout mit CSS3 (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!