当互联网还很年轻的时候，网站访问者使用台式电脑，然后是笔记本电脑的宽屏幕来访问网站。
然后，当智能手机被开发出来时，手机用户不得不无休止地缩放和滚动来访问和查看这些网站的不同部分。
值得庆幸的是，由于响应式网页设计的革命性引入，如今这种情况已不复存在。
在这篇文章中，我将带你了解响应式网页设计的演变，使其成为可能的各种集成，以及你如何在你的编码项目中开始使用它以获得更好的用户体验。
什么是响应式网页设计？
响应式网页设计使网页在各种设备的屏幕尺寸上正常呈现，而不会缩短或扭曲内容。
这并不意味着一个网站在手机上的显示方式与在笔记本电脑上的显示方式完全相同，例如。相反，它意味着网页的内容会适应不同的屏幕尺寸--从大屏幕（台式机和笔记本电脑）到中屏幕（平板电脑）再到移动屏幕（各种屏幕尺寸的手机）。
而这一切都在保留相同的内容（只是可能以不同的方式排列以适应每个屏幕）。
响应式网页设计的演变
在过去，人们大多使用台式机和笔记本电脑来查看在线内容，因为网站只为这些屏幕进行了优化。
但随着越来越多的人开始使用手机上网，人们开始抱怨他们看到的糟糕的显示和布局。
这对网页设计师和开发人员来说意味着一件事：网站也需要针对移动设备进行优化
在过去的十年里，移动端的网站用户数量开始首次超过台式机和笔记本电脑。因此，从科技巨头到小企业都开始接受响应式的网页设计方法。
开发人员和设计师也创造了闪亮的新的移动优先设计。这意味着开发人员首先为移动设备制作网站，然后才是桌面。
这往往意味着为移动设备和大屏幕建立单独的网站，使用相同的服务器系统，但有不同的域名。
例如，原来的网站可能是examplewebsite.com ，而移动版本则是examplewebsite.mobi ，或m.examplewebsite.com 。
用户的设备将被现成的脚本检测出来，然后呈现出适当的域名。这种做法至今仍然存在。
除了双域方法之外，网页设计师和开发人员可以先为特定的屏幕尺寸（可能是台式机、平板电脑或手机）创建一个网站，然后添加所谓的媒体查询，使网站适应不同的屏幕尺寸。这就是移动优先的方法。
如何使你的网站具有响应性
将响应式网页设计方法整合到一个项目中，包括代码的每一部分--在HTML<head> 元素、HTML结构、CSS、甚至JavaScript中。
我将尽可能清楚和详细地描述这些过程。
在头部设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0">
既然HTML在定义网页结构方面发挥了巨大作用，那么它肯定与使网站响应（适应）不同屏幕尺寸有关。
你需要在任何你想针对不同屏幕尺寸进行优化的网页的头部部分加入meta viewport空元素。
这将告诉浏览器根据设备的确切宽度来渲染网页的宽度。因此，如果设备的宽度是1200px，那么网页的宽度将是1200px。如果设备的宽度是720px，网页的宽度将是720px，以此类推。
这就避免了过去手机用户经历的恼人的放大和缩小，这对用户体验并不好。
下面是一个网站在没有<meta> viewport元素的情况下在小手机上的样子。
下面是同一网站使用<meta> 视口元素在小手机上的效果。
如果你想知道这是哪个网站，这是我为初学者制作的一个免费投资组合网站模板。我将很快把它提供给所有freeCodeCamp的读者 - 所以，敬请关注。:)
但是，<meta> viewport元素并不是你使网站适应不同屏幕尺寸的全部需要。还有更多。
CSS媒体查询
要使你的网站具有响应性，最关键的工具是CSS3媒体查询。媒体查询让你以不同的方式为多个屏幕编写相同的CSS代码。
通过媒体查询，你可以告诉浏览器在一个特定的屏幕上以特定的方式显示内容。
媒体查询的基本语法是这样的：
@media screen and (max-width: 720px) {
/*CSS codes go here*/
}
这告诉浏览器，当屏幕宽度低于720像素的断点时，要执行媒体查询中的CSS代码。该断点通常可以是1200像素和320像素之间的任何数值。
在下面的代码片段中，我指示浏览器在屏幕宽度低于768像素时，将background-color 改为深灰色，并将color 改为蓝色：
<body>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</body>
@media screen and (max-width: 768px) {
body {
background-color: #333;
color: #3498db;
}
}
对于不同的设备，还有其他几个断点存在：
-
320 - 480px用于小型手机，如iPhone 6、7和5。
-
478 - 768px适用于平板电脑和iPad
-
台式机和大屏幕的1025 - 1200px
一些超大的屏幕和电视可以占用超过1200px。
响应性文本
由于文字的大小在手机上和在桌面上不一样，所以必须使文字随着设备屏幕宽度的减少而缩小。
你可以在每个屏幕的媒体查询中做到这一点。让它更容易的方法之一是使用相对单位（%、rem和em），而不是像px这样的绝对单位。
在下面的HTML和CSS代码片段中，我指示浏览器在大屏幕上使文字的字体大小为3rem，而在宽度低于768pixels的屏幕上为1.5rem：
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
@media screen and (max-width: 768px) {
p {
font-size: 1.5rem;
}
}
响应性图像
就像文本一样，图像也必须随着屏幕宽度的减小而缩小。
图片有固定的宽度和高度，所以当它们大于视口宽度（屏幕宽度）时，用户通常必须滚动才能看到整个图片，这就造成了糟糕的用户体验。
开发人员通过为所有图片设置100%的最大宽度，并将其作为块级元素显示（图片默认为内联元素）来解决这个问题。
你可以在你的代码中为图片单独设置，但为了促进DRY（不要重复自己）原则，你应该在你的重设中为所有图片设置：
img {
display: block;
max-width: 100%;
}
另一种使图像响应的方法是使用HTML中的图片元素。通过这个元素，你可以告诉浏览器在不同设备上显示与宽度相关的不同图片：
<picture>
<source
media="(max-width: 1100px)"
srcset="freecodecamp-large-logo.jpg"
/>
<source
media="(max-width: 900px)"
srcset="freecodecamp-medium-logo.jpg"
/>
<source media="(max-width: 760px)" srcset="freecodecamp-small-logo.jpg" />
<img
src="freecodecamp-large-logo.jpg"
alt="freeCodeCamp"
style="max-width: 100%"
/>
</picture>
- 在宽度为1100px及以下的屏幕上，将显示freecodecamp-large-logo。
- 在宽度为900px及以下的屏幕上，将显示freecodececamp-medium-logo。
- 在一个宽度为760px及以下的屏幕上，将显示freecodecamp-small-logo。
如果屏幕宽度不符合任何条件，freecodecamp-large-logo将被显示。
响应式布局
任何网页的布局决定了内容在浏览器中的显示方式。
在过去，开发者不得不使用表格，这不容易控制。后来又出现了float 和clearfix ，这也很难管理。
CSS网格和Flexbox的引入彻底改变了布局，并使响应式设计更有意义。
Flexbox
有了CSS Flexbox，响应式设计获得了更多的相关性，因为有了它，你不必像使用浮动布局时那样添加太多的媒体查询。
当flex的显示被分配给包含元素时，该元素的方向立即被默认呈现在行上。
之后你可以使用媒体查询，通过flex-direction属性将方向设置为小屏幕上的列。flex-direction属性值必须明确设置为列。
你也可以用flex-grow和flex-shrink等属性来布局你希望网页上的内容呈现的方式。这两个属性使它们所包含的元素随着屏幕视口（宽度）的增加而增长，随着视口的减少而缩小。这多酷啊？
在下面的代码片段中，不同的文本在各自的容器中的方向在宽度高于768像素的屏幕上将是一排，而当宽度低于768像素时则是一列。
我是通过将body元素内的整个项目显示为flex来实现的：
<body>
<div class="container-one">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
mollitia, consequuntur aliquid nobis vitae soluta maiores expedita ipsam
delectus molestiae!
</p>
</div>
<div class="container-two">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
architecto temporibus sed officiis vero, quisquam, corrupti quis veritatis
dolor amet nostrum quam! Voluptates nam architecto enim neque nemo
consectetur molestias unde fugit dolorum alias temporibus expedita
doloribus deserunt laborum asperiores illum saepe, voluptate rerum quia
sit facilis consequuntur perferendis aperiam. Nobis reiciendis debitis
consequuntur placeat maiores voluptas, quos esse eum.
</p>
</div>
<div class="container-three">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus fugiat,
nemo rem facere cumque error. Aliquam consequatur nobis cupiditate atque!
Fugiat amet facere magni, nulla pariatur ut ullam, vel est eum voluptatum
dicta quis dignissimos labore repellendus. Maiores deserunt quas tempore
impedit, corporis quae amet blanditiis voluptatum laudantium magni ipsa!
</p>
</div>
</body>
body {
display: flex;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
flex-direction: column;
}
}
CSS网格
CSS网格或多或少是一种混合的、更强大的flexbox的形式。许多人认为，无论你用Flexbox做什么，你都可以用Grid以更少的代码行完成。
使用CSS grid，你可以用更直接的方式创建灵活的网格，因为你可以通过将grid-auto-flow属性设置为列或行来定义你想要的列和行。
你可以用网格的这种方式做我们在Flexbox例子中做的同样的事情：
body {
display: grid;
grid-auto-flow: column;
gap: 6px;
}
div {
border: 2px solid #2ecc71;
margin-left: 6px;
}
@media screen and (max-width: 768px) {
body {
grid-auto-flow: row;
}
}
你可以在freeCodeCamp的CSS课程中了解更多关于Flexbox和Grid的知识。
结语
由于互联网用户现在在手机上访问网站比在台式机和笔记本电脑上访问网站更多，当涉及到制作现代网站时，响应式设计是必经之路。
了解响应式设计的最佳实践将使你从其他开发者中脱颖而出，因为你将能够在相同的HTML、CSS和JavaScript文件中制作适应不同屏幕尺寸的网站。
我希望这篇文章能给你带来制作响应式真实世界网站所需的见解。
谢谢你的阅读，并继续编码。
