解析媒体查询@media的使用（附代码演示）-css教程-PHP中文网

首页

web前端

css教程

解析媒体查询@media的使用（附代码演示）

藏色散人

Aug 07, 2022 pm 04:48 PM

媒体查询

什么是媒体查询

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

1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询语法

    @media screen and (max-width:600px) {
        }

3、代码演示1qqq

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .row{
            border: 1px solid red;
        }
        .col{
            display: inline-block;
            width: 100%;
            height: 100px;
            background-color: green;
        }
        /* <768px */
        @media screen and (max-width:768px) { 
            .col{
                width: 100%;
            }
        }
        /* >=992 and  */
        @media screen and (min-width:992px){
            .col{
                width: 49%;
            }
        }
        /* >=768px and <1200px */
        @media screen and (min-width:768px) and (max-width:1200px){
            .col{
                width: 48%;
            }
        }
        /* >=1200px */
        @media screen and (min-width: 1200px) {
            .col{
                width: 33%;
            }
        }
    </style>
</head>
<body>
    <div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

缩小到768px后的效果图

推荐学习：《web前端》

以上是解析媒体查询@media的使用（附代码演示）的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：csdn。如有侵权，请联系admin@php.cn删除

css媒体查询失效怎么办Jan 28, 2023 pm 03:29 PM

css媒体查询失效的解决办法：1、修改语法如“@media screen and (max-width:768px){...}”；2、在html头文件添加必要的meta标签；3、将媒体查询语句放在原css文档后面即可。

使用 CSS Viewport 单位 vh 和 vmin 创建媒体查询的技巧Sep 13, 2023 am 11:18 AM

使用CSSViewport单位vh和vmin创建媒体查询的技巧随着移动设备的普及，响应式设计已成为现代网页设计的必备技术。为了适应不同大小的屏幕，开发人员需要通过媒体查询来调整布局和样式。而在媒体查询中，最常用的单位是像素（px）。然而，CSS3引入了一种新的视窗单位，即vh和vmin，它们能够更好地适应不同设备尺寸。本文将介绍如何使用vh和v

CSS 响应式布局属性指南：media queries 和 min-width/max-widthOct 20, 2023 pm 02:19 PM

CSS响应式布局属性指南：mediaqueries和min-width/max-width随着移动设备的普及，越来越多的用户通过手机和平板电脑来访问网站。这就要求网站能够适应不同屏幕尺寸和设备类型，以提供更好的用户体验。CSS响应式布局是一种解决方案，能够让网页内容在不同设备上自动适应布局和样式。在实现CSS响应式布局时，我们经常使用两个重要的

选择适合实现响应式布局的单位有哪些？Jan 27, 2024 am 09:39 AM

选择什么单位来实现响应式布局？随着移动设备和平板电脑的普及，越来越多的人使用各种设备来浏览网页。为了确保网页在不同设备上具有良好的可读性和用户体验，响应式布局逐渐成为了设计和开发中的重要考虑因素。而在实现响应式布局时，选择合适的单位非常重要。本文将分析几种常见的单位，以帮助读者选择合适的单位来实现响应式布局。像素（px）：像素是最常见的长度单位，表示屏幕上一

CSS 媒体查询属性探索：@media 和 min-device-width/max-device-widthOct 20, 2023 pm 07:18 PM

CSS媒体查询属性探索：@media和min-device-width/max-device-width，需要具体代码示例引言:随着移动设备的普及，网站的响应式设计变得越来越重要。而在实现响应式设计时，CSS媒体查询属性起着至关重要的作用。本文将深入探索@media和min-device-width/max-device-width两个媒体查询属性，并

CSS媒体查询完全指南（Media Quires）Sep 29, 2022 pm 08:41 PM

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

解析媒体查询@media的使用（附代码演示）Aug 07, 2022 pm 04:48 PM

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。

CSS 宽度属性优化技巧：max-width 和 min-widthOct 24, 2023 am 11:36 AM

CSS宽度属性优化技巧：max-width和min-width在网页设计和开发中，设置元素的宽度是一个常见的任务。为了让网页在不同尺寸的屏幕上呈现良好的效果，我们经常使用max-width和min-width属性来控制元素的宽度。本文将介绍如何使用这两个属性来优化网页的设计，同时给出一些具体的代码示例。使用max-width控制元素的最大宽

See all articles