響應(yīng)式網(wǎng)站設(shè)計(jì)是一種網(wǎng)絡(luò)頁(yè)面設(shè)計(jì)布局。頁(yè)面的設(shè)計(jì)與開發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境（系統(tǒng)平臺(tái)，屏幕尺寸，屏幕定向等）進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。以下是北京網(wǎng)站制作行業(yè)對(duì)于入門了解響應(yīng)式網(wǎng)站開發(fā)的一點(diǎn)指引。

一、響應(yīng)式網(wǎng)站常見(jiàn)特點(diǎn)：

1. 同時(shí)適配PC+平板+手機(jī)。

2. 標(biāo)簽導(dǎo)航在接近手持終端設(shè)備時(shí)改變?yōu)榻?jīng)典的抽屜式導(dǎo)航。

3. 網(wǎng)站的布局會(huì)根據(jù)視口來(lái)調(diào)整模塊的大小和位置。

響應(yīng)式設(shè)計(jì)的基本原理是通過(guò)媒體查詢檢測(cè)不同的設(shè)備屏幕尺寸做處理。為了處理移動(dòng)端，頁(yè)面頭部必須有meta聲明viewport。

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

二、 實(shí)現(xiàn)響應(yīng)式布局的方式

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