响应式网站设计

2024/1/4

多年来，网站设计发生了很大变化。一开始，网站设计的主要目标是为桌面用户创造流畅的浏览体验——毕竟这是人们访问互联网的唯一方式。但从那时起，移动革命极大地改变了我们设计网络的方式。

今天，当设计师构建一个新网站时，他们需要确保它看起来很棒、功能良好，并且能够在各种浏览器和设备上传达正确的信息。几乎可以肯定，网站设计客户会要求其网站的移动版本。响应式网页设计原则、工具和模板使之成为可能。

什么是响应式网页设计？

响应式网页设计是一种设计网站的方法，可以在各种屏幕尺寸上呈现网页。这是用户界面可塑性的一个例子，即界面具有流动性并根据可用屏幕空间以理想排列方式呈现的能力。（这里有很多响应式网站设计示例。）

但响应式设计不仅仅是一种技术方法，它还是良好用户体验的支柱。不要将屏幕尺寸和分辨率视为设计限制，而应将内容视为流动的，让用户完全控制他们想要如何查看内容。

响应式网页设计会更改网站的布局，以最适合用户查看网站的视口。安妮塔·戈德斯坦的插图。

响应式设计需要结合流体网格、灵活的图像和媒体查询，它们共同作用，根据用户偏好重新格式化网页，并提供最佳的网络体验：

流体网格

网格是相交线的二维结构，可让您按列和行排列内容。在流体网格中，网格的每个元素都表示为相对于其容器的比例，因此它的大小取决于其所在容器的大小。这意味着网格中的确切列数可能会根据用户视口（用户设备上可以看到内容的可见区域）的大小而变化。例如，您可以在桌面上显示三列布局，在移动设备上显示一列布局。

相对单位

网页元素（例如内容块或按钮）以相对单位（例如百分比）调整大小。相对单位可以根据视口的大小来调整元素的大小。

媒体查询

CSS（层叠样式表）媒体查询可以根据视口的特征（例如显示分辨率和浏览器窗口的实际大小）更改页面的样式。

响应式设计的演变

智能手机的激增促使网页设计社区思考如何在各种显示尺寸和分辨率上显示内容，而不牺牲可用性或性能。

网页设计师 Ethan Marcotte 在他 2010 年的文章《响应式网页设计》中首次引入了“响应式设计”一词。Marcotte 的灵感来自于响应式建筑设计，空间会自动根据内部人数进行调整。顾名思义，响应式设计通过调整布局元素以适应可用空间来响应浏览器宽度的变化。

除了响应式设计之外，出现了第二种更加量身定制的方法：自适应设计。通过网页设计师 Aaron Gustafson 一年前在书中提出的自适应设计，设计师可以为每个断点（通常为 320 像素、480 像素、760 像素、960 像素、1200 像素和 1600 像素）创建布局。该设计使用媒体查询来适应不同大小的视口，以定义小屏幕和大屏幕将更改哪些属性。因此每个网页都有多个版本的固定布局，适合不同的屏幕尺寸。

当我们比较响应式设计与自适应设计时，响应式设计对于高级设计师来说通常是一种更有效的方法。由于您不需要创建多个版本的布局，因此实现和维护设计所需的工作量更少。

通过响应式设计，页面内容可以针对每个浏览器窗口进行最佳排列。响应式网页设计也更适合搜索引擎优化，因为当Googlebot 抓取您的网站时，它可以节省资源。单个 Googlebot 用户代理只需抓取您的页面一次，而不是抓取多次以检索设计的多个版本。

响应式网页设计方法

CSS 媒体查询是制作响应式网站的基本工具。所有现代网络浏览器都会原生解析 CSS 媒体查询，因此您在将设计调整到特定平台时不会遇到麻烦。

但仅仅因为它们是基本工具并不意味着您应该从头开始 CSS 媒体查询。Insead，使用 Bootstrap、Bulma 或 Foundation CSS 等 CSS 框架。这种方法的优点在于，该框架为基本对象（例如正文、按钮和输入字段）提供了一组预定义的断点和视觉样式。

当然，借助Wix Studio等先进的低代码平台，您可以使用流畅的拖放工具以及先进的设计功能（如 Flex 和网格布局以及完整的断点控制）无缝地制作动态网站，而无需所有代码。

