简单使用媒体查询@media
@media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。
那媒体查询该如何使用呢?
一、铺垫
1.首先我们在使用 @media 的时候需要先设置下面这段代码,来兼容移动设备的展示效果:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,不放大缩小页面)
2:加载兼容文件JS
width = device-width:宽度等于当前设备的宽度
initial-scale:初始的缩放比例(默认设置为1.0,即代表不缩放)
user-scalable:用户是否可以手动缩放(默认设置为no,不放大缩小页面)
因为IE8既不支持HTML5也不支持CSS3 @media ,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
if 判断,假如是ie9,则加载这两个兼容IE9的JS文件,不是的话就注释这两段js文件
3:设置IE渲染方式默认为谷歌(可选)
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。
二、css3语法
1.内部样式语法
@media mediatype and/not/only (media feature) { CSS-Code }
如何理解@media的语法规则:
使用媒体查询必须是以 @media 开头;
然后指定设备类型(媒体类型mediatype);
接着是括号()里的规定媒体/设备特征(media feature),媒体特征的书写格式与css样式类似,都是属性名:属性值(例如min-width:200px);
最后跟着的大括号{ css-code },里面放置的是要设置的css样式。
逻辑运算符:
not:用来排除某种设备。比如,排除打印设备 @media not print;
only:用以指定某特定媒体设备。对于支持 Media Queries 的移动设备来说,如果存在 only 关键字,移动设备的 Web 浏览器会忽略 only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries 的设备但能够读取 Media Type 类型的 Web浏览器,遇到 only 关键字时会忽略这个样式文件。
all:适用于所有的设备类型;
and:媒体查询中使用来连接多种媒体特性,一个媒体查询中可以包含0或多个表达式,表达式可以是0或多个关键字,以及一种媒体类型。
如:
@media
(
min
-width: 600px) and (
max
-width: 700px) {
/** 窗口宽度在600-700像素的样式 **/
}
@media (not
max-width
:
600px
) and (
max-width
:
700px
) {
/** 窗口宽度在600-700像素的样式 **/
}
2.link标签引用样式
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">
定义媒体查询的部分放在<link>标签内,用media属性标注,media=" 媒体类型 and/not/only(媒体特性)"
3.媒体类型(mediaType )
类型有很多,在这里不一一列出来了,只列出了常用的几个。
值 | 描述 |
---|---|
all | 用于所有设备 |
用于打印机和打印预览 | |
screen | 用于电脑屏幕,平板电脑,智能手机等。(最常用) |
speech | 应用于屏幕阅读器等发声设备 |
4.媒体查询中最常用的媒体特性(media feature)
特性名 | 值 | 应用场景 |
width min-width max-width |
显示区域的宽度(对打印机而言是打印表面) | 改变布局以适应非常窄(如手机)或非常宽的显示器。 |
height min-height max-height |
显示区域的高度 | 改变布局以适应非常长或非常短的显示器 |
device-width min-device-width max-device-width |
当前计算机或设备屏幕的宽度 (或打印输出时纸面的宽度) |
根据不同设备(如手机)调整布局 |
device-height min-device-height max-device-height |
屏幕或纸面的高度 | 根据不同设备(如手机)调整布局 |
orientation | landscape(横向)或portrait(纵向) | 根据设备的朝向调整布局 |
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio |
显示区域的宽高比(1/1是正方形) | 根据窗口形状调整样式(问题可能比较复杂) |
color min-color max-color |
屏幕颜色的位深 (1位表示黑白,目前主流显示器都是24位) |
检查是否支持彩色输出(比如是不是黑白打印), 或者支持的颜色数量 |
max-width | 定义输出设备中的页面最大可见区域宽度 |
min-width | 定义输出设备中的页面最小可见区域宽度 |
!注意:为元素设置css样式的属性,假如与媒体查询中设置的媒体样式是相同的属性时。那么需要注意 ,元素的css样式要写在媒体查询上面,否则css样式会覆盖媒体样式,使其失效。
本文来自博客园,作者:三线码工,转载请注明原文链接:https://www.cnblogs.com/shangrao/p/12693558.html