如何使用媒体查询。

最新推荐文章于 2025-09-26 17:13:38 发布
原创 最新推荐文章于 2025-09-26 17:13:38 发布 · 662 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了响应式设计的核心——媒体查询技术。媒体查询可根据不同设备特性调整CSS样式，实现网页在不同尺寸设备上的良好布局。文章解释了CSS中px单位的特性，并通过实例展示了如何运用媒体查询进行编码。

一、背景介绍

近几年整个社会发生了翻天覆地的变化，各种智能手机，pad，之类的移动端设备随处可见。那么，程序员界就刮起了一阵风暴，大家在思考 “ 如何让我们的网站在各种移动端设备上都能布局合理呢？ ”为每一个设备写一套代码自然是非常麻烦的。那么，聪明的程序员们想到了一个办法，“ 我只要一套代码，就能让我的网站在不同大小的设备上正确显示 ”。于是，响应式设计模型诞生啦！其核心就是“媒体查询”技术。

二、知识剖析

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，
                媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，
                可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果


三、常见问题

问题：在CSS中媒体查询用到的PX究竟是怎样一个单位？它是相对单位还是绝对单位？

四、解决方案

问题：css里所有的px都是css pixel（ 同时media query使用的px显然也是css pixel。），其显示大小是相对的而不是绝对的，是设备相关的。
                而css pixel * devicePixelRatio = 实际屏幕像素。

五、编码实战

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="1.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div>
        <span>真实</span>
        <span>真实</span>
        <span>真实</span>
    </div>


</body>
</html>html {
    font-size: 62.5%;
}


body {
    margin: 0;
}


span {
    width: 30%;
    height: 30vw;
    background: rgb(248, 0, 165);
    margin: 1.5%;
    float: left;
    font-size: 1rem;
    text-align: center;
    line-height: 30vw;  
}


@media screen and (max-width:768px) {
    span {
        width: 47%;
    }
}
/* @media screen and (max-width:768px) {
    span {
        color: #fff;
        font-size: 2rem;
    }
}
@media screen and (max-width:768px){
        span{
        background: rgb(0, 238, 255);
        }
    } */
    /* @media screen and (max-width:320px){
        span{
        width:97%;
        }
    } */
    /* @media screen and (min-width:768px){
        span{
        width:97%;
        }
    } */
    /* @media screen and (max-width:320px) and (min-width:768px) {
        span{
        background: rgb(0, 238, 255);
        }
    }  */

六、拓展思考

媒体查询是写在 CSS前面和后面，哪里比较好？

七、参考文献

http://www.cnblogs.com/pilixiami/p/5611346.html

八、更多讨论

https://www.jianshu.com/p/2dfa5bab1ef1

提问1：媒体查询应该放在css样式后面还是前面。

回答：放在后面，因为媒体查询是在css的基础上建立的没有css媒体查询也不会生效。

提问2：媒体查询能改变html的内容吗。

回答：不能，媒体查询只能改变其样式不能改变其内容。

提问3：媒体查询一般会设置多少次；

回答：一般设置4次分别对应


感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

获得更多IT技能，请移步官网 点击链接直达：http://www.jnshu.com/login/1/17884272

