響應式網站設計是一種網絡頁面設計布局。頁面的設計與開發應當根據用戶行為以及設備環境（系統平臺，屏幕尺寸，屏幕定向等）進行相應的響應和調整。以下是北京網站制作行業對于入門了解響應式網站開發的一點指引。

一、響應式網站常見特點：

1. 同時適配PC+平板+手機。

2. 標簽導航在接近手持終端設備時改變為經典的抽屜式導航。

3. 網站的布局會根據視口來調整模塊的大小和位置。

響應式設計的基本原理是通過媒體查詢檢測不同的設備屏幕尺寸做處理。為了處理移動端，頁面頭部必須有meta聲明viewport。

• width=device-width: 是自適應手機屏幕的尺寸寬度
• maximum-scale: 是縮放比例的最大值
• inital-scale: 是縮放的初始化
• user-scalable: 是用戶的可以縮放的操作

二、 實現響應式布局的方式

1. 百分比布局：利用對屬性設置百分比來適配不同屏幕，注意這里的百分比是相對于父元素； 能夠設置的屬性有 width、height、padding、margin
2. 使用媒體查詢 (CSS3 @media 查詢)：利用媒體查詢設置不同分辨率下的css 樣式，來適配不同屏幕，媒體查詢相對于百分比布局，可以對布局進行更細致的調整，但需要在每個分辨率下面都寫一套 css 樣式；
3. rem響應式布局：當前頁面中元素的rem 單位的樣式值都是針對于html 元素的font-size 的值進行動態計算的，所以有兩種方法可以達到適配不同屏幕： 第一種利用媒體查詢，在不同分辨率下給 html 的 font-size 賦值。第二種利用 js 動態計算賦值。最常用方式是使用rem單位作為字體大小和元素尺寸的基準，通過改變根元素的字體大小來實現響應式效果。
4. vw響應式布局：vw是將整個網頁寬度按100份計算，即：全屏寬度100vw；同理全屏高度為100vh；
5. flex彈性盒子布局：利用Flexbox布局模型的彈性容器和彈性項的特性，創建更加靈活和自適應的布局。響應式網站、小程序、vue等移動端開發為主。