隨著終端設(shè)備類型的豐富，設(shè)備尺寸的型號也越來越多，如果實(shí)現(xiàn)前端頁面在不同終端設(shè)備中，按照設(shè)備的尺寸型號進(jìn)行自動布局，保證良好的人際交互體驗效果，已經(jīng)成為網(wǎng)頁前端設(shè)計所需要考慮的問題，當(dāng)前支持響應(yīng)式開發(fā)的架構(gòu)較多，如主流BootStrap可以支持網(wǎng)頁在不同終端尺寸下智能調(diào)整頁面布局。本文主要從初學(xué)者角度對響應(yīng)式頁面開發(fā)基本技術(shù)進(jìn)行介紹與實(shí)例分析。

響應(yīng)式頁面圖例(圖片來源搜索引擎)

響應(yīng)式頁面實(shí)例如上圖所示，在頁面尺寸拖動過程中，頁面布局發(fā)生了變換，最典型之處可以從頁面背景顏色角度看出。當(dāng)尺寸縮小時，背景顏色變?yōu)榛疑Ｒ韵聦膶?shí)現(xiàn)所需技術(shù)及代碼等方面進(jìn)行實(shí)例分析。

---

基本概念、知識、技術(shù)

使用響應(yīng)式設(shè)計技術(shù)進(jìn)行頁面的設(shè)計，主要涉及知識包括視口ViewPort，媒體查詢，相對尺寸等。本例使用精確像素進(jìn)行頁面的布局設(shè)計。

1.響應(yīng)式頁面

響應(yīng)式頁面主要是指通過響應(yīng)式布局技術(shù)的使用，實(shí)現(xiàn)頁面在瀏覽器尺寸發(fā)生變化時，按照布局設(shè)置對頁面布局進(jìn)行自動化、智能化的展示。

2.視口

視口viewport，在Web開發(fā)中視口一般指瀏覽器窗口，移動設(shè)備中瀏覽器一般是全屏顯示的，因此視口也可以理解為設(shè)備屏幕大小。響應(yīng)式布局中需要將web頁面視口設(shè)置為特定大小。一般設(shè)置方法需要在頭部meta中設(shè)置：

視口屬性設(shè)置

設(shè)置代碼如上，device-width 為設(shè)備的寬度(單位為縮放為 100% 時的 CSS 的像素)，initial-scale：初始縮放比例，也即是當(dāng)頁面第一次 load 的時候縮放比例。

3.媒體查詢

媒體查詢主要用于設(shè)置在不同類型媒體下的網(wǎng)頁的樣式，在CSS3中對媒體查詢”@media“進(jìn)行了詳細(xì)定義。設(shè)計人員可以針對不同媒體類型定義CSS，也可以通過不同媒體類型調(diào)用外部CSS文件。

直接定義CSS

調(diào)用外部樣式

mediatype主要用于規(guī)定媒體的類型，主要類型包括以下方面：

媒體類型

media feature：媒體特征，主要用于確定在頁面變化時，相關(guān)屬性的值，主要媒體特征取值如下：

部分媒體特征

媒體查詢時實(shí)現(xiàn)響應(yīng)式布局的關(guān)鍵技術(shù)之一，如以下代碼實(shí)現(xiàn)在頁面寬度小于500px的CSS樣式：

@media only screen and (max-width: 500px) { .bk{ background-color:red; } ...//可繼續(xù)寫其他樣式,當(dāng)頁面小于500px時背景顏色為red}

---

以上給出本例實(shí)現(xiàn)基礎(chǔ)知識，本例實(shí)現(xiàn)核心代碼描述如下：

頭部響應(yīng)式相關(guān)代碼

本例實(shí)現(xiàn)如gif效果所示，如需完整代碼請加關(guān)注并私信作者。本頭條號長期關(guān)注于青少年編程資訊分享；編程課程、素材、代碼分享及青少年編程培訓(xùn)。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯(lián)系作者，共同探討。期待大家關(guān)注！

總結(jié)

以上是生活随笔為你收集整理的显示外部页面_前端设计-响应式页面开发基础的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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