媒体查询笔记、 @media

语法：

@media not|only mediatype and (expressions) {CSS 代码;
}

not: not是用来排除掉某些特定的设备的，比如 @media not print（非打印设备）。
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说，如果存在only关键字，移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。
all: 所有设备，这个应该经常看到。

语法：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

screen：这个不用说大家都知道，指的是一种媒体类型；
and：被称为关键词；
（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。

最小宽度：

@media screen and (min-width: 480px) {body {background-color: lightgreen;}
}

安卓设备：

/* 240px的宽度 */
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />
/* 360px的宽度 */
<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />
/* 480px的宽度 */
<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

not 关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
only 用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

感谢作者：https://www.cnblogs.com/moqiutao/p/4753839.html

媒体查询笔记、 @media相关推荐

CSS：媒体查询 CSS3 Media Queries
定义和使用使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的. ...
html调用媒体图标,关于CSS 媒体查询（media queries）
传统的CSS只支持数量有限的设备显示规则,如:all.screen.print.handheld.television和projector.这些对于设备的尺寸.方向或分辨率没有任何的定论.CSS2.1 ...
媒体查询（Media Query）
媒体查询(Media Query)是CSS3新语法. 使用 @media查询,可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式媒体查询语法规范用 @medi ...
边框样式（border-style）、边框圆角（border-radius）以及媒体查询（@media）
边框样式(border-style): border-style属性可以控制边框的视觉样式,包含8种可用边框样式. 使用方法: p {border-style: groove; } 8种样式: sol ...
媒体查询（-@media）的用法详解
媒体查询(-@media)的用法详解媒体查询可以用来干什么? @media的作用:媒体查询可以在指定的设备上使用对应的样式替代原有的样式. 可以简单理解为:告诉浏览器,当满足某条件时,调用某样式.当 ...
媒体查询漫谈——@media Queries
通过不同的媒体类型和条件定义样式表规则.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件.媒体查询的大部分媒体特性都接受min和max用于表达"大于或等于"和&q ...
CSS3 媒体查询（media）与 Viewport
@media 使用 @media 查询,你可以针对不同的媒体类型定义不同的样式. 一.语法 1.样式表中的CSS媒体查询 @media mediatype and|not|only (media fe ...
css 媒体查询问题 @media
// 小于等于 1366px 宽度的屏幕全都适应 @media only screen and (max-width: 1366px) {.div{ height: 14rem !important; ...
vue手机适配媒体查询用法@media
注意: 每个像素阶段都已经上下连接成了,1200px~767px,最高到最低,每个阶段样式字体大小,布局等都可以写在里面,可以按f12,查看各个手机端样式变化~ 在index.html页面引入css文 ...

媒体查询笔记、 @media

媒体查询笔记、 @media相关推荐

最新文章

热门文章