隨著終端設備類型的豐富，設備尺寸的型號也越來越多，如果實現前端頁面在不同終端設備中，按照設備的尺寸型號進行自動布局，保證良好的人際交互體驗效果，已經成為網頁前端設計所需要考慮的問題，當前支持響應式開發的架構較多，如主流BootStrap可以支持網頁在不同終端尺寸下智能調整頁面布局。本文主要從初學者角度對響應式頁面開發基本技術進行介紹與實例分析。

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

響應式頁面實例如上圖所示，在頁面尺寸拖動過程中，頁面布局發生了變換，最典型之處可以從頁面背景顏色角度看出。當尺寸縮小時，背景顏色變為灰色。以下將從實現所需技術及代碼等方面進行實例分析。

---

基本概念、知識、技術

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

1.響應式頁面

響應式頁面主要是指通過響應式布局技術的使用，實現頁面在瀏覽器尺寸發生變化時，按照布局設置對頁面布局進行自動化、智能化的展示。

2.視口

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

視口屬性設置

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

3.媒體查詢

媒體查詢主要用于設置在不同類型媒體下的網頁的樣式，在CSS3中對媒體查詢”@media“進行了詳細定義。設計人員可以針對不同媒體類型定義CSS，也可以通過不同媒體類型調用外部CSS文件。

直接定義CSS

調用外部樣式

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

媒體類型

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

部分媒體特征

媒體查詢時實現響應式布局的關鍵技術之一，如以下代碼實現在頁面寬度小于500px的CSS樣式：

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

---

以上給出本例實現基礎知識，本例實現核心代碼描述如下：

頭部響應式相關代碼

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

總結

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

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