Rumah > Artikel > hujung hadapan web > 使用css3实现简单的响应式布局（代码）

使用css3实现简单的响应式布局（代码）

PHPzasal: 2017-04-03 15:09:572793semak imbas

本文简单的讲解了如何使用css3实现简单的响应式布局：

css3文件：

*{
    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;
    }
}

html5文件:

<!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>

本文的代码，可以实现同一个界面，在不同宽度的渲染宽度下显示不同的布局。

Atas ialah kandungan terperinci 使用css3实现简单的响应式布局（代码）. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：移动端web页面自适应:rem的运用Artikel seterusnya：高性能的视差动画【译】

Artikel berkaitan

Lihat lagi