css3什麼是自適應佈局-前端問答-PHP中文網

首頁

web前端

前端問答

css3什麼是自適應佈局

青灯夜游

Jun 02, 2022 pm 12:05 PM

csscss3

自適應佈局又稱為“響應式佈局”，是指可以自動識別螢幕寬度、並做出相應調整的網頁佈局；這樣的網頁能夠相容於多個不同的終端，而不是為每個終端機做一個特定的版本。自適應佈局是為解決行動裝置瀏覽網頁而誕生的，能夠為使用不同終端的使用者提供很好的使用者體驗。

css3什麼是自適應佈局

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

什麼是自適應佈局

自適應佈局又稱“響應式佈局”，可以自動識別螢幕寬度、並做出相應調整的網頁佈局，簡單來講就是網頁能夠相容多個不同的終端（設備），而不是為每個終端做一個特定的版本。

其實簡單來講自適應與非自適應的不同就是一個頁面不管在什麼設備的分辨率下都能自動識別適應，為瀏覽的用戶帶來了更好的體驗效果。

這個概念是為解決行動裝置瀏覽網頁而誕生的。自適應佈局能夠為使用不同終端的使用者提供很好的使用者體驗，而且隨著大螢幕智慧型手機的普及，用「大勢所趨」來形容也不為過。

css3實作自適應佈局的方法

常用的方式有以下幾種：

使用CSS 中的媒體查詢（最簡單）；
使用JavaScript（使用成本比較高）；
使用第三方開源框架（例如bootstrap，可以很好的支援各種瀏覽器）。

接下來我們以媒體查詢為例來具體示範自適應佈局的實作。

1、設定meta 標籤

首先，我們需要設定meta 標籤來告訴瀏覽器，讓視窗（網頁的視覺區域）的寬度等於裝置的寬度，並禁止使用者對頁面的縮放，如下所示：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

在設定視窗時需要注意，視窗就是網頁可見區域的尺寸，設定視口時只設定寬度就行，不用在乎高度，具體高度由網頁內容自動撐開。上面meta 標籤中內容的意義如下：

viewport：即一個視窗，表示網頁的視覺區域；
##width：控制viewport的大小，可以指定一個具體的值，例如600，也可以是由關鍵字組成的特殊值，例如device-width 就表示裝置的寬度；
initial-scale：表示初始縮放比例，也就是頁面第一次載入時的縮放比例；
maximum-scale：表示允許使用者縮放的最大比例，範圍從0 到10.0；
minimum-scale：表示允許使用者縮放到最小比例，範圍從0 到10.0；
user-scalable：表示使用者是否可以手動縮放，「yes」表示允許縮放，「no」表示禁止縮放。

2、媒體查詢

CSS 媒體查詢可以依照指定的條件，針對不同的媒體類型（screen print）定義不同的CSS樣式，讓使用不同裝置的使用者都能得到最佳的體驗。

關於媒體查詢有以下三種實作方式：

1）、直接在CSS 檔案中使用，範例程式碼如下：

@media (max-width: 320px) {
    /*0~320*/
    body {
        background: pink;
    }
}
@media (min-width: 321px) and (max-width: 375px) {
    /*321~768*/
    body {
        background: red;
    }
}
@media (min-width: 376px) and (max-width: 425px) {
    /*376~425*/
    body {
        background: yellow;
    }
}
@media (min-width: 426px) and (max-width: 768px) {
    /*426~768*/
    body {
        background: blue;
    }
}
@media (min-width: 769px) {
    /*769~+∞*/
    body {
        background: green;
    }
}

2）、使用@import 匯入，範例程式碼如下：

@import &#39;index01.css&#39; screen and (max-width:1024px) and (min-width:720px)
@import &#39;index02.css&#39; screen and (max-width:720px)

3）、在link 標籤中使用，範例程式碼如下：

<link rel="stylesheet" type="text/css" href="index01.css" media="screen and (max-width:1024px) and (min-width:720px)"/>
<link rel="stylesheet" type="text/css" href="index02.css" media="screen and (max-width:720px)"/>

