众所周知，目前主流PC屏幕的分辨率为1366*768、1440*900、1280*1024等大屏幕显示器。因此网页不能再按照1024的标准进行设计，也不能进行前端重建。此外，随着移动互联网的发展趋势，国内许多电子商务网站仍然是门户网站，移动终端的流量大于PC终端。移动互联网平台不容错过。
核心优势是，设计师可以对所有设备使用相同的模板，只需要使用CSS定制内容在不同屏幕上的显示方式。
一、响应式布局的四种设计方法
这是一种全屏视觉，背景对用户来说最强。整个视觉聚焦于一幅完整的画面，交互和文字信息相对简单。图片大小与屏幕宽度相适应。交互式菜单和文本消息通常默认为通过大小转换和位移自适应的系统字体大小。
此方法是将内容和视觉居中，并将大小控制在1000像素以内。在左侧和右侧放置一些辅助信息，使它们适应屏幕宽度。
这个方法是把主要内容放在左边，然后在右边放一些辅助信息。这是由用户的阅读习惯决定的。中间部分是自适应屏幕宽度的内容。
事实上，小旗鼓的全屏响应设计是一种瀑布。它是根据屏幕宽度计算出来的，基于一个相对较小的单元微底座，然后展开2倍、3倍、4倍等，并计算出最合适的完整组合。通常用于图片信息显示页面。
二、响应式布局的组成及常用插件介绍
mediaquery的主要功能是根据不同的分辨率调整不同的样式。目前主流的移动设备都是基于IOS和Android的，浏览器都是WebKit核心，因此我们可以使用viewport属性和mediaquery技术来实现响应性网页。通过这种方法，我们可以使字体大小以不同的分辨率显示不同的内容。
Fluidgrid又称fluid布局，是在PC实现的基础上，将某些元素的傲慢从固定的百分比或字体比例调整为弹性的百分比或字体比例，使用Fluidgrid的网站可以根据屏幕宽度自动调整页面中每一列的宽度，从而保证页面始终处于完整的显示状态，实现原有的基本功能。
Flexbox是CSS3添加的一个新模型属性。它的出现有效地打破了我们经常使用的浮动布局，实现了垂直等高、水平等分、按比例分割。它可以实现许多我们以前无法实现的自适应布局。如果你想让移动用户看到这个网站，那么Flexbox是一个很好的看起来像web应用的方式。flexbox与app结构相似，头部底部固定，中部高度自适应。
三、响应式网站构建工具
市场上有许多反应灵敏的建站工具。高自由度有站房V9箱，采用组合布置形式（流式布置+自由布置）。通过拖拽和添加模块，可以使网站风格丰富多样，满足不同企业和个人的建站需求，而不需要编程基础。它是实用的一次和适用于屏幕。适合不懂前端，想尝试多页布局的站长。
