欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

html5的響應(yīng)式布局的方法示例詳解

  發(fā)布時(shí)間：2025-04-21 16:45:36   作者：2301_80121073   我要評(píng)論
這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡(jiǎn)要介紹了CSS Grid布局的基礎(chǔ)知識(shí)和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局，感興趣的朋友一起看看吧

一 使用媒體查詢響應(yīng)式布局

        使用的參數(shù)@media這是常用的參數(shù)
                    width,height代表的是瀏覽器可視寬度，高度

                         device-width:設(shè)備屏幕的寬度

                         device-height:設(shè)備屏幕的高度

 使用的是內(nèi)部樣式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒體查詢</title>
    <style>
        .div{
            /* width:1200px; */
            width:100%;
            /* height:600px; */
        }
        .div div{
            float: left;
            height:100px;
        }
    </style>
    <style media="(min-width:330px) and (max-width:430px)">
            .div div{
                width:33.3%
            }
            .div div:nth-child(1){
            background-color: aqua;
            }
            .div div:nth-child(2){
                background-color: yellow;
            }
            .div div:nth-child(3){
                background-color: green;
            }
    </style>
    <style media="(min-width:100px) and (max-width:329px)">
        .div div{
                width:50%
            }
            .div div:nth-child(1){
            background-color: aqua;
            }
            .div div:nth-child(2){
                background-color: yellow;
            }
            .div div:nth-child(3){
                background-color: green;
            }
    </style>
    <style media="(max-width:99px)">
       .div div{
                width:100%
            }
           .div div:nth-child(1){
            background-color: aqua;
            }
           .div div:nth-child(2){
                background-color: yellow;
            }
           .div div:nth-child(3){
                background-color: green;
            }
    </style>
</head>
<body>
    <div class="div">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

外部樣式

        進(jìn)行創(chuàng)建三個(gè)的css的樣式

               第一個(gè)

                      css-1.css

.div{
    /* width:1200px; */
    width:100%;
    /* height:600px; */
}
.div div{
    float: left;
    height:100px;
}
.div div:nth-child(1){
    background-color: aqua;
    }
    .div div:nth-child(2){
        background-color: yellow;
    }
    .div div:nth-child(3){
        background-color: green;
    }

        第二個(gè)

                css-2.css

.div div{
    width:33.3%
}

        第三個(gè)

                css-3.css

.div div{
    width:50%
}

        將這三個(gè)分別引入到MediaQuery.html中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>媒體查詢</title>
    <link rel="stylesheet" href="./css-1.css">
    <link rel="stylesheet" href="./css-2.css" media="(min-width:330px) and (max-width:430px)">
    <link rel="stylesheet" href="./css-3.css" media="(min-width:100px) and (max-width:329px)"> 
</head>
<body>
    <div class="div">
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

        這就是我們媒體查詢的響應(yīng)式自適應(yīng)

二 使用flex進(jìn)行響應(yīng)式布局

        我們?yōu)槭裁词褂胒lex

                用來(lái)為盒狀模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局更加符合響應(yīng)        式設(shè)計(jì)的特點(diǎn)

        flex-direction

       作用:子元素在父元素盒子中的排列方式
        row:默認(rèn)值,按從左到右的順序顯示

        row-reverse:與row相同,但是以相反的順序

        column:靈活的項(xiàng)目將垂直顯示，按從上到下的順序

        column-reverse:與column相同，但是以相反的順序

        flex-wrap

                作用：子元素在父元素盒子中的是否換行(列)

                nowrap：默認(rèn)值。不換行或不換列。

                wrap：換行或換列。

                wrap-reverse：換行或換列，但以相反的順序。

        justify-content

                作用：用來(lái)在存在剩余空間時(shí)，設(shè)置為間距的方式

                flex-start：默認(rèn)值。從左到右，挨著行的開頭。
                flex-end：從右到左，挨著行的結(jié)尾。
                center：居中顯示。
                space-between：平均分布在該行上，兩邊不留間隔空間。
                space-around：平均分布在該行上，兩邊留有一半的間隔空間。

        align-items

                作用：設(shè)置每個(gè)flex元素在交叉軸上的默認(rèn)對(duì)齊方式

                flex-start：位于容器的開頭。
                flex-end：位于容器的結(jié)尾
                center：居中顯示。

        align-content

                作用：設(shè)置每個(gè)flex元素在交叉軸上的默認(rèn)對(duì)齊方式

                flex-start：位于容器的開頭。
                flex-end：位于容器的結(jié)尾。
                center：位于容器的中心。
                space-between：之間留有空白。
                space-around：兩端都留有空白。

        其他屬性

                flex-basis：設(shè)置彈性盒伸縮基準(zhǔn)值。
                flex-grow：設(shè)置彈性盒子的擴(kuò)展比率。
                flex-shrink：設(shè)置彈性盒子的縮小比率。
                flex：flex-grow、flex-shrink、flex-basis的縮寫

三 CSS Grid        

基礎(chǔ)布局：網(wǎng)格容器與項(xiàng)目

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  grid-template-rows: repeat(3, 1fr);     /* 3行 */
  gap: 20px;                             /* 網(wǎng)格間距 */
  padding: 20px;
  background: #eee;
}
.grid-item {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
}
</style>
</head>
<body>
<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>
</body>
</html>

響應(yīng)式網(wǎng)格：自動(dòng)換行

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  max-width: 1200px;
  margin: 0 auto;
}
.items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自動(dòng)填充列 */
  gap: 15px;
}
.item {
  background: #f0f0f0;
  padding: 20px;
  border-radius: 6px;
}
</style>
</head>
<body>
<div class="container">
  <div class="items">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item">Item 4</div>
    <div class="item">Item 5</div>
    <div class="item">Item 6</div>
  </div>
</div>
</body>
</html>

到此這篇關(guān)于html5的響應(yīng)式布局的方法的文章就介紹到這了,更多相關(guān)html5響應(yīng)式布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • 吃透移動(dòng)端 Html5 響應(yīng)式布局

    這篇文章主要介紹了吃透移動(dòng)端 Html5 響應(yīng)式布局,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)
    2019-12-16

  • 淺談html5 響應(yīng)式布局

    本文從響應(yīng)式布局的概念，響應(yīng)式布局的優(yōu)缺點(diǎn)以及設(shè)計(jì)理念，還有具體的實(shí)現(xiàn)代碼都做了詳細(xì)說(shuō)明，是篇不可多得的文章，這里推薦給小伙伴
    2014-12-24

  • 詳解px單位html5響應(yīng)式方案

    這篇文章主要介紹了詳解px單位html5響應(yīng)式方案的相關(guān)資料，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-03-08

  • 詳解HTML5中的picture元素響應(yīng)式處理圖片

    這篇文章主要介紹了詳解HTML5中的picture元素響應(yīng)式處理圖片，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2018-01-03

  • HTML5響應(yīng)式（自適應(yīng)）網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)

    本篇文章主要介紹了HTML5響應(yīng)式（自適應(yīng)）網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
    2017-11-17

  • 推薦10個(gè)HTML5響應(yīng)式框架

    這篇文章主要為大家推薦10個(gè)HTML5響應(yīng)式框架，HTML5框架可以快速構(gòu)建響應(yīng)式網(wǎng)站，它們幫助程序員減少編碼工作，減少冗余的代碼，想要了解的朋友可以參考一下
    2016-02-25

最新評(píng)論