在越来越多的以移动设备为中心的世界中，在各种形状和尺寸的设备屏幕上具有无缝的用户体验至关重要。
这是响应式Web Design（RWD）介入的地方，仅利用HTML和CSS。
本文阐述了响应式网络设计的复杂性。
此外，本文旨在清楚地介绍响应式网站的操作方法。
HTML基础知识以及CSS如何工作的想法是理解本文的先决条件。
目录
什么是网络响应能力
需要网络响应能力
如何使网站响应
使用CSS
使用CSS框架
Bootstrap 5
响应式网页设计的好处
结论
建议
什么是网络响应？
根据维基百科，
响应式Web设计（RWD）或响应式设计是一种旨在使网页在各种设备，窗口或屏幕尺寸从最小到最小到最大显示尺寸上呈现良好的网页设计方法，以确保可用性和满意度。
网站的响应能力是指网站的可调节布局取决于屏幕尺寸。
响应式Web设计不是程序或JavaScript框架。响应式Web设计仅使用HTML和CSS。
需要网络响应率
创建在多个屏幕尺寸和设备上看起来不错的网站的挑战引起了对网络响应的需求。
互联网早期的网站是通过固定的静态布局创建的，该布局没有根据屏幕的大小而变化。
手机上的Facebook登录页面
桌面上的Facebook登录页面
但是，随着移动设备的使用迅速增加，对响应式设计的需求更大。
现在，由于越来越多的人使用智能手机和平板电脑来访问互联网，因此必须对网站进行调整。
响应式设计一词是由Ethan Marcotte在2010年创造的。
如何使网站响应
如前所述，设计响应式网站需要仅了解HTML和CSS。
由于上述点，以下是实现响应能力的方法：
使用CSS
使用CSS框架
使用CSS
CSS中内置了许多功能，以使设计响应站点更容易。这些是：
媒体查询
多元
Flexbox
CSS网格
媒体查询
媒体查询允许您以不同的方式为多个屏幕编写相同的CSS代码。
使用媒体查询，根据屏幕分辨率使用CSS。
以下代码片段说明了媒体查询的布局：
@media屏幕和（最大宽度：768px）{
/ CSS代码转到此处/
}
上面的代码指示浏览器在屏幕宽度低于768像素断点以下时执行媒体查询中编写的CSS代码。
断点是引入媒体查询和布局更改的点。
假设屏幕分辨率高于768像素断点，则上面的代码不会运行。
例如，以下媒体查询测试以查看当前网页是否在屏幕宽度至少320像素宽。
只有在条件为真时，才会应用.Container选择器的CSS。
@media屏幕和（最小宽度：320px）{
.Container {
保证金：1EM 2EM;
}
}
可以在CSS代码中添加多个查询。
断点通常是1200像素和320像素之间的任何值。
媒体查询的MDN文档具有更多信息。
多元
如果使用Multicol，则可以输入列计数以指定应将材料分配给的最大列数。
然后，这些大小由浏览器确定，并根据屏幕的大小而变化。
.Container {
列计数：4;
}
.Container {
柱宽：100px;
}
在上面的代码段中，使用列宽，这意味着指定最小宽度。
浏览器将使容器中适合舒适的100px宽列，然后将剩余空间分配在所有列之间。
因此，列数将根据有多少空间而变化。
使用列速记提供最大数量的列，最小列宽可确保：
线长度不会长时间，只要屏幕尺寸增加
线长度不会随着屏幕尺寸的减小而变得太窄。
flexbox
flexbox也用于布置多个元素，即使容器内的内容的大小未知。
当将FLEX的显示分配给包含元素时，默认情况下将元素方向呈现在行上。
弹性盒中的项目收缩或成长。以下是一些代码示例：
项目1
项目2
项目3
.flex-container {
显示：flex;
正当：中间;
准入：中心;
}
.flex-item {
弹性：1;
填充：10px;
边界：1PX固体#CCC;
}
在上面的示例中，三个flex项目将在它们之间均匀分布，垂直居中，并自动调整其宽度以适合容器。
要在Flexbox上获得更多了解，请阅读CSS Tricks flexbox指南。
CSS网格
使用CSS网格，使用FR单元在网格轨道上分布空间。
FR单元代表网格容器总面积的一小部分，可动态大小的网格行和列。
.Container {
显示：网格;
网格板柱：2FR 2FR 2FR;
}
上面的代码创建了三个列轨道，每个轨道都占据了容器中可用空间的一部分。
使用CSS框架
除了普通的CSS外，某些框架还具有帮助创建响应网站的公用事业。
这些框架提供了有效的方法来实现响应能力而无需从头开始。
对于本文档范围的目的，将处理一个框架：
Bootstrap 5
bootstrap 5
Bootstrap的网格系统使用以下序列来布局和对齐内容：
容器
行
列
Bootstrap的网格系统使用12列系统创建响应式布局。此外，Bootstrap网格系统有四个类。下表解释了这些类：
班级
屏幕宽度
XS
768px
SM
等于或大于768px
MD
等于或大于992px
LG
等于或大于1200px
以下步骤提供了创建响应式布局的步骤：
在您的项目中包括Bootstrap 5：开始：
创建一个新的HTML文件
在HTML文件的
设置一个容器：使用容器类为全宽容器创建固定宽的容器或容器 - 流体类。例如：<！ - 您的内容进入这里 - >
定义行和列：
使用行类创建行。
使用Col类添加其中的列。
使用不同类别根据设备指定列大小。例如：<！ - 第一列的内容 - > <！ - 第二列的内容 - >
使用响应式实用程序：Bootstrap提供响应式实用程序类，以根据屏幕尺寸控制元素的可见性和间距。您可以使用：
d-none
D-SM-Block
d-md-none
MT-LG-4等以控制显示和间距。例如：<！ - 在中屏和大屏幕上可见的内容 - > <！ - 在所有屏幕尺寸上可见的内容 - >
测试和调整：在不同的设备和屏幕尺寸上预览您的布局，以确保其看起来不错并适当调整。根据需要调整列类和响应式公用事业类，以实现所需的响应行为。
其他支持响应网络设计的CSS框架包括以下内容：
尾风CSS
物质化
语义UI
布尔玛
响应式网页设计的好处
下面的项目点解释了将响应式Web设计纳入用户界面（UI）的好处：
更多的移动流量：由于响应式Web设计的以移动为中心的方法，网站访问的数量以及源自移动设备的互动量的增加。
较低的维护需求：需要额外的测试和维护来维护单独的移动网站。相比之下，响应式Web设计可确保每个设备上的适当布局。当有单独的桌面和移动网站时，需要一个独特的内容策略，多个管理接口，也许需要两个设计团队。因此，响应式设计的一种尺寸适合所有方法，使开发人员，客户和公司所有者的麻烦较少。通过更少的关注维护，还有更多时间进行营销和内容生产等其他任务。
较低的跳出率：跳出率是指降落在网站上并离开网站上任何其他页面或元素的访问者的百分比。响应迅速，优化的移动网站为访问者提供了更好的用户体验。因此，他们更有可能坚持更长的时间并探索您网站的不同区域。
改进的SEO：拥有一个响应式网站而不是单独的桌面和移动版本避免了重复内容的问题，从而对您的搜索排名产生负面影响。此外，Google近年来已经采取了一种移动优先的方法。
改进的用户体验：响应迅速的Web设计通过将网站的布局和内容调整为不同的屏幕尺寸和设备来显着影响用户体验。这确保了用户的一致且具有视觉吸引力的体验，无论他们是在台式机，平板电脑还是智能手机上访问网站。
增强的社交共享：拥有响应式网站使用户与您的网站的参与度增加，然后在社交媒体上共享。更多的社交流量意味着更多的用户访问您的网站。此外，很棒的社交媒体存在可以提高您的网站的可见性。
结论
响应迅速的网络设计不再是可选的考虑因素，而是现代网络开发的关键方面。
通过采用移动优先的方法并采用本文档中讨论的技术，开发人员可以创建网站，以在所有设备上提供最佳的用户体验。
进一步研究的建议
响应式设计 - 学习网络开发| mdn
响应式网页设计
网格系统 - bootstrap v5.0
响应迅速的布局，更少的媒体查询