當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

响应式布局Demo

發布時間：2025/3/12 HTML 13 豆豆

生活随笔收集整理的這篇文章主要介紹了响应式布局Demo 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

顧名思義，響應式布局就是為適應不同終端而形成的一種技術。我總結了一個簡單的例子幫助大家了解和學習響應式布局。

實現響應式布局的幾種方式：媒體查詢、JS、流體布局、彈性布局…

常用的meta標簽

注：強制讓文檔的寬度與設備的寬度保持1:1，并且文檔最大的寬度比例是1.0，且不允許用戶點擊屏幕放大瀏覽；

注：iphone設備中的safari私有meta標簽，它表示：允許全屏模式瀏覽；

注：iphone的私有標簽，它指定的iphone中safari頂端的狀態條的樣式；

注：讓用戶不允許對屏幕進行拉伸。

使用媒體查詢的三種方式

1、直接在CSS中使用

@media 類型（常選all/screen） and（條件1） and（條件2）{CSS選擇器{CSS屬性：屬性值；} }

2、使用link鏈接CSS，media屬性可以設置媒體查詢方式（常用）

eg. <link rel="stylesheet" type="text/css" href="css/02-響應式布局.css" media="all and (max-width:800px)"/>

3、使用Import導入，直接在url( )后面空格，間接媒體查詢方式

eg. @import url("css/XXX.css") all and (max-width:800px); 條件符合后在鏈接CSS文件

響應式Demo — HTML部分

首先，新建一個HTML 文件，命名Demo.html. 接著，新建一個CSS文件，文件名與HTML文件相同，Demo.css在HTML文件，head標簽中引入viewport視口功能，如下：
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />這是移動開發過程中必要語句
接著，將HTML文件與CSS文件關聯：<link rel="stylesheet" type="text/css" href="css/Demo.css"/>

在HTML文件，body標簽中寫入結構語句：

<body> <header id="header"><ul><li>header1</li><li>header2</li><li>header3</li><li>header4</li><li>header5</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></body>

響應式Demo — css部分

PC端效果如下所示，顯示header1-5導航欄，隱藏右上角小div：

我們要在CSS文件中寫入PC端的CSS樣式，在PC端的基礎上進行pad、手機端的更改，代碼如下：

*{ /* 使用通用選擇器進行整體共有樣式設置 */ margin: 0px; padding: 0px;font-size: 48px;text-align: center;box-sizing: border-box; } #header, #main, /*給頭部/主體/底部同時設置寬/高/背景色, 水平垂直居中 */ #foot{height: 100px; width: 1200px;background-color: pink;line-height: 100px;margin: 0 auto;min-width: 300px; } #header ul{width: 80%; } #header ul li{float: left;width: 20%;list-style: none;font-size: 20px; } #header div{ /* li 全部浮動,父盒子ul塌陷,相當于不存在了，div才能浮動到ul右側*/display: none; width: 50px;height: 50px;background-color: yellow;float: right;line-height: 50px;font-size: 20px;margin-top: 25px;margin-right: 25px; } #main{height: 520px; /* 給主體設置高度/文字垂直居中/上下邊框*/line-height: 520px;border-bottom: 10px solid white;border-top: 10px solid white;} /* 將主體分成三部分,左:中:右=1:2:1 分別設置不同背景色浮動*/ #main .left{ width: 25%;height: 500px;background-color: greenyellow;float: left; } #main .center{width: 50%;height: 500px;background-color: orange;border-right: 10px solid white;border-left: 10px solid white;float: left; } #main .right{width: 25%;height: 500px;background-color: paleturquoise;float: left; }

接下來，我們進行響應式的設置，在CSS中引入媒體查詢。

Pad端（假設屏幕最大寬度900px）效果如下所示，主體右端隱藏，其它部分正常顯示。

CSS樣式如下：

@media screen and (max-width: 1200px) { /* PC端頭部/主體/底部寬度100%顯示*/#header,#main,#foot{width: 100%;} }/*pad端主體只顯示左:中近似=1:2,center左邊有border部分，右border隱藏*/ @media screen and (max-width:900px ) { #main .right{display: none;}#main .left{width: 35%;}#main .center{width: 65%;border-right: hidden;} }

手機端(假設最大寬度550px)效果如下所示，header1-5導航欄隱藏，右側小div顯示，主體部分的左中右改為上中下顯示。

CSS代碼如下：

/*手機端整體高度增大,主體左中右浮動取消, 寬度都為100%*/ @media screen and (max-width: 550px) { #main{height: 920px;}#main .left{float: none;width: 100%;height: 250px;line-height: 250px;}/* center左右border改為上下border,為了不擠壓內容（IE盒子）,主體總寬度加20px*/#main .center{ float: none;width: 100%;height: 400px;line-height: 400px;border-left: hidden;border-bottom: 10px solid white;border-top: 10px solid white;}#main .right{ /*主體右端重新顯示*/display: block;float: none;width: 100%;height: 250px;line-height: 250px;} }#header ul{ /*頭部導航欄ul隱藏,右上角小div由隱藏改為顯示 */display: none; }#header div{display: block;}

看到這里，響應式已經介紹完了，點贊關注喲！！！

總結

以上是生活随笔為你收集整理的响应式布局Demo的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

布局
demo