如今智能手机普及率几乎超过9成，并且手机屏幕尺寸的使用习惯是有也越来越大趋势，这也让手机上网的方便性增加不少，所以愈来越多的人使用手机上网搜寻商品与直接下单购物，但是传统网站在手机上浏览非常不方便，必须一直放大缩小，来观看网站与点选小小的连接菜单，这是因为传统网站在设计上是比较符合14寸以上屏幕使用，因此网页设计师必须构思出符合4寸以上到19寸都适合使用的网站，因此RWD响应式网页设计方案就是目前最适合的网站方式。

由于RWD已经是网页设计趋势，并且大部分知名网站皆已经使用响应式网站布局方式，再者RWD方式确实为目前最好的解决方案，因此搜索引擎也是对RWD响应式网页设计方式比较友善，在种种友善环境与移动设备的成熟下，选择用RWD响应式设计来制作网站是比较正确的选择。

简单来讲，RDW技术就是只用做一个网站，就可以符合所有屏幕的尺寸。

CSS3 Media Query

Media Query可以在网页设计时在CSS3中设定不同的屏幕尺寸导出不同的显示方式给用户，例如宽度、高度与颜色等等，网页内容会自己判断显示范围，但不用改变内容本身。

Media Query引用方法

Media Query的导入方式有二种，几本上都是以屏幕大小来判别，并导入不同的CSS来改变网页显示方式。

1.在CSS档案里撰写@media来判断使用者屏幕宽度，并导入相对应的CSS。

示例：@media screen and（max-device-width: 370px）{改变内容}解释：如果屏幕小于370px，导入此CSS设定

2.在网页的〈head〉〈/head〉中，用media属性判断使用者装置宽度，选择加载哪一个CSS档案。

示例：link rel=“stylesheet”type=“text/css”media=“screen and（max-device-width: 370px）”href=“pcScreen.css”

解释：如果屏幕小于370px，导入pcScreen.css设定。

Viewport设定

name=“viewport”content=“width=device-width；initial-scale=1.0；maximum-scale=1.0；user-scalable=0；

maximum-scale设为1主要是让移动装置无法使用缩放功能以维持网页远本设计样式，没有设定的话整个网页会缩小而浏览困难。

width通常设定为device-width，是用来调节各种屏幕尺寸，如果有这样的设定，CSS就可以把版面宽度预设为100%。

上述几个方式是制作响应式网站的主要观念，但是还是要其他各种网页设计技术的辅助，执行层面是非常的繁复，必须不断的修正才可以达到好的效果。