@media

于 2020-11-11 23:54:28 发布
阅读量215 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109634122
版权

css2中的媒体查询

<style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <link rel="stylesheet" href="./01.css" media="tv">
    <style media="tv">
        .box {
            background-color: green;
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

css3中的媒体查询

<style>
        .box {
            width: 100px;
            height: 100px;
 
            /* css3中的媒体查询不能直接给某个属性设置，而是设置给选择器 */
            /* @media screen {
                background-color: red;
            } */
        }
 
        @media screen {
            .box {
                background-color: yellow;
            }
        }
 
        @media tv {
            .box {
                background-color: pink;
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒体查询媒介类型特征

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        /* @media (min-width: 500px) {
            .box {
                background-color: yellow;
            }
        }
 
        @media (max-width: 500px) {
            .box {
                background-color: red;
            }
        } */
        @media (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        @media (orientation: portrait) {
            .box {
                background-color: red;
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒体查询媒介逻辑

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        @media not screen and (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        /* @media tv,
        (orientation: portrait) {
            .box {
                background-color: red;
            }
        } */
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

媒体查询的嵌套

<style>
        .box {
            width: 100px;
            height: 100px;
        }
 
        /* @media screen and (orientation: landscape) {
            .box {
                background-color: rgb(112, 112, 108);
            }
        }
 
        @media screen and (orientation: portrait) {
            .box {
                background-color: red;
            }
        } */
 
        @media screen {
            @media (orientation: landscape) {
                .box {
                    background-color: rgb(112, 112, 108);
                }
            }
 
            @media (orientation: portrait) {
                .box {
                    background-color: red;
                }
            }
        }
    </style>
</head>
 
<body>
    <div class="box">
 
    </div>
</body>

less中的媒体查询

.box {
    width: 100px;
    height: 100px;
 
    @media screen and (orientation: landscape) {
        background-color: rgb(112, 112, 108);
    }
 
    @media screen and (orientation: portrait) {
        background-color: red;
    }
}
探鱼不是鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解CSS3中@media的实际使用
09-25
在CSS3中，`@media`规则是响应式网页设计的核心，它允许我们根据不同的设备特性和视口大小来定义和应用不同的样式。`@media`查询让我们能够创建适应各种屏幕尺寸、分辨率和颜色深度的多样的用户体验。 首先，我们来...
@media 讲解
IT_Top
02-23 573
一、媒体                         all 所有媒体 braille 盲文触觉设备 embossed 盲文打印机 print 手持设备 projection 打印预览 screen 彩屏设备 speech '听觉'类似的媒体类型 tty 不适用像素的设备 tv  电视 demo    #box{
媒体查询与自适应
weixin_42977865的博客
10-06 1161
媒体查询 为了实现响应式布局，相当于增加了判断条件 min-width 大于等于 max-width 小于等于 媒体类型 all 适用所有的设备 print 适用于打印用纸或打印预览视图 screen 主要适用于电脑/手机/平板等智能设备屏幕 speech 适用于语音合成器 tv 电视设备 逻辑运算符 and 把多个媒体组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真 @media tv and (min-width: 700px) and (orientati
自定义MediaController在Android TV端上的使用
weixin_33725272的博客
11-21 643
前几天在TV端项目中用到IjkPlayer，需要自定义控制条MediaController，使得电视机遥控器可以控制视频的播放、暂停、快进、回退等。首先想到的是将MediaController的源码copy过来，命名为CustomMediaController，然后进行修改(用到的地方保留，用不到的地方就删除)。PS：当然也有其他方法，比如使用PopWindow，在这里就不讲了，大家可以自己试试。...
CSS 中的@media
四维空间的门
05-24 7537
“media”就是用来指定特定的媒体类型，在HTML4和CSS2中充许你使用“media”来指定特定的媒体类型，如屏幕（screen）和打印（print）的样式表，当然还有其他的，比如说“TV”,“handheld”等，其中“all”表示的是支持所有媒体介质。有关于更多的Media类型，可以点击这里。 CSS3中的Media Queries增加了更多的媒体查询，同时你可以添加不同的媒体类型的表达...
移动端自适应样式之@media的使用方法
11-21
@media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ } 指定手机端高度样式： @media screen and (max-width: 750px) @media screen and (min-width: 720...
css使用@media响应式适配各种屏幕的方法示例
01-19
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。 当你重置浏览器大小的过程中，页面也会...
css3的@media属性实现页面响应式布局示例代码
09-25
CSS3中的@media属性是一种媒体查询功能，它允许网页开发者在不同的设备显示特性下应用不同的CSS规则。这个功能是响应式Web设计的核心技术之一，使得开发者能够创建适应多种屏幕尺寸、分辨率和方向的网页布局。 本...
详解使用CSS3的@media来编写响应式的页面
09-27
使用@media查询时，可以指定媒体类型（mediaType），包括all（所有设备）、print（打印和打印预览）、screen（电脑屏幕、平板电脑、智能手机等）、speech（屏幕阅读器等发声设备）。另外，可以指定媒体功能...
uuidgen.exe
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
vb爬虫程序爬取音乐QZQ.zip
08-29
vb爬虫程序爬取音乐QZQ.zip
Matlab查看机器人地图
08-29
基于Matlab，读取txt数据，以figure窗口图片的形式查看机器人地图，并在其中显示机器人的位置和方向
72编辑距离.zip（算法）
最新发布
08-29
72编辑距离.zip（算法）
pdf转word工具（免费试用）
08-29
pdf to word word to pdf ppt转pdf
基于微信小程序的校园二手交易平台设计与实现.docx
08-29
基于微信小程序的校园二手交易平台设计与实现.docx
酒店数据的python爬虫(thisprojecthasbeenabandoned).zip
08-29
酒店数据的python爬虫(thisprojecthasbeenabandoned)
高校校园大脑建设方案（高层版）PPT(47页).pptx
08-29
智慧校园建设方案旨在通过融合先进技术，如物联网、大数据、人工智能等，实现校园的智能化管理与服务。政策的推动和技术的成熟为智慧校园的发展提供了基础。该方案强调了数据的重要性，提出通过数据的整合、开放和共享，构建产学研资用联动的服务体系，以促进校园的精细化治理。 智慧校园的核心建设任务包括数据标准体系和应用标准体系的建设，以及信息化安全与等级保护的实施。方案提出了一站式服务大厅和移动校园的概念，通过整合校内外资源，实现资源共享平台和产教融合就业平台的建设。此外，校园大脑的构建是实现智慧校园的关键，它涉及到数据中心化、数据资产化和数据业务化，以数据驱动业务自动化和智能化。 技术应用方面，方案提出了物联网平台、5G网络、人工智能平台等新技术的融合应用，以打造多场景融合的智慧校园大脑。这包括智慧教室、智慧实验室、智慧图书馆、智慧党建等多领域的智能化应用，旨在提升教学、科研、管理和服务的效率和质量。 在实施层面，智慧校园建设需要统筹规划和分步实施，确保项目的可行性和有效性。方案提出了主题梳理、场景梳理和数据梳理的方法，以及现有技术支持和项目分级的考虑，以指导智慧校园的建设。 最后，智慧校园建设的成功依赖于开放、协同和融合的组织建设。通过战略咨询、分步实施、生态建设和短板补充，可以构建符合学校特色的生态链，实现智慧校园的长远发展。
makepri.exe
08-29
Windows 8 SDK 此 SDK 于 2012 年 11 月发布，可用于创建适用于 Windows 8 或更早版本的 Windows 应用 () 使用 Web 技术、本机和托管代码;或使用本机或托管编程模型的桌面应用。
@media 怎么使用
01-26
@media 是CSS中的一个关键字，用于根据不同的媒体类型和查询条件来应用不同的样式。它可以用于在不同的设备上显示不同的样式，例如屏幕、打印机、手机等。 @media 的基本语法如下： ```css @media mediatype and ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值