CSS媒体查询完全指南（Media Quires）

lewis 1年前 (2024-04-28) 阅读数 14 #技术

本篇文章带大家学习CSS媒体查询（Media Quires），详细介绍了媒体查询语法定义，从三个具体布局例子学习媒体查询的使用技巧；并介绍了一些scss、css属性知识。

前端（vue）入门到精通课程：进入学习
API 文档、设计、调试、自动化测试一体化协作工具：点击使用

什么是SCSS

Sass: Sass Basics (sass-lang.com)

SCSS 是 CSS 的预处理器，它比常规 CSS 更强大。【推荐学习：css视频教程】

可以嵌套选择器，更好维护、管理代码。可以将各种值存储到变量中，方便复用。可以使用 Mixins 混合重复代码，方便复用。

scss导入html

方法一 VSCODE 插件

【推荐学习：《vscode入门教程》】

方法二手动编译

npm install -g sass

sass input.scss output.css ::单次编译
sass --watch scss/index.scss css/index.css ::多次编译

 ::写在HTML里
登录后复制

可能遇到的问题

Refused to apply style from 'http://127.0.0.1:5500/CSS媒体查询/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

解决方法： 404 Not Found，提供的文件地址有误。

CSS属性 background-size

contain;

图片宽高比不变，缩放至图片自身能完全显示出来，所以容器会有留白区域

cover;

图片宽高比不变，铺满整个容器的宽高，而图片多出的部分则会被截掉

100%;

图片宽高比改变，缩放至和div宽高一致的尺寸。

CSS媒体查询

CSS媒体查询允许您创建从桌面到移动设备的所有屏幕尺寸的响应式网站。

语法

定义

@media screen and (max-width: 768px){
  .container{
   // 你的代码
  }
}
登录后复制

媒体查询声明， @media媒体查询类型， screen覆盖的屏幕范围， max-width: 768px更改样式， Write styles here

深入

媒体查询声明

媒体查询以@media声明开头。目的是告诉浏览器我们已指定媒体查询。

媒体查询类型

all 所有媒体设备print 打印设备screen 电脑、平板、手机屏幕speech 屏幕阅读器

@media screen
登录后复制

为什么要加and

在肯德基买东西，你想要炸鸡和汉堡，这是两个需求条件。

现在你已经确定了一个条件，即 screen 媒体查询类型。你要指定其他条件，比如想要规定在某一个屏幕范围内，那么就可以用 and 来连接。

@media screen and (max-width : 768px) {
  .container{
     // 在screen媒体类型,屏幕宽度

版权声明

本文仅代表作者观点，不代表博信信息网立场。

上一篇：LeetCode-Number of Lines To Write String 下一篇：JS异步与回调的概念怎么理解，怎样应用