亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

html5的響應式布局的方法示例詳解

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

一 使用媒體查詢響應式布局

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

                         device-width:設備屏幕的寬度

                         device-height:設備屏幕的高度

 使用的是內(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>

外部樣式

        進行創(chuàng)建三個的css的樣式

               第一個

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

        第二個

                css-2.css

.div div{
    width:33.3%
}

        第三個

                css-3.css

.div div{
    width:50%
}

        將這三個分別引入到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>

        這就是我們媒體查詢的響應式自適應

二 使用flex進行響應式布局

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

                用來為盒狀模型提供最大的靈活性。任何一個容器都可以指定為Flex布局更加符合響應        式設計的特點

        flex-direction

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

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

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

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

        flex-wrap

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

                nowrap：默認值。不換行或不換列。

                wrap：換行或換列。

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

        justify-content

                作用：用來在存在剩余空間時，設置為間距的方式

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

        align-items

                作用：設置每個flex元素在交叉軸上的默認對齊方式

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

        align-content

                作用：設置每個flex元素在交叉軸上的默認對齊方式

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

        其他屬性

                flex-basis：設置彈性盒伸縮基準值。
                flex-grow：設置彈性盒子的擴展比率。
                flex-shrink：設置彈性盒子的縮小比率。
                flex：flex-grow、flex-shrink、flex-basis的縮寫

三 CSS Grid        

基礎布局：網(wǎ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>

響應式網(wǎ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)); /* 自動填充列 */
  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>

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

相關文章

  • 吃透移動端 Html5 響應式布局

    這篇文章主要介紹了吃透移動端 Html5 響應式布局,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習
    2019-12-16

  • 淺談html5 響應式布局

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

  • 詳解px單位html5響應式方案

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

  • 詳解HTML5中的picture元素響應式處理圖片

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

  • HTML5響應式（自適應）網(wǎng)頁設計的實現(xiàn)

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

  • 推薦10個HTML5響應式框架

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

最新評論