另一种可用于响应式设计的方法是 JavaScript。JavaScript 检测浏览器窗口的大小并加载相关样式表，并且可以应用于不支持 CSS 媒体查询的设备。CSS 媒体查询和 JavaScript 不是竞争方法，它们可以很好地协同工作。

以下是可用于计算窗口当前大小的代码：

$ （窗口）。高度（）;  $ （窗口）。宽度（）;

每次用户更改浏览器窗口时都会触发以下 JQuery 代码，并且它将动态加载相关样式：

<脚本类型= "text/javascript" > 
  $ (文档) . Ready ( function ( ) { 
    $ ( window ) .bind ( "resize" , resizeWindow ) ; function resizeWindow ( e ) { // 每次用户更改浏览器窗口时都会触发此代码var newWindowWidth = $ ( window ) .宽度（）;
     
      
       
      if ( newWindowWidth <  481 ) {   
      // 如果窗口大小小于 481 ，则用户很可能在移动设备上浏览   
               $ ( "link[rel=stylesheet]" ) . attr ( { href :  "mobile.css" } ) ;        
        }        
    } 
  } ) ; < /脚本>

如何通过响应式网页设计来适应不同的观点

从巨大的电视屏幕到智能手表的小屏幕，当今人们可以通过多种方式访问网络。适应不同的视口以便为用户创造舒适的浏览体验非常重要。

响应式设计允许设计人员针对特定的设备类别和各种屏幕尺寸来解决这个问题。

要创建响应式设计，网页设计师需要做两件事：

1. 将“viewport”元标记添加到所有 HTML 页面：

<元名称= “视口”内容= “宽度=设备宽度，初始比例=1.0” >

该标签向浏览器提供有关如何呈现网页、定义其尺寸和缩放比例的说明。

2. 使用媒体查询根据特定视口定制其布局。

例如：

增加移动设备上功能控件（例如按钮）的大小或它们之间的相对距离。它将有助于遵守触摸设备上的菲茨定律并创造更舒适的用户交互。
显示或隐藏网站布局中的特定元素。
更改特定类型设备上某些元素的视觉属性（例如字体颜色）。

定义媒体查询

CSS 媒体查询根据用户的特定浏览器和设备偏好修改网站的设计。CSS 媒体查询的语法最初可能看起来很复杂，但是一旦您熟悉了结构，解码消息就会变得更容易。以下是 CSS 文件中媒体查询的示例：

@media 屏幕和 （最大宽度：  480 px ）和（方向：纵向）{ 。页脚{
    浮动：无；
    宽度：自动；} }

