web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

本篇內(nèi)容介紹了“web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

成都創(chuàng)新互聯(lián)公司自2013年起，先為永豐等服務(wù)建站，永豐等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為永豐企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

一、Flex布局要領(lǐng)

Flexible Layout：彈性布局

Bootstrap：柵格布局

產(chǎn)品是做業(yè)務(wù)的，產(chǎn)品是為業(yè)務(wù)服務(wù)的。框架能滿足百分之九十幾的需求。

CSS1：display:block;

CSS2：display:table;

CSS3：display:flex; display:box; display:grid;

實(shí)踐案例，設(shè)計(jì)如下圖的頁面：

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

分析頁面：

整體是三行，header占整體頁面20%，main占60%，footer占20%。

響應(yīng)式布局，可隨著頁面大小自動(dòng)放大、縮小調(diào)整。

容器：flex container

頁面布局 —— 容器 ，容器中還可以放小容器。

局部：flex-direction:column

局部有橫向。

整體：flex-direction:row

整體是橫向布局。

整體頁面可以做到橫縱相交。

動(dòng)手實(shí)驗(yàn)—— Flex box layout

窄屏模式：Mobile First

手機(jī)優(yōu)先，因?yàn)楝F(xiàn)在移動(dòng)互聯(lián)網(wǎng)時(shí)代，使用手機(jī)看頁面的比例已經(jīng)超過PC，所以做頁面的時(shí)候先考慮Mobile Fierst。

手機(jī)和PC顯示最大的區(qū)別不是分辨率，而是顯示比例的區(qū)別。手機(jī)是窄屏模式、PC是寬屏模式。

頁面不需要做兩套，而是基于media query(媒介查詢)，自動(dòng)偵測是窄屏模式還是寬屏模式。

窄屏模式下main區(qū)域是橫向排列，寬屏模式下main區(qū)域內(nèi)容是縱向排列。

寬屏模式：

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

  1. 動(dòng)手實(shí)驗(yàn)

    vscode里新建文件，擴(kuò)展名是html。

    代碼編輯區(qū)輸入html選擇html5，此時(shí)vscode會自動(dòng)填寫html5的固定內(nèi)容：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport">

     

    • 給vscode安裝插件Live Server，裝好以后在html文件編輯區(qū)鼠標(biāo)右鍵調(diào)出菜單選擇“open with live server”即可迅速看到頁面顯示效果。

    • 先做布局，再寫樣式。

      <div class = "container">
    <div class = "header"> header</div>
    <div class = "main">
        <div class = "nav"> nav </div>
        <div class = "article"> article </div>
        <div class = "aside"> aside </div>
    </div>
    <divv class = "footer" > footer </div>
    
    </div>


</body>
</html>

      做完的樣式如下：

    • 編寫網(wǎng)頁使用編程工具Visual Studio Code，國外軟件推薦使用必應(yīng)搜索(英文版)。

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

  • 接下來加樣式：<style>標(biāo)簽與</style>標(biāo)簽之間加樣式。

    <style>
        .container {
            display: flex;
            height: 100vh;
            flex-direction: column;
        }

        .main {
            display: flex;
            flex: 1;
            flex-direction: column;
        }

        .main .article {
            flex: 1;
            background-color: yellowgreen;
        }

        .main .nav,
        .main .aside {
            background-color: bisque;
        }

        .header,
        .footer {
            background-color: green;
            height: 20vh;
        }
    </style>

    加了style后的效果

  • 注意.container里面的描述height: 100vh; (高度百分百)、.header和.footer 里面的描述height:20vh;(高度20%)。寫網(wǎng)頁最好寫成百分比，不要寫成絕對值。寫絕對值無法縮放，寫成百分比時(shí)放大縮小頁面會自動(dòng)縮放調(diào)整。

  • 媒體查詢，即判斷顯示設(shè)備，目前窄屏優(yōu)先(適配手機(jī))已完成，然后編寫代碼判斷是否寬屏，編寫寬屏優(yōu)先(適配PC)的代碼。

    @media screen and (min-width:400px) {

            .main {
                flex-direction: row;
            }

            .main .nav,
            .main .aside {
                flex: 0 0 20vw;
            }

        }

    min-width:400px 表示當(dāng)屏幕寬度比大于等于400px時(shí)，切換布局方式。(老師開始設(shè)576，此時(shí)經(jīng)常不會切換到寬屏模式，觸發(fā)條件數(shù)字偏大)

以上是flex box布局模式。

二、Bootstrap柵格布局

推特出品的前端模板，老師推薦用bing國際版查官網(wǎng)https://getbootstrap.com/，在官網(wǎng)查資料。

(視頻資料顯示官網(wǎng)bootstrap版本是4.1.3，推斷該視頻是2年前出的)

  • 實(shí)踐案例：

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

  • 從bootstrap找到card模板：

    <div class="card">

  • 在head中導(dǎo)入bootstrap的鏈接

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

  • card復(fù)制2份，最終完整代碼

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
        integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<body>

    <div class="card" >
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h6 class="card-title">Card title</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" >
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h6 class="card-title">Card title</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <div class="card" >
        <img class="card-img-top" src=".../100px180/" alt="card-img-cap">
        <div class="card-body">
            <h6 class="card-title">Card title</h6>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

</body>

</html>

  • card效果1，直接復(fù)制后card是縱向排列成3個(gè)。

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

  • 加了container會有留白和間距。(網(wǎng)頁設(shè)計(jì)一大重要技巧是合適的留白，整齊的留白和間距。)

    <div class="container">
        <div class="row">

    container下面一行寫明布局是"row"，現(xiàn)在卡片是橫向排列了。注意：bootstrap布局優(yōu)先考慮的是手機(jī)優(yōu)先。

  • 再調(diào)整style

    <style>
        body {
            margin-top: 1em;
            margin-left: 1em;
        }

        .mycard {
            margin-right: 1em;
            margin-bottom: 1em;
        }
    </style>

    marin-top指的是上邊距，marin-left指的是左邊距，marin-right指的是右邊距，marin-bottom指的是下邊距。

    1em指的是當(dāng)前字體大小的一個(gè)字符高或?qū)挕?5px是指15個(gè)像素。

    自定義了.mycard，指定右邊和下邊空一個(gè)字符間距。

  • 給下方的3個(gè)card 添加 mycard約束。

  • 注意畫面的層次感，背景不要用全白，例如京東很多頁面背景是灰色。

    在body中添加background-color:#f4f4f4，不要使用gray，使用gray顏色太暗，#f4f4f4白中帶灰做背景恰好。

  • 然后修改card頭部顯示的圖片，從必應(yīng)上搜索免費(fèi)圖片，將其連接加入src=""的雙引號中間。

  • 調(diào)整整體邊距、卡片邊距、card寬度為14rem。

    最終代碼：

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport">

    最終效果：

web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局

使用模板的優(yōu)點(diǎn)是自動(dòng)適應(yīng)不同設(shè)備不同分辨率，當(dāng)屏幕寬度大時(shí)可以一行顯示3個(gè)card，屏幕小一些一行自動(dòng)調(diào)整為顯示2個(gè)card，屏幕再變窄時(shí)會自動(dòng)調(diào)整為一行顯示1個(gè)card。

“web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

分享標(biāo)題：web怎么實(shí)現(xiàn)響應(yīng)式網(wǎng)頁布局
URL鏈接：http://muchs.cn/article46/ghjohg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、企業(yè)網(wǎng)站制作、、云服務(wù)器、定制開發(fā)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司