響應式Web設計相關技術

響應式Web設計是和HTML5+CSS3互相配合與支持的


響應式Web設計是和HTML5+CSS3互相配合與支持的,實現響應式設計包括以下技術點:


1)  HTML5+CSS3的基本網頁設計。


2)  視口(meta):提供可以配置視口的屬性。


3)  CSS媒體查詢 (Media Queries):識別媒體類型,特征(屏幕寬度,像素比等)。


4)  流式布局(Fluid Layout):可以根據瀏覽器的寬度和屏幕的大小自動調整效果。


5)  流式圖片(Fluid Images):隨流失布局進行相應縮放,可以理解為圖片的流式布局


6)  響應式柵格系統:依賴于媒體查詢,根據不同的屏幕大小調整布局。


7)  彈性盒布局:CSS3的彈性盒布局,一個可以告別浮動,完美地實現垂直居中的新特性。


8)  彈性圖片:指的是不給圖片設置固定尺寸,而是通過設置img{max-width:100%},讓圖片大小自動適應屏幕大小。


實現響應式Web設計,可以說就是根據顯示屏幕大小的變化控制頁面的文檔流,適配不同類型的終端顯示設備。