媒体查询@media查询

什么是媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有 width 、 height 和 color （等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

1、媒体查询操作方式

实际操作为：对设备提出询问（称作表达式）开始，如果表达式结果为真，媒体查询中的CSS被应用，如果表达式结果为假，媒体查询内的CSS将被忽略。

2、媒体查询语法

@media screen and (max-width:600px) {

}

3、代码演示1qqq

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.row{border: 1px solid red;}.col{display: inline-block;width: 100%;height: 100px;background-color: green;}/* <768px */@media screen and (max-width:768px) { .col{width: 100%;}}/* >=992 and  */@media screen and (min-width:992px){.col{width: 49%;}}/* >=768px and <1200px */@media screen and (min-width:768px) and (max-width:1200px){.col{width: 48%;}}/* >=1200px */@media screen and (min-width: 1200px) {.col{width: 33%;}}</style>
</head>
<body><div class="row"><div class="col"></div><div class="col"></div><div class="col"></div></div>
</body>
</html>

缩小到768px后的效果图

媒体查询@media查询相关推荐

html读取媒体长度,用媒体查询media根据屏幕分辨率大小确定网页宽度
显示网页的终端屏幕分辨率大小不一,为了能使同一网页能在不同的终端中合适显示,CSS3 推出了媒体查询media.用媒体查询media能根据屏幕分辨率大小确定网页宽度,这主要在 CSS 文件中根据屏幕分 ...
html5移动端开发(rem和媒体查询@media)
css下:index.css @charset "utf-8"; body,ol,ul,li,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fields ...
媒体查询Media Queries详解
@media 标签可以说是响应式网页的开发基础.其主要由媒体类型(Media Type)和媒体特性(Media Query)两部分组成. Media Type 设定后面规则生效的展示类型,包括all ...
媒体查询@media query
@media query 媒体查询 @media (min-width:768px)小屏 (>=) @media (min-width:992px)中屏 @media (min-width:12 ...
移动开发—媒体查询(Media Query)
移动开发-媒体查询(Media Query) 1.使用@media,可以针对不同的媒体类型定义不同的样式 2.@media可以针对不同的屏幕尺寸设置不同的样式 3.当你重置浏览器大小的过程中,页面也会 ...
css3的媒体查询(Media Queries)
css3的媒体查询(Media Queries) 我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法. 先看一个简单的例子: <link rel="stylesh ...
CSS3的媒体查询@media
CSS3的媒体查询@media 通过@media可以针对不同屏幕大小定义不同样式的网页,页面会根据浏览器长宽来渲染页面. 语法: @media mediaType and|not|only (medi ...
媒体查询(media)
目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device Wi ...
CSS3的媒体查询(Media Queries)与移动设备显示尺寸大全
文章目录媒体查询介绍 Media Queries具体使用一.最大宽度Max Width 二.最小宽度Min Width 三.多个Media Queries使用四.设备屏幕的输出宽度Device ...