溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Bootstrap pc pad phone 響應(yīng)式布局

發(fā)布時(shí)間：2020-07-11 10:59:07 來(lái)源：網(wǎng)絡(luò) 閱讀：647 作者：津沙港灣 欄目：開發(fā)技術(shù)

主頁(yè)面 media.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>響應(yīng)式布局演示實(shí)例(Medias Query)</title>
    <style>
    body,h3{margin:0px;padding:0px;color:white}
    section#main,header,aside,footer{
        background:pink;
        margin:5px 0;
    }
    h3 {text-align:center;foot-size:3em}
    section#container{
        margin:0 auto;
        width:960px;
    }
    header {
        float:left;
        width:100%;
        line-height:100px;
    }
    #left {
        float:left;
        width:200px;
        line-height:400px;
    }
    section#main {
        float:left;
        width:540px;
        line-height:400px;
        margin-left:10px;
    }
    #right {
        float:right;
        width:200px;
        line-height:400px;
    }
    footer {
    float:left;
    width:100%;
    line-height:80px;
    }
        
    </style>
    /*1000px 以上屏幕顯示*/
    <link rel="stylesheet" type="text/css" media="screen and (min-width:1000px)" href="pc.css" />
    /*pad 640-1000px 屏幕顯示*/
    <link rel="stylesheet" type="text/css" media="screen and (min-width:640px) and (max-width:1000px)" href="pad.css" />
    /*phone 640px以下 屏幕顯示*/
    <link rel="stylesheet" type="text/css" media="screen and (max-width:639px)" href="phone.css" />
</head>
<body>
    <section id="container">
        <header><h3>Header</h3></header>
        <aside id="left"><h3>Left</h3></aside>
        <section id="main"><h3>Main</h3></section>
        <aside id="right"><h3>Right</h3></aside>
        <footer><h3>Footer</h3></footer>
    </section>
</body>
</html>

PC端 pc.css

/*1000px 以上屏幕顯示*/

    h3{color:yellow;font-size:4em}
    section#container{
        width:1160px;
    }
    section#main {
        width:740px;
    }

pad端pad.css

/*pad 640-1000px 屏幕顯示*/

        h3 {color:green;font-size:2.5em}
        section#container{
            width:600px;
        }
        #left {
            width:160px;            
        }
        section#main{
            width:430px;
        }
        #right {
            display:none;
        }

phone端 phone.css

    /*phone 640px以下 屏幕顯示*/

        h3 {color:red;font-size:1.5em}
        section#container {
            width:400px;
        }
        #left {
            float:left;
            width:100%;
            line-height:100px;
        }
        section#main {
            float:left;
            width:100%;
            line-height:200px;
            margin-left:0px;
        }
        #right {
            float:left;
            width:100%;
            line-height:100px;
            display:none;
        }

瀏覽器輸出

pc端

Bootstrap pc pad phone 響應(yīng)式布局

pad端

Bootstrap pc pad phone 響應(yīng)式布局

phone端

Bootstrap pc pad phone 響應(yīng)式布局

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手