qq_38333670
关注
2.6、媒体查询（mediaquery）
lujianfeiccie2009的专栏
03-22 1043
媒体查询作为响应式设计的核心，在移动设备上应用十分广泛。媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。
rem适配+媒体查询+less基本使用——理论篇
爱游戏爱学习的博客
04-10 956
使用rem适配布局的好处是：可以使得随着屏幕的不同，里卖你的各种元素也随着改变，进而达到页面的完美布局。
媒体查询如何使用？
天心天地生的博客
10-10 923
媒体查询 媒体查询是非常别致的"有条件的 CSS 规则"。它只适用于一些基于某些规定条件的 CSS。如果满足那些条件，则应用相应的样式。 为什么使用媒体查询 使用@media媒体查询，可以针对不同的媒体类型定义不同的样式。 媒体查询的使用 引入方式 媒体查询有两种引入方法： link元素中的CSS媒体查询 css样式表中媒体查询 语法 基本语法 <!-- link元素中的CSS媒体查询 --...
响应式网页制作（媒体查询、左侧隐藏)
最新发布
m0_74540090的博客
09-26 145
注意:在做响应式网页的时候media方法，不在是检查视口宽==像素，而是检查视口宽在某一个区间段执行对应的css。假设咱们用了min去写，那么就要从小到大依次去写，先写768，再写992，再写1200.响应式网页概念:一套代码适应多端，例如下图，布局效果不一样，但是一样美观。max-width:为当视口元素小于等于768，选择器为括号内CSS属性值。格式：意思为当视口宽度为320的时候，html的选择器背景颜色为绿色。那么对于上述只是两种情况，我们对于多种情况该如何呢？接下来开始示范：要求如下图。
媒体查询的基本用法
热门推荐
六鼎
08-10 1万+
媒体获取 基本定义 1.使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 //语法 <style> @media mediatype and|not|only (media feature) { CSS-Code; } </style> mediatype：媒体类型，包含（all，print，screen，speech） 1.all–所有设备 2.print–打印机和打印预览 3.scre
媒体查询的用法？
zeqijiadelala的博客
07-28 806
1、设置meta标签 width=device-width:宽度等于当前设备的宽度 initial-scale:初始的缩放比例(默认设置为1.0) minimum-scale:允许用户缩放到最小比例(默认设置为1.0) maximum-scale:允许用户缩放到最大比例(默认设置为1.0) user-scalable:用户是否可以手动缩放(默认设置为no，因为我们不希望用户自己放
详解关于使用媒体查询@meda失效原因的总结
09-22
要解决这个问题，可以提高媒体查询内样式的优先级，例如使用更具体的选择器或使用`!important`标记。 2. 空格符问题 在编写媒体查询时，`@media`关键字后面的条件表达式必须正确地包含空格。如`screen and (max-...
Responsive-Webpage-Using-Media-Query:响应式网页程序，使用媒体查询
04-13
在创建响应式布局时，可以使用媒体查询来调整布局网格、图片大小、字体大小、导航栏样式等。例如，当屏幕宽度变小时，可能需要将原本水平排列的导航菜单改为垂直堆叠，或者隐藏某些在小屏幕上不重要的元素。 在...
postcss-custom-media:遵循CSS媒体查询规范，在CSS中使用自定义媒体查询
05-11
允许您遵循规范在CSS中使用自定义媒体查询。 @custom-media --small-viewport ( max-width : 30 em ); @media ( --small-viewport ) { /* styles for small viewport */ } /* becomes */ @media ( max-width : 30...
vue项目实战（个人博客）五------使用媒体查询实现响应式设计
ZhiJieGG的博客
08-22 1219
一些关键字 max-width最大宽度 @media screen and (max-width:900px){ /**最大媒体宽度**/ } min-width最小宽度 @media screen and (max-width:540px){ /**最小媒体宽度**/ } not在不满足条件时 @media not print and (max-width: 1200px){ /**排除媒体宽度**/ } only特定的媒体类型 @media only screen and (min-width
媒体查询使用方法
CWHcwh123456的博客
03-08 2108
媒体查询使用方法 首先：通过@来找到我们的媒体查询@media，开头注意@符号 如图所示： 如图所示:这就是媒体查询的完整形式 and :可以将多个媒体特性连接到一起，相当于“且”的意思 小括号里面写的是媒体查询的条件也可以叫特性 大括号里面写代码块。 如图所示：我给了一个条件设置最大宽度为800px时执行代码 将背景色变成天蓝色。 如图所示： 运行之后可看到： 当浏览器的宽度在800px以内时可视窗口的颜色变为了天蓝色 以上就是媒体查询的使用方法。 ...
CSS媒体查询的用法
我的博客
08-23 3101
媒体查询：根据设备显示器的特性（如视窗宽度、屏幕宽度、设备方向等）来设定不同的CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。
媒体查询如何使用
weixin_42121231的博客
06-14 634
1.背景介绍 现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随着所显示的屏幕大小而改变。实现响应式设计的核心就是媒体查询。使用@media媒体查询，可以针对不同的媒体类型定义不同的样...
媒体查询使用
2403_87566238的博客
04-28 847
媒体查询是前端开发中实现响应式设计的重要工具，通过根据设备的特性应用不同的 CSS 样式，可以使网页在各种设备上都能提供良好的用户体验。在实际写代码时，对于新手来说总是容易忽略这个东西，在自己电脑上显示的很好的网页，在别人电脑上可能布局就变得混乱，因此要注意媒体查询的使用。
前端媒体查询的用法及案例
m0_74824170的博客
12-21 967
我们将为不同的屏幕尺寸设置不同的样式，以确保网页在各种设备上都能提供良好的用户体验。媒体查询是CSS3中引入的一种功能，它允许开发者根据设备的特性（如宽度、高度、分辨率、方向等）应用不同的样式。这种方法可以确保你的网页在移动设备上具有良好的用户体验，并在更大的设备上逐渐增强。例如，在移动设备上，你可能希望隐藏复杂的导航菜单，并显示一个简化的汉堡菜单。：在不同的设备和浏览器上测试你的网页，以确保媒体查询正确地应用了样式。避免在一个媒体查询中写入过多的样式，而是将它们拆分成多个更小的、更易于理解的媒体查询。
媒体查询及使用
m0_59225791的博客
02-11 7290
媒体查询(Media Query)是CSS3新语法。媒体查询可以根据当前显示设备的特性(如： 视口宽度, 屏幕比例，设备显示方向)为其添加css样式， 使用媒体查询可以在不改变页面内容的情况下为特定的设备显示特定的样式。如果没有媒体查询就不能。媒体查询能够帮助我们更方便的判断当前设备特性（视口宽度等），更方便的针对视口设置合适的样式。总之：媒体查询可以让网页适应多个终端。
网页的响应式布局与媒体查询
dreamingbaobei的博客
06-05 941
响应式布局是为了一个页面在所有终端上（各种尺寸的PC、手机）都能显示出令人满意的效果，搭配媒体查询技术分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
媒体查询作用及使用方式
grand_brol的博客
09-02 1804
媒体查询作用 针对不同屏幕尺寸设置不同的样式 语法 @media screen and (max-width: 800px) { body { background-color: pink; } } 上面这一句话的意思是：在我们的屏幕上最大宽度是800px,如果小于800px,body就会变成pink颜色 screen 代表查询类型为电脑、平板电脑、手机等 and代表关键字，将多个媒体特性连接起来，相当于且 m
媒体查询用法总结
weixin_43750811的博客
05-05 309
准备工作 首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果： <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 这段代码的几个参数解释： width = device-width：宽度等于当...
使用媒体查询实现响应式Web设计
例如，以下代码展示了如何使用媒体查询实现这一转变： ```css /* 为桌面设备设计 */ .col-1 {width: 8.33%;} .col-2 {width: 16.66%;} .col-3 {width: 25%;} /* ...其他列的宽度定义... */ /* 当屏幕宽度小于768px...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值