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

HTML

入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记

發(fā)布時間：2024/2/28 HTML 22 豆豆

生活随笔收集整理的這篇文章主要介紹了入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

文章目錄

視口基礎(chǔ)知識
- 視口概念
- 視口基本屬性
- - meta 標簽
- 視口應用實例
媒體查詢基礎(chǔ)知識
- 媒體查詢概念
- demo1-媒體查詢
- demo1效果
百分比布局
- 百分比布局概述
- demo2-百分比布局
- demo2效果圖
響應式柵格系統(tǒng)
- 柵格系統(tǒng)概述
彈性盒布局
綜合項目1——環(huán)保網(wǎng)站
綜合項目2——個人社交網(wǎng)站

視口基礎(chǔ)知識

視口概念

視口在響應式設(shè)計中是一個非常重要的概念。視口的概念針對移動端瀏覽器，分為兩種視口，一種是可見視口即設(shè)備大小，另一種是視窗視口即網(wǎng)頁寬度。

視口基本屬性

meta 標簽

HTML5中，<meta>標簽可以用于配置視口屬性。

user-scalable：用于設(shè)置用戶是否可以縮放，默認為yes。
width：用于設(shè)置視窗視口的寬度，這里表示與可見視口寬度相同。
initial-scale：用于設(shè)置初始縮放比例，取值為0~10.0。
maximum-scale：用于設(shè)置最大縮放比例，取值為0~10.0。

視口應用實例

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <meta name="format-detection"content="telephone=no, email=no" /> <meta name="renderer" content="webkit"> <meta name="HandheldFriendly" content="true"> <meta name="MobileOptimized" content="320"> <meta name="screen-orientation" content="portrait"> <meta name="full-screen" content="yes"> <meta name="x5-fullscreen" content="true"> <meta name="browsermode" content="application"> <meta name="x5-page-mode" content="app"> <meta name="msapplication-tap-highlight" content="no">

媒體查詢基礎(chǔ)知識

媒體查詢概念

在CSS3規(guī)范中，媒體查詢可以根據(jù)視口寬度、設(shè)備方向等差異來改變頁面的顯示方式。媒體查詢由媒體類型和條件表達式組成，示例代碼如下所示：

@media screen and (max-width: 960px) {/*樣式設(shè)置*/ }

表示媒體類型為screen并且屏幕寬度小于等于960px時的樣式。

demo1-媒體查詢

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="user-scalable=no, width=device-width,initial-scale=1.0, maximum-scale=1.0"><title>媒體查詢</title><style type="text/css">body {background-color: red;}@media (min-width: 320px){body {background-color: blue;}}@media (min-width: 414px){body {background-color: yellow;}}@media (min-width: 768px){body {background-color: grey;}}@media (min-width: 960px){body {background-color: pink;}}</style> </head> <body> </body> </html>

demo1效果

當瀏覽器size不同時，會顯示不同顏色

百分比布局

百分比布局概述

由于媒體查詢只能針對某幾個特定階段的視口，在捕捉到下一個視口前，頁面的布局是不會變化的，這樣會影響頁面的顯示，同時也無法兼容日益增多的各種設(shè)備。所以，想要做出真正靈活的頁面，還需要用百分比布局代替固定布局，并且使用媒體查詢限制范圍。

其實固定布局（以像素為單位）可以換算為百分比寬度，來實現(xiàn)百分比布局。

換算公式為：目標元素寬度/父盒子寬度=百分數(shù)寬度

demo2-百分比布局

<!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"><title>固定布局轉(zhuǎn)換為百分比布局</title><style type="text/css">body>*{ width:980px; height:auto; margin:0 auto; margin-top:10px;border:1px solid #000; padding:5px;}header{ height:50px;}section{ height:300px;}footer{ height:30px;}section>*{ height:100%; border:1px solid #000; float:left;}aside{ width:250px;}article{ width:700px; margin-left:10px;}</style> </head> <body> <header>頭</header> <nav>導航</nav> <section><aside>側(cè)邊欄</aside><article>文章</article> </section> <footer>頁腳</footer> </body> </html>

demo2效果圖

響應式柵格系統(tǒng)

柵格系統(tǒng)概述

在網(wǎng)頁制作中，柵格系統(tǒng)（又稱網(wǎng)格系統(tǒng)）就是用固定的格子進行網(wǎng)頁布局，是一種清晰、工整的設(shè)計風格。

柵格系統(tǒng)最早是應用于印刷媒體上，后來被應用于網(wǎng)頁布局中，而隨著響應式設(shè)計的流行，柵格系統(tǒng)開始被賦予了新的意義。

如下圖所示：

下圖中的粉色塊作為柵格中的列，它們構(gòu)成了內(nèi)容寬度。一般來說，列寬是不會變的，只是列數(shù)會隨著設(shè)備的不同而變化，比如從PC端的12列變?yōu)槠桨咫娔X上的8列，然后在移動端變?yōu)?列。
嚴格來說，你其實可以定義任何想要的列寬，但大多數(shù)情況下的網(wǎng)格列寬都設(shè)置在60-80px之間。選擇合適的列寬是最重要的，因為它是內(nèi)容寬度的主要決定因素。

其核心思想是內(nèi)容元素必須位于若干列上，你可以任意分割，比如6×2,3×4,4×3。下面的例子中展示了不同分割方式設(shè)計的信息卡片

彈性盒布局

傳送門——>深入理解彈性盒布局（fiex-box）——Web前端系列自學筆記

綜合項目1——環(huán)保網(wǎng)站

傳送門——>第一個響應式網(wǎng)站之環(huán)保網(wǎng)站（源碼+圖片下載）

綜合項目2——個人社交網(wǎng)站

傳送門——>用HTML和CSS實現(xiàn)一個漂亮的個人博客頁面！

總結(jié)

以上是生活随笔為你收集整理的入门响应式Web？看懂这篇文章就够了！——Web前端系列学习笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：深入理解input中的value、nam
下一篇： 2017年html5行业报告,云适配发布