css 判断 屏幕宽度

CSS 中可以使用媒体查询 (Media Queries) 来判断屏幕宽度，并根据不同的宽度范围应用不同的样式。媒体查询允许你编写针对特定视口尺寸的 CSS 规则，例如：

/* 当屏幕宽度小于600px时应用的样式 */
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

/* 当屏幕宽度在600px到900px之间时应用的样式 */
@media screen and (min-width: 600px) and (max-width: 900px) {
  .container {
    flex-direction: column;
  }
}

/* 等等... */

你可以设置具体的像素值、百分比、设备宽度（如 "device-width"），甚至媒体类型（如 "print", "screen"）。通过这种方式，你可以创建响应式设计，使得网站在不同的设备和屏幕尺寸上都能有良好的显示效果。

相关问题

js 判断 屏幕宽度

在JavaScript中，你可以使用浏览器提供的`window.innerWidth`属性来获取当前屏幕的宽度，这个值会随着窗口大小的变化而更新。判断屏幕宽度通常会在需要响应式设计或者针对不同设备布局时使用。

例如，你可以这样做：

let screenWidth = window.innerWidth;
if (screenWidth <= 600) {
    // 当屏幕宽度小于等于600px时，执行相应操作
} else if (screenWidth > 600 && screenWidth <= 900) {
    // 屏幕宽度在601px到900px之间，执行另一操作
} else {
    // 屏幕宽度大于900px，执行更大屏幕的处理
}

如果你想基于特定条件分段显示不同内容，可以添加更多的条件判断。如果你需要动态调整CSS样式或者渲染不同视图，也可以结合使用@media查询来编写更复杂的响应式代码。

css 判断浏览器分辨率

CSS本身并不能直接检测浏览器的分辨率，因为这是客户端的操作，而CSS是一种样式表语言，主要用于描述文档的呈现。但是，你可以结合JavaScript或者其他一些前端技术来实现这个功能。

以下是一个简单的示例，利用JavaScript在CSS媒体查询中动态改变样式，根据屏幕宽度调整布局：

/* CSS */
@media only screen and (max-width: 640px) {
  .small-screen-only {
    /* 根据小屏幕分辨率显示样式 */
  }
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
  .medium-screen-only {
    /* 根据中等屏幕分辨率显示样式 */
  }
}

@media only screen and (min-width: 961px) {
  .large-screen-only {
    /* 根据大屏幕分辨率显示样式 */
  }
}

在JavaScript中，你可以使用`window.innerWidth`来获取浏览器窗口的实际宽度：

function checkScreenSize() {
  let screenWidth = window.innerWidth;
  if (screenWidth <= 640) {
    document.getElementById('screen-class').classList.add('small-screen-only');
  } else if (screenWidth >= 641 && screenWidth <= 960) {
    document.getElementById('screen-class').classList.add('medium-screen-only');
  } else {
    document.getElementById('screen-class').classList.add('large-screen-only');
  }
}

// 页面加载完成后或定期检查
checkScreenSize();

在这个例子中，`#screen-class`是你想要根据屏幕尺寸应用不同样式的元素ID。你可以根据实际需求修改这些CSS类和判断条件。