資訊專欄INFORMATION COLUMN
摘要：響應式設計，就是讓同一個頁面在不同的分辨率下都要呈現出最佳效果，提升用戶體驗。響應式設計步驟通過上面介紹，我們了解到響應式設計的第一步需要在頁面中添加如下代碼然后就是設置各個分辨率下的樣式了。不同范圍的分界點叫做響應式布局的斷點。
響應式設計，就是讓同一個頁面在不同的分辨率下都要呈現出最佳效果，提升用戶體驗。
很容易想到，設計思路就是針對不同的分辨率，為頁面設置不同的樣式，下面我們就來看看如何實現。不過在此之前，還需要先了解下面兩個東西。
viewport 就是屏幕上用來顯示頁面內容的那部分區域。 默認情況下，移動設備上的viewport是大于屏幕寬度的，這是為了確保能夠展示那些針對傳統PC端開發的網頁。大部分移動設備的默認viewport都在980px左右。 這樣就會造成瀏覽器橫向的滾動條出現。有些設備為了避免滾動條出現，會自動縮小網頁內容，使內容適應屏幕寬度，這樣就會造成屏幕上的內容非常小，難以看清。 以上兩種處理方式都不是我們希望看到的，因此，需要首先將這個viewport設置為設備的寬度，設置縮放比例為1：1，代碼如下：
注意：這里關于viewport的解讀比較簡單，詳細的可以參考這篇文章。
媒體查詢媒體查詢是寫在CSS中的一段代碼，作為其他CSS代碼的容器。容器中的css代碼只有在媒體查詢條件的情況下才會生效。例如屏幕寬度<980px，網頁正在打印時等。 有2種方式可以添加媒體查詢：@media規則和標簽的media屬性。
響應式設計步驟通過上面介紹，我們了解到響應式設計的第一步需要在頁面中添加如下代碼：
然后就是設置各個分辨率下的樣式了。但屏幕的分辨率種類實在太多了，我們不可能一一窮舉出來，也沒有必要這么做。 實際上可以將分辨率劃分成幾個范圍，然后分別設置這幾個范圍內的樣式。不同范圍的分界點叫做響應式布局的 斷點。
關于斷點的選擇，不同的前端框架都有各自的選擇，但總體上都是按照手機、平板、PC幾個范圍來的。如bootstrap3的選擇：
Extra small devices Phones (<768px)
Small devices Tablets (≥768px)
Medium devices Desktops (≥992px)
Large devices Desktops (≥1200px)
斷點（breakpoint）的具體寫法類似如下形式:
@media screen and (min-width:640px) { /CSS 規則/ }
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84415.html
摘要：今天小編就來分享一份華為剛剛首發的響應式微服務實戰這份主要包含響應式微服務架構實現過程中所應具備的技術體系和工程實踐，在組織結構上分如下篇。 今天小編就來分享一份華為剛剛首發的Spring響應式微服務（Spring Boot 2+Spring 5+Spring Cloud實戰）！ 這份PDF...
摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。 第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...
閱讀 2928·2021-11-04 16:06
閱讀 767·2021-09-30 09:56
閱讀 1832·2021-09-22 10:02
閱讀 2612·2019-08-29 13:43
閱讀 2198·2019-08-29 13:42
閱讀 2288·2019-08-29 12:21
閱讀 1037·2019-08-29 11:29
閱讀 1375·2019-08-26 13:51
