海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

大多数现代网站都使用响应式网页设计技术来确保它们看起来不错,可读性强,并且可以在任何屏幕尺寸的设备上使用,例如手机、平板电脑、笔记本电脑、台式 PC 显示器、电视、投影仪等。

使用这些技术的站点有一个模板,它根据屏幕尺寸修改布局:

  • 较小的屏幕通常显示线性单列视图,其中通过单击(汉堡包)图标激活菜单等 UI 控件。
  • 更大的屏幕显示更多信息,可能带有水平对齐的侧边栏。 菜单项等 UI 控件可能始终可见,以便于访问。

响应式网页设计的一个重要部分是实现 CSS 或 JavaScript 媒体查询以检测设备尺寸并自动提供适合该尺寸的设计。 我们将讨论为什么这些查询很重要以及如何使用它们,但首先,让我们大体讨论响应式设计。

为什么响应式设计很重要?

不可能提供单个页面布局并期望它在任何地方都能工作。

当手机在 2000 年代初期首次获得基本的 Web 访问权限时,网站所有者通常会根据移动和桌面视图松散地创建两个或三个单独的页面模板。 随着设备种类呈指数级增长,这变得越来越不切实际。

今天,有许多屏幕尺寸,从微型手表显示器到巨大的 8K 显示器甚至更高。 即使只考虑手机,最近的设备也可以比许多低端笔记本电脑具有更高的分辨率。

海外社媒SNS代运营Tiktok代运营公司

移动设备的使用也超出了台式电脑的使用范围。 除非您的网站有一组特定的用户,否则您可以期望大多数人通过智能手机访问它。 尽管大多数网页设计师、开发人员和客户继续使用标准 PC,但小屏幕设备不再是事后的想法,应该从一开始就考虑。

谷歌已经认识到移动设备的重要性。 如果网站可用且在智能手机上表现良好,则它们在 Google 搜索中的排名会更高。 好的内容仍然至关重要,但无法适应用户群屏幕尺寸的缓慢加载网站可能会损害您的业务。

最后,考虑可访问性。 一个适合所有人的网站,无论他们使用什么设备,都会吸引更多的受众。 在许多国家/地区,可访问性是一项法律要求,但即使它不是您所在的地方,也要考虑到更多的观众会带来更多的转化和更高的盈利能力。

为了解决响应式网页设计,您首先需要了解 JavaScript 媒体查询 🤓 让我们深入研究! 🚀点击推文

响应式设计如何运作?

响应式设计的基础是媒体查询:一种 CSS 技术,可以根据输出类型(屏幕、打印机,甚至语音)、屏幕尺寸、显示纵横比、设备方向、颜色深度和指针精度等指标应用样式. 媒体查询还可以考虑用户偏好,包括减少动画、亮/暗模式和更高的对比度。

我们展示的示例演示了仅使用屏幕宽度的媒体查询,但站点可以更加灵活。 有关详细信息,请参阅 MDN 上的全套选项。

媒体查询支持非常好,并且已经在浏览器中使用了十多年。 只有 IE8 及以下不支持。 它们会忽略媒体查询应用的样式,但这有时会带来好处(在 最佳实践 以下部分)。

使用媒体查询应用样式有三种标准方法。 第一个加载 HTML 代码中的特定样式表。 例如,以下标签加载 宽.css 当设备的屏幕宽度至少为 800 像素时的样式表:

<link rel="stylesheet" media="screen and (min-width: 800px)" href="https://kinsta.com/blog/javascript-media-query/wide.css" />

其次,样式表可以使用 @import 规则:

/* main.css */
@import url("https://kinsta.com/blog/javascript-media-query/wide.css") screen and (min-width: 800px);

更常见的是,您将使用修改特定样式的 @media CSS at-rule 块在样式表中应用媒体查询。 例如:

/* default styles */
main {
  width: 400px;
}

