媒体查询常见断点

原创已于 2024-10-11 16:42:03 修改 · 466 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#媒体

于 2024-10-11 16:39:30 首次发布

html、css 专栏收录该内容

1 篇文章

订阅专栏

在编写响应式布局的时候，常用到媒体查询，以下是一些常见的设备断点

/* 手机和小型设备 */
@media screen and (max-width: 600px) {
  /* CSS规则 */
}

/* 平板 */
@media screen and (min-width: 601px) and (max-width: 768px) {
  /* CSS规则 */
}

/* 小型笔记本电脑到大型笔记本电脑和桌面显示器 */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  /* CSS规则 */
}

/* 大型笔记本电脑和桌面显示器 */
@media screen and (min-width: 1025px) {
  /* CSS规则 */
}
/* 针对超大屏幕的设备，宽度超过 1440px */
@media (min-width: 1441px) {
  /* 你的样式 */
}