首页 前端知识 09_CSS3多媒体查询

09_CSS3多媒体查询

2024-04-13 09:04:57 前端知识 前端哥 654 603 我要收藏

1 多媒体查询

1.1 媒体查询

媒体查询能在不同的条件下使用不同的样式,使页⾯在不同在终端设备下达到不同的渲染效果。

CSS 的 Media Query 媒体查询(也称为媒介查询)用来根据窗口宽度、屏幕比例和设备方向等差异来改变页面的显示方式。

使用媒体查询能够在不改变页面内容的情况下,为特定的输出设备制定显示效果。媒体查询由媒体类型和条件表达式组成。

常用的媒体查询属性如下:

  • 设备宽高: device-width、device-height

  • 渲染窗口的宽和高:width、height

  • 设备的手持方向:orientation

  • 设备的分辨率:resolution

1.2 媒体设备

描述
all用于所有多媒体类型设备
print用于打印机
screen用于电脑屏幕,平板,智能手机等。
speech用于屏幕阅读器

比如:在屏幕显示与打印设备上不同的 CSS 效果

  • media 媒体
  • screen 屏幕
  • min-width 最小值,视口大于或者等于该值加载这个 css
  • max-width 最大值,视口小于或者等于该值加载这个 css
<style media="screen">
    h1 {
        font-size: 32px;
        color: #ff0000;
    }
</style>
<style media="print">
    h1 {
        font-size: 32px;
        color: #00ff00;
    }
</style>
<h1>www.yunhe.cn</h1>
<hr>
<h2>云和数据</h2>

多设备支持:可以用逗号分隔同时支持多个媒体设备

@import url(screen.css) screen,print;
<link href="screen.css" media="screen,print">
@media screen,print {...}

1.3 实现方式

1.3.1 外联式

外联式是作为单独的 CSS 文件从外部引入的 ,在 link 标签中通过 media 属性可以设置样式使用的媒体设备。

  • common.css 没有指定媒体所以全局应用
  • screen.css 应用在屏幕设备
  • print.css 应用在打印设备
<!-- 视口大于或者等于 1200px 加载 01.css-->
<link rel="stylesheet" type="text/css" href="css/01.css" media="screen and (min-width:1200px)">
<!-- 视口小于 1200px 加载 02.css -->
<link rel="stylesheet" type="text/css" href="css/02.css" media="screen and (max-width:1199px)">

注意:

  • IE8 不兼容 media
  • 简化代码,相同样式写在一起
  • 利用层叠性,写在后面
1.3.2 导入式

使用 @import 可以引入指定设备的样式规则。文件中引入一个样式文件,在这个文件中再引入其他媒体的样式文件。

<link rel="stylesheet" href="style.css">

style.css

@import url(screen.css) screen;
@import url(print.css) print;
1.3.3 内联式(常用方式)

内联式是直接在 CSS 中使用。

<style>
	/* 宽度大于等于 1200px */
	@media screen and (min-width: 1200px) {
		p {
			float: left;
			width: 50%;
			height: 200px;
			background-color: #ff0000;
		}
	}

	/* 宽度小于等于 1199px */
	@media screen and (max-width: 1199px) {
		p {
			float: left;
			width: 50%;
			height: 200px;
			background-color: #00ff00;
		}
	}

	/* 宽度大于等于 640px 小于等于 1000px */
	@media screen and (min-width: 640px) and (max-width: 1000px) {
		p {
			float: left;
			width: 50%;
			height: 200px;
			background-color: #0000ff;
		}
	}
</style>
<p></p>

1.4 设备方向

使用 orientation 属性可以定义设备的方向

描述
portrait竖屏设备即高度大于宽度
landscape横屏设备即高度小于宽度
<style media="screen and (min-width: 768px),screen and (orientation:landscape)">
    body {
        background: #ff0000;
    }
</style>

1.5 查询条件

可以使用不同条件限制使用的样式,条件表达式需要放在括号中。

1.5.1 逻辑与

需要满足多个条件时才使用样式,多个条件使用 and 连接。表示满足全部条件才能生效。

<style>
    /* 横屏显示且屏幕宽度不超过 600px */
    @media screen and (orientation: landscape) and (max-width : 600px) {
        body {
            background: #8e44ad;
        }
    }
</style>
1.5.2 逻辑或

多个 或 条件查询使用逗号连接,不像其他程序中使用 or 语法。

表示只要满足其中一个条件就能生效。

<style>
    /* 横屏显示 或者 屏幕宽度不超过 600px */
    @media screen and (orientation: landscape),screen and (max-width : 600px) {
        body {
            background: #8e44ad;
        }
    }
</style>
1.5.3 不应用

not 表示不应用样式,即所有条件都满足时不应用样式。

注意:必须将 not 写在查询的最前面

<style>
    /* 横屏显示且屏幕宽度不超过 600px 时不应用当前样式 */
    @media not screen and (orientation: portrait) and (max-width:600px) {
        body {
            background: #8e44ad;
        }
    }
</style>
1.5.4 仅当前应用

only 指定某种特定的媒体类型,可以用来排除不支持媒体查询的浏览器。

<style>
    /* 仅电脑屏幕,平板,智能手机以及横屏显示且屏幕宽度不超过 600px 时应用当前样式 */
    @media only screen and (orientation: portrait) and (max-width:600px) {
        body {
            background: #8e44ad;
        }
    }
</style>

1.6 查询特性

根据查询特性筛选出使用样式的设备。

1.8.1 常用特性
特性说明
orientation: landscape | portraitlandscape 横屏,portrait 竖屏
width设备宽度
height设备高度
min-width最小宽度(>=)
max-width最大宽度(<=)
min-height最小高度(>=)
max-height最大高度(<=)
1.6.2 使用示例

在设备宽度为 568px 时使用样式

@media only screen and (width:568px) {
  ... 
}

在设备不小于 569px 时使用样式

@media only screen and (min-width:569px) {
  ... 
}

橫屏设备并且宽度大于 569px 时使用样式

@media only screen and (orientation: landscape) and (min-width:569px) {
  ... 
}

1.7 练习作业

使用多媒体查询制作响应式页面。

  • 当页面窗口宽度小于 480px 时,背景颜色为绿色
  • 当页面窗口宽度小于 960px 大于480px 时,背景颜色为蓝色
  • 当页面窗口宽度大于 960px 时,背景颜色为红色
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4821.html
标签
tensorflow
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!