/* styles applied when screen has a width of at least 800px */
@media screen and (min-width: 800px) {
  main {
    width: 760px;
  }
}

开发人员可以应用任何必要的媒体查询规则来调整站点的布局。

媒体查询最佳实践

最初设计媒体查询时,许多站点选择了一组严格固定的布局。 这在概念上更易于设计和编码,因为它有效地复制了一组有限的页面模板。 例如:

  1. 小于 600 像素的屏幕宽度使用 400 像素宽的类似移动设备的布局。
  2. 600 像素和 999 像素之间的屏幕宽度使用 600 像素宽的平板电脑式布局。
  3. 大于 1,000 像素的屏幕宽度使用 1000 像素宽的类似桌面的布局。

技术有缺陷。 在非常小的和非常大的屏幕上的结果可能看起来很差,并且随着设备和屏幕尺寸的变化,可能需要 CSS 维护。

更好的选择是使用带有断点的移动优先流体设计,以适应特定尺寸的布局。 本质上,默认布局使用最简单的小屏幕样式,将元素放置在线性垂直块中。

例如, <article><aside> 里面一个 <main> 容器:

/* default small-screen device */
main {
  width: 100%;
}

article, aside {
  width: 100%;
  padding: 2em;
}

这是所有浏览器的结果——即使是不支持媒体查询的非常老的浏览器:

不支持媒体查询的示例截图。

不支持媒体查询的示例截图。

当支持媒体查询并且屏幕超过特定宽度(例如 500px)时, <article><aside> 元素可以水平放置。 此示例使用 CSS 网格,其中主要内容使用大约三分之二的宽度,次要内容使用剩余的三分之一:

/* larger device */
@media (min-width: 500px) {
  main {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2em;
  }

  article, aside {
    width: auto;
    padding: 0;
  }
}

这是大屏幕上的结果:

具有 javascript 媒体查询支持的示例屏幕截图

具有媒体查询支持的示例屏幕截图。

媒体查询替代方案

响应式设计也可以在现代 CSS 中使用更新的属性来实现,这些属性在不检查视口尺寸的情况下本质上适应了布局。 选项包括:

  • calc, min-width, max-width, min-height, max-height,以及较新的 clamp 属性都可以定义根据已知限制和可用空间来调整元素大小的维度。
  • 视口单位 vw, vh, vmin, 和 vmax 可以根据屏幕尺寸分数调整元素大小。
  • 文本可以显示在 CSS 列中,这些列在空间允许时出现或消失。
  • 元素可以根据它们的子元素大小使用 min-content, fit-content, 和 max-content 方面。
  • CSS flexbox 可以包装——或者 不是 wrap — 元素开始超出可用空间。
  • CSS 网格元素可以按比例调整大小 fr 单位。 重复 CSS 功能可以与 minmax, auto-fit, 和 auto-fill 分配可用空间。
  • 新的和(目前)实验性的 CSS 容器查询可以对布局中组件可用的部分空间做出反应。
WordPress花园建议你也读一下这篇文章  如何使用 WordPress Pullquote 块

这些选项超出了本文的范围,但它们通常比粗略的媒体查询更实用,后者只能响应屏幕尺寸。 如果您可以在没有媒体查询的情况下实现布局,它可能会使用更少的代码、更高效,并且随着时间的推移需要更少的维护。

