响应式网页设计——适合初学者的现代网站代码w3cschool笔记

当互联网刚开始蓬勃发展时，网站访问者使用台式机或者宽屏笔记本电脑来访问网站。然后当智能手机出现时，手机用户不得不无休止地缩放和滚动才能访问和查看相同网站的不同部分。值得庆幸的是，由于响应式网页设计的革命性引入，如今情况已不再如此。在本文中，我将带您了解响应式网页设计的演变、使其成为可能的各种集成，以及如何开始在您的编码项目中使用它以获得更好的用户体验。

响应式网页设计使网页可以在各种设备屏幕尺寸上正确呈现，而不会缩短或扭曲内容。

例如，这并不意味着网站在手机上的显示方式与在笔记本电脑上的显示方式完全相同。相反，它意味着网页的内容适应不同的屏幕尺寸——从大屏幕（台式机和笔记本电脑）到中屏幕（平板电脑）再到移动屏幕（各种屏幕尺寸的手机）。

它在保留相同内容的同时做到了这一切（只是可能以不同的方式排列以适应每个屏幕）。

过去，人们主要使用台式机和笔记本电脑在线查看内容，因为网站仅针对这些屏幕进行了优化。

但随着越来越多的人开始使用手机上网，人们开始抱怨他们所看到的糟糕的显示和布局。

这对网页设计师和开发人员意味着一件事：网站也需要针对移动设备进行优化！

在过去十年中，移动网站用户数量首次开始超过台式机和笔记本电脑。因此，从科技巨头到小型企业，每个人都开始采用响应式网页设计方法。

开发人员和设计师还创造了闪亮的新移动优先设计。这意味着开发人员首先为移动设备制作网站，然后是桌面。

这通常意味着移动设备和更大屏幕的单独网站，具有相同的服务器系统但不同的域。

例如，原始网站可能是examplewebsite.com，而移动版本可能是examplewebsite.mobi、或m.examplewebsite.com。

用户的设备将被现成的脚本检测到，然后相应的域将被呈现。这种做法今天仍然存在。

除了双域方法，网页设计师和开发者可以先针对特定屏幕尺寸（可以是桌面、平板电脑或移动设备）创建一个网站，然后添加所谓的媒体查询，使网站适应不同的屏幕尺寸。这是移动优先的方法。

将响应式网页设计方法集成到项目中包括代码的每一部分——在HTML元素、HTML结构、CSS甚至JavaScript中。

我将尽可能清楚和详细地描述这些过程。

由于HTML在定义网页结构方面发挥着重要作用，因此它肯定与使网站响应（适应）不同屏幕尺寸有关。

您需要在要针对不同屏幕尺寸进行优化的任何网页的头部部分中包含元视口空元素。

这告诉浏览器将网页的宽度呈现为设备的确切宽度。因此，如果设备的宽度为1200像素，则网页宽度将为1200像素。如果设备的宽度为720像素，则网页宽度将为720像素，依此类推。

这可以防止手机用户过去遇到的烦人的放大和缩小，这对用户体验不利。

以下是网站在没有视口元素的小型手机上的外观：

以下是带有viewport元素的同一个网站在小型手机上的显示效果：

但是视口元素并不是让网站适应不同屏幕尺寸所需的全部元素。还有更多。

用于使站点具有响应性的最重要工具是CSS3媒体查询。媒体查询允许您以不同方式为多个屏幕编写相同的CSS代码。

通过媒体查询，您可以告诉浏览器在特定屏幕上以特定方式显示内容。

媒体查询的基本语法如下所示：

@mediascreenand(max-width:720px){/*CSScodesgohere*/}这告诉浏览器在屏幕宽度低于720像素断点时执行媒体查询中编写的CSS代码。断点通常可以是1200像素到320像素之间的任何值。

在下面的代码片段中，我指示浏览器在屏幕宽度低于768像素时将更改为background-color深灰色和color蓝色。

不同的设备还存在其他几个断点。

一些超大屏幕和电视可能需要超过1200像素。

您可以在每个屏幕的媒体查询中执行此操作。一种使其更容易的方法是使用相对单位（%、rem和em）而不是绝对单位，例如px。

在下面的HTML和CSS代码片段中，我指示浏览器在大屏幕上将文本的字体大小设置为3rem，在宽度低于768像素的屏幕上设置为1.5rem：

就像文本一样，图像也必须随着屏幕宽度的减小而缩小。

图像具有固定的宽度和高度，因此当它们大于视口宽度（屏幕宽度）时，用户通常必须滚动才能看到整个内容，这会造成糟糕的用户体验。

开发人员通过为所有图像设置100%的最大宽度并将它们显示为块级元素（默认情况下图像是内联元素）来解决这个问题。

您可以为代码中的图像单独设置此项，但为了培养DRY（不要重复自己）原则，您应该在所有图像的重置中进行设置。

如果屏幕宽度不满足任何条件，则将显示freecodecamp-large-logo。

任何网页的布局决定了内容在浏览器中的显示方式。

过去，开发人员不得不使用表格，这并不容易控制。然后来了float和clearfix，这也很难管理。

当flex的显示被分配给包含元素时，默认情况下元素方向在行上呈现。

您可以稍后使用媒体查询将方向设置为具有flex-direction属性的较小屏幕的列。必须将flex-direction属性值显式设置为列。

您还可以使用flex-grow和flex-shrink等属性以您希望网页内容呈现的方式进行布局。这两个属性使它们包含的元素随着屏幕视口（宽度）的增加而增长，随着视口的减少而缩小。多么酷啊？

在下面的代码片段中，不同文本块在各自容器中的方向将在屏幕宽度大于768像素时为一行，在宽度小于768像素时为一列。

我能够通过将body元素内的整个项目显示为flex来做到这一点。

CSSgrid或多或少是flexbox的一种混合且更强大的形式。许多人争辩说，无论您使用Flexbox做什么，您都可以使用Grid以更少的代码行完成。

使用CSS网格，您可以以更直接的方式创建灵活的网格，因为您可以使用设置为列或行的grid-auto-flow属性定义所需的列和行。

您可以使用Grid以这种方式执行我们在Flexbox示例中所做的相同操作：

您可以在W3CschoolCSS课程中了解有关Flexbox和Grid的更多信息。

由于互联网用户现在更多地通过手机访问网站而不是台式机和笔记本电脑，因此响应式设计是制作现代网站的必经之路。

了解响应式设计最佳实践将使您与其他开发人员区别开来，因为您将能够在相同的HTML、CSS和JavaScript文件中创建适应不同屏幕尺寸的网站。