如何使用 JavaScript 的条件及 CSS3 媒体查询定位-JavaScript中文网-JavaScript教程资源分享门户

Web 开发中，我们经常需要根据屏幕大小、设备类型等条件来调整网站的布局和样式。CSS3 中引入了媒体查询机制，可以根据不同条件设置不同的样式。而 JavaScript 可以通过检测这些条件来实现更复杂的逻辑。

使用 CSS3 媒体查询

媒体查询是 CSS3 的一个功能，它可以根据不同的媒介类型和特定的条件，为文档应用不同的样式。在 Web 开发中，我们通常使用媒体查询来实现响应式布局。

基本语法

@media mediatype and (media feature) {
  /* CSS rules */
}

其中，mediatype 是媒介类型，比如 screen、print 等等；media feature 是媒介特性，比如 width、height、orientation 等等。下面是一个例子：

@media screen and (max-width: 480px) {
  /* 当屏幕宽度小于等于 480px 时，应用此处的样式 */
  body {
    font-size: 14px;
  }
}

常见媒体特性

以下是一些常见的媒体特性以及相应的取值：

width: 屏幕宽度
height: 屏幕高度
orientation: 屏幕方向，可选值为 portrait 或 landscape
aspect-ratio: 屏幕宽高比
device-width: 设备屏幕宽度
device-height: 设备屏幕高度
color: 设备颜色支持，可选值为 monochrome、grayscale、color
resolution: 设备分辨率

嵌套使用媒体查询

媒体查询也可以嵌套使用，以实现更复杂的条件判断。例如：

-- -------------------- ---- -------
------ ------ --- ----------- ------ -
  -- --------- ----- - --
  ---- -
    ---------- -----
  -

  ------ ------------- --------- -
    -- -------- --
    ---- -
      ----------------- --------
    -
  -

  ------ ------------- ---------- -
    -- -------- --
    ---- -
      ----------------- --------
    -
  -
-

使用 JavaScript 检测条件

除了使用 CSS3 媒体查询外，我们还可以使用 JavaScript 检测屏幕大小、设备类型等条件。

屏幕大小检测

我们可以使用 window.innerWidth 和 window.innerHeight 来获取当前窗口的宽度和高度。例如：

if (window.innerWidth <= 480) {
  // 当屏幕宽度小于等于 480px 时
  document.body.style.fontSize = '14px';
}

设备类型检测

我们可以使用 navigator.userAgent 来获取用户代理信息，从而判断设备类型。例如：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
  // 如果是移动设备，则执行相应的逻辑
  // ...
} else {
  // 如果是桌面设备，则执行相应的逻辑
  // ...
}

结语

以上就是关于如何使用 JavaScript 的条件及 CSS3 媒体查询定位的介绍。通过运用这些技术，我们可以更加灵活地控制网站的布局和样式，提供更好的用户体验。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/24895