也就是说,在某些情况下,媒体查询仍然是唯一可行的布局选项。 当您需要考虑其他屏幕因素(例如纵横比、设备方向、颜色深度、指针准确性或用户偏好(例如减少动画和明暗模式)时,它们仍然必不可少。

你需要 JavaScript 中的媒体查询吗?

到目前为止,我们主要讨论了 CSS。 那是因为大多数布局问题都可以——而且 应该 — 仅在 CSS 中解决。

但是,在某些情况下,使用 JavaScript 媒体查询而不是 CSS 是可行的,例如:

  • 一个组件(例如菜单)在小屏幕和大屏幕上具有不同的功能。
  • 在纵向/横向之间切换会影响 Web 应用程序的功能。
  • 基于触摸的游戏必须改变 <canvas> 布局或调整控制按钮。
  • Web 应用程序遵循用户偏好,例如暗/亮模式、减少动画、触摸粗糙等。

以下部分演示了在 JavaScript 中使用媒体查询(或类似媒体查询的选项)的三种方法。 所有示例都返回一个状态字符串,其中:

  • 小的 view = 宽度低于 400 像素的屏幕;
  • 中等的 view = 宽度在 400 到 799 像素之间的屏幕; 和
  • 大的 view = 宽度为 800 像素或更大的屏幕。

选项 1:监控视口尺寸

在实施媒体查询之前的黑暗时期,这是唯一的选择。 JavaScript 将侦听浏览器“调整大小”事件,使用 window.innerWidthwindow.innerHeight (或者 document.body.clientWidthdocument.body.clientHeight 在旧 IE 中),并做出相应的反应。

此代码输出计算 小的, 中等的, 或者 大的 字符串到控制台:

const
  screen = {
    small: 0,
    medium: 400,
    large: 800
  };

// observe window resize
window.addEventListener('resize', resizeHandler);

// initial call
resizeHandler();

// calculate size
function resizeHandler() {

  // get window width
  const iw = window.innerWidth;
 
  // determine named size
  let size = null;
  for (let s in screen) {
    if (iw >= screen[s]) size = s;
  }

  console.log(size);
}

您可以在此处查看工作演示。 (如果使用桌面浏览器,请在新窗口中打开此链接以更轻松地调整大小。移动用户可以旋转设备。)

上面的示例在调整浏览器大小时检查视口大小; 确定它是小、中还是大; 并将其设置为 body 元素上的类,这会更改背景颜色。

这种方法的优点包括:

  • 它适用于所有可以运行 JavaScript 的浏览器——甚至是古老的应用程序。
  • 您正在捕获准确的尺寸并可以做出相应的反应。

缺点:

  • 这是一项需要大量代码的旧技术。
  • 是不是太准确了? 你真的需要知道什么时候宽度是 966px 还是 967px?
  • 您可能需要手动将尺寸匹配到相应的 CSS 媒体查询。
  • 用户可以快速调整浏览器的大小,使处理程序函数每次都重新运行。 这可以通过限制事件来使旧的和较慢的浏览器过载。 它只能每 500 毫秒触发一次。

总之,除非您有非常具体和复杂的尺寸要求,否则不要监视视口尺寸。

选项 2:定义和监控 CSS 自定义属性(变量)

这是一种稍微不寻常的技术,它会在触发媒体查询时更改 CSS 中自定义属性字符串的值。 所有现代浏览器(但不支持 IE)都支持自定义属性。

在下面的例子中, --screen custom property 在@media 代码块中设置为“small”、“medium”或“large”:

body {
  --screen: "small";
  background-color: #cff;
  text-align: center;
}

@media (min-width: 400px) {
 
  body {
    --screen: "medium";
    background-color: #fcf;
  }
 
}

@media (min-width: 800px) {
 
  body {
    --screen: "large";
    background-color: #ffc;
  }
 
}

该值可以使用伪元素单独在 CSS 中输出(但请注意,它必须包含在单引号或双引号内):

p::before {
  content: var(--screen);
}

您可以使用 JavaScript 获取自定义属性值:

const screen = getComputedStyle(window.body)
                 .getPropertyValue('--screen');

不过,这还不是全部,因为返回的值包含…

营销型WordPress外贸多语言独立站建设+谷歌SEO优化+谷歌关键字广告投放,就找WP花园!深圳公司,技术实力雄厚,用效果说话!详情咨询info@wordpresshy.com

海外社媒SNS代运营Tiktok代运营公司
Revive Old Posts