一、什么是响应式网站
什么是响应式网站呢？响应式布局的网站在任何终端都是同一个网站，通过同一个域名打开并显示网站内容。它可以智能地根据终端屏幕的尺寸调整布局版式，以实现最佳的浏览效果。
二、响应式网站布局
1、百分比布局
最常见最简单的响应式布局方案，但是只适合简单的宽高变化的应用，在大屏设备上会把界面拉得很长影响用户体验。
2、Css3媒体查询:
最强大的响应式布局方案，可以针对不同屏幕尺寸写多套不同的样式。
3、rem布局:
rem布局是一种相对于根元素字体大小(即<html>标签)来设置页面元素尺寸的方式。当页面尺寸发生变化的时候，只需要改变根元素的font-size,那么以rem为固定单位的元素的大小也会发生响应的变化,一般需要结合js或者css3媒体查询来更改根元素字体大小。
4、Flex布局:
也称弹性布局，是一种用于创建灵活的、自适应的布局模型的CSS3属性。它可以实现对容器中子元素的排列和布局控制，使得网页在不同设备上的尺寸和屏幕方向下都能呈现出合适的布局效果。
5、Grid布局:
Grid布局是CSS3提供的一种二维网格布局方式，它可以将一个元素的内容划分成行和列的结构，使得页面可以更加灵活地响应不同设备的屏幕尺寸。相对于Flex布局而言，Grid布局更加强大和灵活。
6.视口单位:
vw和vh是CSS3新增的相对长度单位，它们分别表示视窗 (Viewport)的宽度和高度的百分之一。相对于像素或其他固定长度单位而言，使用vw和vh可以更加灵活地响应不同设备的屏幕尺寸。在CSS中，1vw等于视口宽度的1%;1vh等于视口高度的1%。例如，如果浏览器的视口宽度为1000px,那么10vw就等于100px;如果浏览器的视口高度为800px，那么5vh就等于40px。
7.rpx布局(限小程序):
rpx是微信小程序专用的相对长度单位，它可以根据屏幕宽度进行自适应调整。在不同设备上，1rpx会等于多少物理像素是由系统决定的。
8.基于框架的响应式布局:
各种ui框架基本上也都封装了响应式布局代码，可以拿来直接用，框架的响应式布局基本都是基于我们上面讲的几种情况所封装的。
三、响应式网站的优劣势
那么，响应式网站建设到底有什么优势呢？让我来为你详细介绍。
1、兼容所有设备
利用最先进的HTML5技术，智能跨平台网站能一次性解决手机和其他移动终端屏幕尺寸、分辨率的不统一浏览器的多样性，这三大难题，使网站能够装备全球超过5000种移动设备。
2、超高效率，低成本
设计一个页面就足够了，你可以为不同的设备开发不同版本的网站或APP，网站内容实时同步更新。这不仅降低了网站开发成本，还大量减少了升级维护的人力和时间成本。总的来说，响应式网站能实现一站式服务，并通过栅格布局和CSS3的流动性网页设计，使网页能够随着屏幕变化而响应，PC、手机、平板使用相同网址，极大提升了用户体验，除了让网站打开更快，也更容易被记住，对企业品牌推广有一定的作用。
3、智能响应设计
响应式设计能够用户根据设备显示端的尺寸自动调整网站的显示方式，使网站几乎可以适应所有的另外，它还能在浏览器中调整网站的宽度，让网页无滚动条，这样用户在任何显示器上浏览网站，都不会出现布局混乱、显示不全或乱码的情况，从而极大地提高了用户
4、、网站具有唯一性响应的网站
都是根据企业需求定制，网络上不会有重复的网站，它具有独特性，不会让用户感到审美疲劳。
5、SEO友好的响应式网站
在建设响应式网站时，我们通常会遵循SEO原理进行内容和代码的编写，以打造具有良好SEO基础的网站。这样一来，响应式网站在上线后，对搜索引擎会有更亲和的表现。而且，一旦响应式网站融入了SEO，网站在后期就可以避免二次优化，极大地加快了网站的收录和排名等。
6、满足更多系统功能
响应式网站能够满足更多的系统功能。例如，如果你经营一家餐饮网站并需要订座服务，普通网站可能无法满足这个需求。但是定制的响应式网站就可以专门为你开发一个订座系统。
但同时，响应式设计也有它的一些缺点。
1、局限性
不适合一些大型的门户网或者电商网站，对设计样式不好控制，代码过多会影响运行速度。
2、增加开发时间成本
开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站，可能耗时更多。