@media 之后和第一个左 { 括号之前的部分定义条件。让我们回顾一下示例的条件：

媒体类型：媒体类型是我们要应用 CSS 设置的设备类型。可以定义四类设备：屏幕（台式机、移动设备和平板电脑）、打印（打印机）、语音（为视障用户大声朗读页面的屏幕阅读器）、所有（适用于所有媒体类型）。如果不指定此属性，CSS 将默认应用 all 属性。
媒体功能：最小宽度设置某些样式将应用的最小浏览器或屏幕宽度。如果浏览器或屏幕宽度低于此限制，样式将被忽略。max-width 属性的作用恰恰相反，任何超过最大浏览器或屏幕宽度的内容都不会应用于相应的媒体查询。
方向：设备方向可以是纵向（垂直方向）或横向（水平方向）。此属性主要适用于移动设备和平板电脑。

在括号内，当满足所有条件时可以应用样式条件。在我们的示例中，我们检查三个条件：

设备类型是台式机、移动设备还是平板电脑？
我们的设备是纵向的吗？
我们的设备屏幕分辨率（最大宽度）是否等于或小于 480px？

如果满足所有条件，则意味着用户很可能在小屏幕移动设备上以纵向模式查看我们的作品。在这种情况下，设备将加载页脚对象的 CSS 指令，否则，本节中的指令将被忽略。

CSS 媒体查询

构建 CSS 样式有两种常见方法，要么将它们放在一个文件中，要么针对不同类型的设备使用不同的文件。每种方法都有其优点和缺点。例如，通过将媒体查询与网站的其余 CSS 样式一起放置在一个 CSS 样式表中，您可以最大限度地减少渲染网页所需的系统数量。

此外，通过在不同文件（即desktop.css、mobile.css）之间分配媒体查询将使开发人员更容易在代码中导航，因为与移动视口相关的所有样式都将位于同一文件中。

断点

我们在上面的媒体查询示例中定义的分辨率充当断点。断点是响应式网页设计的构建块，因为它们可以帮助设计人员定义设备类别并调整每个组的设计。

“我的网站应该使用哪些断点？” 这是网页设计师的一个典型问题。由于所有项目都不同并且可能需要不同的解决方案，因此不存在通用的断点集。可以依靠全球屏幕分辨率统计数据来定义几组常见的屏幕分辨率：

360 x 640px（小型移动设备屏幕）：10.10%
1366 x 768px（平均笔记本电脑屏幕）：9.3%
1920 x 1080px（大桌面屏幕）：8.35%

使用 Wix Studio 设计功能时，您将有 3 个默认断点：

移动设备为 350 - 750 像素
平板电脑 751 - 1000 像素
桌面版 1001 像素及以上

但这些断点并不是一成不变的。如果您想进行调整，您可以轻松编辑它们或添加自定义断点以满足您的项目需求，而无需深入研究代码。

为项目选择断点时要记住以下两个基本规则：

根据您拥有的内容选择断点。用于展示内容的布局应决定您要使用的断点。
尝试使用尽可能少的断点。请记住，您将需要调整内容以匹配每个断点。三到四个断点将为您提供足够的灵活性来构建内容。

调整图像大小以实现响应式网页设计

图像是现代网络的基本元素。图像的质量极大地影响了设计的感知——不相关的图像或像素化资产可能会给访问者留下不好的印象。精心挑选相关图像（向受众传达正确信息的图像）不仅很重要，而且还要确保图像能够很好地缩放以适应任何浏览器尺寸。

图像有两种类型：光栅图像（JPG、PNG、TIFF）和矢量图像（SVG）。第一组代表网络上的大多数图像，该组的关键问题是它们不自然流畅。与可以在不损失质量的情况下缩放尺寸的矢量图像不同，必须针对不同的分辨率修改光栅图像。

图像需要具有响应能力，就像布局的其他部分一样。这意味着在不牺牲质量的情况下扩大规模。

针对不同分辨率优化光栅图像的三种方法

让我们了解有关图像优化的更多信息，并获得有关如何调整图像大小的实用技巧。您可以使用 CSS 属性针对不同分辨率优化图像：

1. 使用图像宽度属性调整图像大小。width 属性定义图像的固定宽度。以下 CSS 规则将宽度定义为 500px：

img {
    宽度：500像素；}

这种方法的缺点是它对图像使用固定宽度，因此它将在所有设备上以完全相同的尺寸显示。这种方法对于响应式网站不太有用，因为尺寸不当的图像很容易破坏布局。

2. 将 CSS 宽度属性设置为 100% 来调整图像大小：

img {
    宽度: 100 % ; }

与前一种方法的主要区别在于，您无需在代码中指定图像的精确宽度，而是让浏览器根据需要调整图像的大小。宽度：100%；属性图像将自动缩放。这种方法的缺点是图像在放大时可能会变得像素化。

3. 使用 CSS max-width 属性接收：

img {
    高度：自动；
    最大宽度： 100 % ； _ }

最大宽度属性允许图像保持其纵横比和比例。当最大宽度设置为 100% 时，图像将适合其容器的整个宽度。只要没有其他基于宽度的图像 CSS 样式覆盖此规则或查看区域比图像的原始宽度窄，该图像就会以其原始大小加载。这种方法对于响应式网页设计非常有用。

显示尺寸和视觉资源

考虑不同类型的设备如何渲染图像也很重要。虽然可以在所有类型的设备上使用相同的文件，但为小屏幕设备调整图像大小的过程需要额外的计算能力，因此以其原始分辨率使用大文件可能会导致性能下降。

同时，高分辨率显示器（例如 Apple“Retina”和 Android“hDPI”）可能要求您提供正常分辨率的两倍或三倍的视觉资源，以实现良好的视觉质量（@2x 和 @3x）。为了解决这两个问题，建议使用特殊工具，例如响应断点，它允许您为每个断点准备单独的图像。

如果您使用Wix Studio构建响应式网站，则无需编写CSS代码即可使您的光栅图像在不同视口中正确显示。该平台允许您设置精确的宽度或高度、设置最大宽度或高度百分比以及以像素为单位设置最大宽度或高度。您还可以设置图像焦点，以便在以不同格式查看时视觉保持居中。

响应式使用排版

人们访问网站是为了获取内容，而书面文本占了其中的绝大多数。这意味着文本在任何视口大小下都清晰可见至关重要。因此，当谈到响应式类型时，有一些事情需要记住。（首先，请确保您了解字体和字体之间的区别。）

在选择类型时，请考虑这样一个事实：用户可能会在桌面、移动设备或平板电脑上查看页面，并且所有这些设备上的文本都必须清晰易读。响应式是必不可少的。

切勿将文本放入图形中

通过将文本放入图形中，您会立即降低其响应速度。文本无法在不损失质量的情况下放大，因此您必须为每个断点重新创建视觉资源。

选择可缩放的字体

优化响应式网页设计排版的过程从选择正确的字体开始。

为此，网页设计师需要确保字体大小足够大，以便一目了然。这对于移动设备尤其重要——用户永远不必双击或捏合缩放才能阅读文本。

选择尺寸清晰且在大电视屏幕和智能手表小屏幕上同样清晰的字体。一般来说，建议使用 Web 安全字体，如 Helvetica，因为它们经过优化，可以在不同分辨率下显示良好的效果。

正确调整文字大小

在网络上可以通过两种不同的方式调整字体大小：

绝对值（像素、点）
相对值（百分比、em/rem、视口宽度或高度 vw/vh）

让我们从最流行的选项——像素开始。像素是绝对值。以像素为单位定义的字体大小将基于用户屏幕的像素大小。当您使用 px 时，现代浏览器能够使您的设计在不同分辨率下看起来相似。

由于大多数设计师都使用像素，因此该单位在产品团队中非常受欢迎。但是，像素不允许用户根据自己的需要调整文本，并使您的设计更难以访问。

另一个流行的选项是称为em 的相对值。当您使用 em 时，元素 em 的实际大小是相对于其父元素的字体大小计算的。Em 相对值提供了两个显着的好处：

对设计人员的好处：相对值允许嵌套字体大小。Em 从其父级继承其大小，而 rem 从根样式继承。
对用户的好处：当您使用相对值时，您为用户提供了更改其首选默认字体大小的机会，并且网站将自动调整以满足他们的需求。

现在我们来谈谈百分比。当 font-size 为 100% 时，一页中的所有元素的大小都相对于浏览器的默认字体大小：

body {
    字体：正常100 % Roboto ，无衬线；}

最后但并非最不重要的一点是，当字体以“vw”单位定义时，文本大小将遵循浏览器窗口的大小：

< h1 style = "font-size: 12vw " > Hello World </h1>

另一件需要考虑的事情是不同设备上的字体大小需要不同。它在桌面上应该更大，在移动设备上应该更小。同样，使用相对值的好处是，您不仅可以定义特定元素所需的大小，还可以定义该大小与其他元素大小的关系，从而在布局中保持良好的比例。

以下 CSS 会将 h1 元素的默认字体大小设置为 3.5 rem（桌面版）和 2 rem（移动版）：

h1 {
    字体大小： 3.5 rem ; _ }@media only 屏幕和 ( max-width: 480px )  { 
    h1 { 
        font - size :  2 rem ; 
    } }

虽然字体大小没有确切的规则，但建议应用黄金比例来找到准确的字体大小。例如，如果桌面的基本字体文本为 16 像素，则标题 h1 的大小将通过将基本字体大小乘以 1.618 来计算（大约为 26 像素）。

您还可以将文本设置为在不同断点的最大和最小尺寸的不同范围之间缩放，以使您的网站排版完全响应。这将确保您的文本在您调整屏幕大小时能够平滑缩放。

行长和行距

为了获得良好的可读性，您需要限制文本行的长度。一个好的经验法则是，桌面设备每行使用 50 到 60 个字符，移动设备每行使用 30 到 40 个字符。可以使用内容容器的宽度属性或使用 ch 的“长度值”来限制每行的字符数。Ch 表示元素字体中字形“0”（零，Unicode 字符 U+0030）的宽度。

p { 溢出：隐藏；最大宽度： 40 ch ；  _ }

另外，您不应该挤压线条，因为线条间距太紧会导致眼睛疲劳。为了获得良好的可读性，最好使用120%-140% 的行间距。CSS 属性 line-height 通常用于设置文本行之间的距离。我们可以用百分比来设置这个属性，使其相对于元素本身的字体大小。

p {行高:  34 % ; _ }

移动优先与响应式设计

移动设备在我们日常生活中扮演的角色在过去十年中发生了巨大变化。事实上，所有网站流量的 56% 来自智能手机。移动设计优化是网页设计过程的关键部分，因为未针对移动设备进行优化的网站会损失大约一半的流量。

制作响应式网站并不意味着它是移动优先的，并且移动优先与响应式设计之间存在一些差异。移动优先设计是一种方法，建议设计师创建一个在最小断点处运行良好的布局，然后再针对更大的视口进行调整。

移动端和桌面端设计的区别：

显示尺寸。在移动设备上，您的内容空间较小，需要仔细确定要显示的内容的优先级
互动方式。由于用户在移动设备上使用手指与内容交互，因此悬停效果等动画效果不佳。
使用环境。人们可以在旅途中（例如，在等火车时）与内容进行交互，因此移动网站的设计应考虑较短的用户会话和较小的注意力范围。

使用移动优先方法的好处：

使响应式设计变得更容易。它将帮助您确定内容和功能的优先级，并删除所有不是绝对必要的内容。因此，您可能会减少用户在移动设备和您设计的任何其他平台上的认知负担。
有利于搜索引擎优化。谷歌主要根据移动版本的内容来评估网站排名。如果页面需要移动用户的额外交互（例如放大内容以使其可读），谷歌可能不会判断该页面适合移动设备。您可以参加Google 的移动设备友好测试来检查您网站的设计。

如何采用移动优先策略设计响应式网站：

练习安排内容优先

创建响应式网站的过程应该始终从规划布局开始。以一种为访问者提供最佳体验的方式组织您的内容和功能元素。这并不意味着您需要从一开始就创建最终的、像素完美的设计。事实上，建议创建未来设计的示意图，以显示每个包含内容和功能元素的块将位于页面上的位置。通过这种方式，您可以与团队和利益相关者一起评估布局的不同变体，并选择您认为最适合用户的布局。

使用条件加载

在确定内容的优先级时，您可能希望隐藏移动设备上的某些内容。CSS属性显示：无；允许你这样做。您可以在 CSS 中将此属性应用于需要隐藏的特定元素。例如，您可能有两种 CSS 样式，desktop.css（用于桌面）和 mobile.css（用于移动设备）：

桌面.css：

#内容{宽度： 100 % ； }

移动.css：

#content {显示：无； }

请注意，display:none有时会与visibility:hidden混淆。这是两个不同的 CSS 指令。可见性：隐藏只是隐藏内容，因此它变得不可见（未绘制）并且无法接收焦点，尽管它仍在页面上。显示：另一方面，没有一个可以完全摆脱内容。

舒适交互设计

用户通过点击与桌面网站进行交互，而移动版本则通过手指点击和滑动进行交互。人们还只用一只手使用他们的移动设备，优化网页布局非常重要，以便所有关键功能元素（例如号召性用语按钮）都位于拇指友好的区域（用户不必伸展他们的手指）拇指可触及重要元素）。

所有点击目标的大小都应适当。号召性用语按钮等功能元素的尺寸应至少为 9 毫米，相当于用户拇指的大小。如果并排放置两个交互式控件，则需要在这些交互式选项之间添加足够的空白。

拇指友好区域呈绿色。屏幕截图：https://alistapart.com/article/how-we-hold-our-gadgets/

使用清晰的视觉指示器

触摸屏无法显示悬停效果，因为没有光标。UI 的清晰度在移动设备上发挥着更加重要的作用，并且以最大限度地提高用户理解其功能的机会的方式设计每个元素非常重要。通过使用一致的视觉风格可以实现这一目标。例如，您可以为所有交互元素使用特定的蓝色。

适应移动设备的导航

大多数时候，网页设计师依赖移动设备上的汉堡菜单。但是，可以利用更有益的模式，例如优先级+导航模式。此模式保证最优先的选项始终对用户可见，而其余选项将隐藏在“更多”链接后面。

尽量减少打字

响应式网页设计不仅仅在于使内容适合，还在于为用户创建更舒适的交互。就移动设备而言，打字是用户旅程中最痛苦的部分之一。

小屏幕使得在移动设备上打字变得困难且容易出错。只要有可能，请尝试在在线表格中使用预填写数据。移动设备的伟大之处在于您可以利用其一些硬件功能。

以下是减少在移动设备上打字的一些提示：

使用地理位置数据在运输和账单信息中预先填写用户城市。您可以使用Google 的 Places API根据用户的位置提供准确的建议。
使用设备相机允许用户拍摄信用卡照片并自动填写信用卡详细信息。
使用 Touch ID / Face ID，而不是要求用户输入凭据。
在搜索表单中使用语音输入。

优化移动设备功能的响应式设计

加载时间缓慢是人们放弃网站的一个常见原因。

Jakob Nielsen 定义了三个响应时间限制：0.1 秒给出瞬时响应的感觉。理想情况下，您的网站应在 0.1 秒内响应。一秒钟让用户的思维流畅。10秒大约是保持用户注意力的极限。但根据Google 研究，随着页面加载时间从 1 秒变为 3 秒，跳出的概率增加了 32%。

移动设备的功能不如台式电脑。这就是为什么当你为移动设备设计时，你需要避免大量的视觉内容、花哨的动画效果和复杂的视觉过渡，因为它们可能会对系统性能产生负面影响。

加载时间和跳出率之间的相关性。图片：https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/

使用这些技巧来优化您的移动设计：

定义关键绩效指标。重点关注能够告诉您内容渲染速度的指标。关键指标是交互时间(TTI)，它定义布局稳定的状态：所有字体均可见，并且 UI 已准备好处理用户输入。您还应该考虑速度指数（页面内容的视觉填充速度）和 CPU 时间消耗（中央处理器的主线程被阻塞的频率和时间）。
评估动画过渡和运动效果。问问自己“这种视觉效果值得花时间在移动设备上加载吗？”
优化图像传输。如果您的产品提供大量图像，则值得考虑可以通过内容交付网络 (CDN) 静态提供哪些内容。Cloudflare和 Cloud CDN 是两个流行的选择。
优化动画和视频。避免使用动画 GIF，因为它们会消耗大量硬件资源并开始使用循环 HTML5 视频。
对图像和视频使用延迟加载。大多数时候，您不需要一次加载所有视觉资源。当用户在折叠下方滚动时，可以动态加载位于折叠下方的内容。这种做法称为延迟加载。您可以使用LazyLoad库来实现此目的 - 该库是用纯 JavaScript 编写的，并且支持响应式图像。在Chrome 76+中，您可以使用loading属性来推迟加载可通过滚动到达的屏幕外图像。这是一个例子：

< img src = “image.png” loading = “lazy” alt = “…”  >

始终衡量您的网站性能。使用 Google 的速度记分卡和Dexecure 等工具来跟踪您当前的性能，例如在移动设备上加载网站所需的时间。查看前端性能检查表以了解有关性能优化的更多信息。

在真实设备和不同浏览器中测试您的设计

当您完成网站工作后，您应该投入时间在真实设备上进行测试。创建用户应该在您的网站上完成的常见任务列表，并邀请代表您的目标受众的个人参加可用性测试会议。

在测试过程中，您可以看到您的网站在不同平台（Android、iOS）上的运行情况以及跨浏览器兼容性（Chrome、Safari、Firefox）。如果您怀疑特定浏览器是否支持某些 CSS 样式指令，您可以在Caniuse中检查。测试将向您展示用户在哪里遇到摩擦以及网站的哪些区域需要优化。

4个响应式网页设计示例

解释响应式网页设计的工作原理是一回事，看到实践的实际情况又是另一回事。查看下面的响应式网站设计示例并更改浏览器大小，以了解每个设计如何响应更改。（更多关于良好网页设计的信息请点击这里。）

1. KT埃斯特普

屡获殊荣的多学科设计师 KT Estep 拥有响应式网页设计的杰出范例。全屏网页布局可根据浏览器的宽度灵活调整，使内容与相关尺寸的屏幕空间对齐。当您在移动设备上打开设计时，您会发现没有任何内容被删除，而是排列成一列，这提供了更好的观看体验并在小屏幕上轻松滚动。

截图：https://www.ktestep.com/

2. Ja1da官方

Ja1da 是一位制作人和词曲作者，拥有一个令人兴奋的响应式网站。在整个网站中使用手写字体、独一无二的矢量图形、视频框和滚动效果都是艺术家将个性注入到他的设计中的方式。当我们查看桌面版本与移动版本相比时，这些都不会丢失。

在移动设备上，Ja1da 重新排列网站图像并更改其比例，以保持网站主题并确保视觉平衡。汉堡菜单的响应式切换还可以在小型移动设备上提供更多的屏幕空间。

截图：https://www.iamja1da.com/