确定响应式web设计的应用场景之后，一般需要美工出几套主流移动设备屏幕分辨率的设计图，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，通过使用流式布局、弹性图片、媒体查询等技术，使得网页可以根据用户设备的不同分辨率、屏幕尺寸等自动调整布局和内容，为用户设备适配不同的网页版本，而自适应设计则更注重用户设备的识别和适配。响应式设计和自适应设计都是用于网站和应用程序的设计概念。
如何制作响应式网站？
HTML5制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
什么是响应式是什么？
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
响应式和自适应的区别？
响应式设计是指在网页设计时，通过使用流式布局、弹性图片、媒体查询等技术，使得网页可以根据用户设备的不同分辨率、屏幕尺寸等自动调整布局和内容，以达到最佳浏览效果。
而自适应设计是指在网页设计时，通过检测用户设备的类型、浏览器、分辨率等信息，为用户设备适配不同的网页版本，以确保用户能够正常访问和浏览网页。
因此，响应式设计侧重于整体性的布局排版，而自适应设计则更注重用户设备的识别和适配。两者在实际应用中也常常结合使用。
响应式设计和自适应设计都是用于网站和应用程序的设计概念，主要为了确保它们能够在各种不同的设备上正确地呈现，无论是台式机、平板电脑、移动设备还是任何其他设备。
它们之间的区别在于，响应式设计是通过CSS媒体查询和弹性网格设计来实现的，网站的布局和内容根据浏览器窗口大小发生变化，从而适应不同的设备和分辨率。
1 响应式和自适应都是网页设计中用于适应不同设备屏幕的技术，但它们具有不同的实现方式和效果。
2 响应式网页设计是基于视口的大小进行设计的，可以随着设备屏幕大小的变化而改变页面布局，具有较好的灵活性和适应性。
3 自适应网页设计则是为不同设备分别设计不同的布局，每个设备访问网页时都会加载对应的设计，相较于响应式设计更加稳定和精准。
4 总体来说，响应式设计适用于需要在不同设备上保持一致性的网站，而自适应设计适用于需要针对不同设备提供不同内容或功能的网站。
1 响应式和自适应是两种前端设计的技术方法。
2 响应式设计是指设计师根据不同屏幕尺寸、分辨率和设备类型，为每个尺寸和设备类型编写不同的代码，以便网站在各种设备上都能够完美呈现。
而自适应设计是指在网站设计的时候，会根据设备的屏幕尺寸和分辨率，自动调整网站的布局和字体大小，以适应不同的设备屏幕。
3 响应式设计更适合在设计初期就考虑到各种设备的适配，需要编写多个版本的代码，所以对于网站的开发成本相对较高。
而自适应设计则是通过一些技术手段，自动适应不同设备的布局，不需要编写多个版本的代码，相对而言，开发成本较低。
1、自适应布局主要是通过检测视口分辨率，来判断当前访问的设备从而进一步请求服务层，返回不同的目标页面;而响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理。
2、自适应布局需要做多套页面，响应式布局只需要做一个页面就可以。