下面透過一個綜合的範例來示範一下響應式佈局的實作：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>自适应布局（响应式布局）</title>
        <meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no" />
        <style>
            *{
                margin: 0px;
                padding: 0px;
                font-family: "微软雅黑";
            }
            #head, #foot, #main
            {
                height: 100px;
                width: 1200px;
                /*width: 85%;*/
                background-color: goldenrod;
                text-align: center;
                font-size: 48px;
                line-height: 100px;
                margin: 0 auto;
            }
            #head div{
                display: none;
                font-size: 20px;
                height: 30px;
                width: 100px;
                background-color: green;
                float: right;
                line-height: 30px;
                margin-top: 35px;
            }
            #head ul{
                width: 80%;
            }
            #head ul li{
                width: 20%;
                float: left;
                text-align: center;
                list-style: none;font-size: 20px;
            }
            #main{
                height: auto;
                margin: 10px auto;
                overflow: hidden;
            }
            .left, .center, .right{
                height: 600px;
                line-height: 600px;
                float: left;
                width: 20%;
                background-color: red
            }
            .center{
                width: 60%;
                border-left: 10px solid #FFF;
                border-right: 10px solid #FFF;
                box-sizing: border-box;
            }
            @media only screen and (max-width: 1200px) {
                #head, #foot, #main{
                width: 100%;
                }
            }
            @media only screen and (max-width: 980px) {
                .right{
                    display: none;
                }
                .left{
                    width: 30%;
                }
                .center{
                    width: 70%;
                    border-right: hidden;
                }
            }
            @media only screen and (max-width: 640px) {
                .left, .center, .right{
                    width: 100%;
                    display: block;
                    height: 200px;
                    line-height: 200px;
                }
                .center{
                    border: hidden;
                    border-top: 10px  solid #FFFFFF;
                    border-bottom: 10px solid #FFFFFF;
                    height: 600px;
                    line-height: 600px;
                }
                #head ul{
                    display: none;
                }
                #head div{
                    display: block;
                }
            }
        </style>   
    </head>
    <body>
        <div>
            <header id="head">
                <ul>
                    <li>header1</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                    <li>header2</li>
                </ul>
                <div>icon</div>
            </header>
            <section id="main">
                <div class="left">
                    left
                </div>
                <div class="center">
                    center
                </div>
                <div class="right">
                    right
                </div>
            </section>
            <footer id="foot">
                footer
            </footer>
        </div>
    </body>
</html>

當瀏覽器視窗小於1200 像素大於980 像素時，和大於640 像素小於980 像素時的樣式是不同的

css3什麼是自適應佈局

（學習影片分享：

css影片教學、web前端）

以上是css3什麼是自適應佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

反應的好處：性能，可重用性等等Apr 15, 2025 am 12:05 AM

React受歡迎的原因包括其性能優化、組件復用和豐富的生態系統。 1.性能優化通過虛擬DOM和diffing機制實現高效更新。 2.組件復用通過可複用組件減少重複代碼。 3.豐富的生態系統和單向數據流增強了開發體驗。

反應：創建動態和交互式用戶界面Apr 14, 2025 am 12:08 AM

React是構建動態和交互式用戶界面的首選工具。 1)組件化與JSX使UI拆分和復用變得簡單。 2)狀態管理通過useState鉤子實現，觸發UI更新。 3)事件處理機制響應用戶交互，提升用戶體驗。

React與後端框架：比較Apr 13, 2025 am 12:06 AM

React是前端框架，用於構建用戶界面；後端框架用於構建服務器端應用程序。 React提供組件化和高效的UI更新，後端框架提供完整的後端服務解決方案。選擇技術棧時需考慮項目需求、團隊技能和可擴展性。

HTML和React：標記與組件之間的關係Apr 12, 2025 am 12:03 AM

HTML和React的關係是前端開發的核心，它們共同構建現代Web應用的用戶界面。 1)HTML定義內容結構和語義，React通過組件化構建動態界面。 2)React組件使用JSX語法嵌入HTML，實現智能渲染。 3)組件生命週期管理HTML渲染，根據狀態和屬性動態更新。 4)使用組件優化HTML結構，提高可維護性。 5)性能優化包括避免不必要渲染，使用key屬性，保持組件單一職責。

反應與前端：建立互動體驗Apr 11, 2025 am 12:02 AM

React是構建交互式前端體驗的首選工具。 1)React通過組件化和虛擬DOM簡化UI開發。 2)組件分為函數組件和類組件，函數組件更簡潔，類組件提供更多生命週期方法。 3)React的工作原理依賴虛擬DOM和調和算法，提高性能。 4)狀態管理使用useState或this.state，生命週期方法如componentDidMount用於特定邏輯。 5)基本用法包括創建組件和管理狀態，高級用法涉及自定義鉤子和性能優化。 6)常見錯誤包括狀態更新不當和性能問題，調試技巧包括使用ReactDevTools和優

React和前端堆棧：工具和技術Apr 10, 2025 am 09:34 AM

React是一個用於構建用戶界面的JavaScript庫，其核心是組件化和狀態管理。 1)通過組件化和狀態管理簡化UI開發。 2)工作原理包括調和和渲染，優化可通過React.memo和useMemo實現。 3)基本用法是創建並渲染組件，高級用法包括使用Hooks和ContextAPI。 4)常見錯誤如狀態更新不當，可使用ReactDevTools調試。 5)性能優化包括使用React.memo、虛擬化列表和CodeSplitting，保持代碼可讀性和可維護性是最佳實踐。

React在HTML中的作用：增強用戶體驗Apr 09, 2025 am 12:11 AM

React通過JSX與HTML結合，提升用戶體驗。 1)JSX嵌入HTML，使開發更直觀。 2)虛擬DOM機制優化性能，減少DOM操作。 3)組件化管理UI，提高可維護性。 4)狀態管理和事件處理增強交互性。

REACT組件：在HTML中創建可重複使用的元素Apr 08, 2025 pm 05:53 PM

React組件可以通過函數或類定義，封裝UI邏輯並通過props接受輸入數據。 1)定義組件：使用函數或類，返回React元素。 2)渲染組件：React調用render方法或執行函數組件。 3)復用組件：通過props傳遞數據，構建複雜UI。組件的生命週期方法允許在不同階段執行邏輯，提升開發效率和代碼可維護性。

See all articles