CSS媒体查询的基本使用_媒体查询max-width-优快云博客

本文链接：https://blog.youkuaiyun.com/lingsaner/article/details/131151109

文章介绍了媒体查询的基本用法，如max-width和min-width属性，用于实现根据不同设备宽度调整布局的效果。在案例中，当网页宽度小于等于768px时，左侧区域通过CSS隐藏，展示了响应式设计的应用。此外，还提到了媒体查询的完整写法，包括逻辑操作符、媒体类型和特性，以及如何在外部CSS中使用媒体查询。

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

01-媒体查询

基本写法

在这里插入图片描述

max-width：最大宽度（小于等于）
min-width：最小宽度（大于等于）

书写顺序

min-width（从小到大）
max-width（从大到小）

案例-左侧隐藏

需求：网页宽度小于等于768px则隐藏左侧区域

在这里插入图片描述

HTML 结构

<div class="box">
  <div class="left">left</div>
  <div class="main">
    响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果响应式网页效果
  </div>
</div>

CSS 样式

.box {
  display: flex;
}

.left {
  width: 300px;
  height: 500px;
  background-color: pink;
}

.main {
  flex: 1;
  height: 500px;
  background-color: skyblue;
}

@media (max-width: 768px) {
  .left {
    display: none;
  }
}

媒体查询-完整写法

在这里插入图片描述

关键词 / 逻辑操作符

and
only
not

媒体类型

媒体类型用来区分设备类型

screen：屏幕设备
打印预览：print
阅读器：speech
不区分类型：all

媒体特性

视口宽高：width / height
视口最大宽高：max-width ；max-height
视口最小宽高：min-width；min-height
屏幕方向：orientation
- protrait：竖屏
- landscape：横屏

媒体查询-外部CSS

在这里插入图片描述
通常只需要写媒体类型

<link rel="stylesheet" media="(max-width:786px)" href="sm.css">