css媒体查询（手机、平板、PC）

落花见流水

于 2021-04-25 11:55:47 发布

阅读量4.2k

点赞数 1

分类专栏： css

本文链接：https://blog.youkuaiyun.com/qq_41913971/article/details/116121936

版权

css 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了CSS媒体查询的应用，用于区分不同设备的屏幕尺寸，如超小屏幕的手机（<768px）、小屏幕的平板（≥768px）、中等屏幕的桌面显示器（≥992px）以及大屏幕的大桌面显示器（≥1200px）。通过这些查询，可以实现响应式网页设计，确保在不同设备上提供良好的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

List item

css媒体查询

PC端按屏幕尺寸整理?
在这里插入图片描述
通过上面的电脑屏蔽及尺寸的例表上我们得到了几个宽度
1024 1280 1366 1440 1680 1920

超小屏幕手机 (<768px)
小屏幕平板 (≥768px)
中等屏幕桌面显示器(≥992px)
大屏幕大桌面显示器 (≥1200px)

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

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

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

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