【移动开发】媒体查询

最新推荐文章于 2024-09-15 21:53:51 发布

richest_qi

最新推荐文章于 2024-09-15 21:53:51 发布

阅读量205

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qzw752890913/article/details/108057243

版权

css 专栏收录该内容

69 篇文章 4 订阅

订阅专栏

<body>
    <div class="box">缘分一道桥</div>
</body>

div{
    width:200px;
    line-height: 32px;
    text-align: center;
}
.box{
    background-color:lightskyblue;
}
@media screen and (max-width:640px) {
    .box{
        background-color:lightseagreen;
    }
}

默认情况下，应用样式background-color:lightskyblue，即背景色是天蓝色；
当屏幕的视口宽度小于或等于640px时，应用样式backgroud-color:lightseagreen，即背景色是海水绿。
在这里插入图片描述

使用媒体查询@media，在不同的设备上应用不同的样式。

定义媒体查询

有两种方式，

第一种，定义在css中

@media 媒体类型 and|not|only (媒体属性){
	样式
}

第二种，定义在<link>标签上

<link rel="stylesheet" media="媒体类型 and|not|only (媒体属性)" href="xxx.css"/>

媒体类型

有四种类型，

all
样式在所有设备上生效
screen
样式仅在电脑、平板、手机等屏幕设备上生效
speech
样式仅在屏幕阅读器等发声设备上生效
print
样式仅在打印机上或打印预览时生效

逻辑操作符

not
and
only
,

媒体属性

max-width
媒体类型的视口宽度小于或等于max-width指定的值时，样式生效
min-width
媒体类型的视口宽度大于或等于min-width指定的值时，样式生效

richest_qi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录