css屏幕尺寸与设备

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px) { ... }

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }
复制

也可以在媒体查询代码中包含 max-width 从而将 CSS 的影响限制在更小范围的屏幕大小之内。

/* 超小屏幕（手机，小于 768px） */
@media (max-width: 768px) { ... }

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: 768px) and (max-width: 992px) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: 992px) and (max-width: 1200px) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: 1200px) { ... }
复制

这两种写法的区别主要在于：

• 第一种写法适用于每个区间是互斥且递增的情况，即每增加一个区间，之前的区间不再适用；
• 第二种写法则在每个区间内部署了更精确的范围限制，适用于需要对每个屏幕宽度区间进行精细化处理的场景。

除了上面提到的根据屏幕宽度设置媒体查询之外，还可以结合其他媒体特性进行查询，以下是一些其他的媒体查询写法：

1. 根据设备高度：

/* 当设备高度小于或等于600px时 */
@media (max-height: 600px) { ... }

/* 当设备高度大于或等于800px时 */
@media (min-height: 800px) { ... }
复制

2. 根据设备分辨率（dpi）：

/* 当设备分辨率为1dpi到1.5dpi之间 */
@media (-webkit-min-device-pixel-ratio: 1), 
       (min-resolution: 1dppx) and (max-resolution: 1.5dppx) { ... }
复制

3. 同时考虑宽度和高度：

/* 当设备宽度大于600px且高度大于400px */
@media (min-width: 600px) and (min-height: 400px) { ... }
复制

4. 方向性（横屏/竖屏）：

/* 当设备处于横屏模式 */
@media screen and (orientation: landscape) { ... }

/* 当设备处于竖屏模式 */
@media screen and (orientation: portrait) { ... }
复制

5. 颜色深度：

/* 当设备颜色深度至少为16位 */
@media (min-color-index: 256) { ... }

/* 当设备颜色深度最多为256位 */
@media (max-color-index: 255) { ... }
复制

6. 视窗比例：

/* 当视窗宽度与高度的比例大于或等于1.5 */
@media (aspect-ratio: 16/9) { ... }
复制

注意：并非所有媒体特性在所有浏览器中都被支持，所以在实际开发中应参考 Can I Use 等资源了解兼容性，并可能需要采用一些 polyfill 方案来提高兼容性。

对于打印设备，我们可以使用 print 媒体类型来编写专门针对打印输出的样式。以下是如何针对打印设备编写媒体查询的例子：

/* 通用打印样式 */
@media print {
    /* 这里的CSS样式将在打印预览或打印时生效 */
    body {
        font-size: 10pt;
        background-color: transparent !important;
    }
    #header, #footer, #nav-bar {
        display: none; /* 隐藏不需要在打印版中显示的部分 */
    }
}

/* 更细粒度的打印设备样式控制，比如纸张大小 */
@media print and (width: 21cm) and (height: 29.7cm) {
    /* 这里的样式将在纸张尺寸为A4大小的打印设备上生效 */
    .page-break {
        page-break-after: always; /* 强制每个.page-break元素后面插入分页符 */
    }
}
复制

这里，@media print 媒体查询的作用是当用户尝试打印页面时，应用其中的 CSS 样式。你可以在这里自定义打印样式，比如隐藏某些不适合打印的内容，改变字体大小和颜色，或者添加分页符等。