media query学习笔记

原文转自：http://blog.csdn.net/renfufei/article/details/19981133

　　　　　http://www.cnblogs.com/softlover/archive/2012/11/25/2787429.html

　　　　 http://www.blueidea.com/tech/web/2010/7912_3.asp

http://www.moke8.com/article-5657-1.html

一、基本定义

1、CSS中的Media Query（媒介查询）是什么？

通过不同的媒体类型和条件定义样式表规则。媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。

2、media query能够获取哪些值？

设备的宽和高device-width，device-heigth显示屏幕/触觉设备。

渲染窗口的宽和高width，heigth显示屏幕/触觉设备。

设备的手持方向，横向还是竖向orientation（portrait|lanscape）和打印机等。

画面比例aspect-ratio点阵打印机等。

设备比例device-aspect-ratio-点阵打印机等。

对象颜色或颜色列表color，color-index显示屏幕。

设备的分辨率resolution。

3、语法结构及用法

@media 设备名 only （选取条件） not （选取条件） and（设备选取条件），设备二{sRules}

二、使用示例

1.写入一个css内，css内用media query区分

/*兼容IE8,满足条件时后面覆盖前面*/
.section{width:20%;height: 60px;background-color: yellow;float:left;border:1px solid white;color:white;}
/*宽度在200到600之间*/
@media screen and (min-width: 200px) and (max-width: 600px){.section{width:20%;height: 60px;background-color: red;float:left;border:1px solid white;color:white;}
}/*宽度大于600px*/
@media screen and (min-width: 600px) {.section{width:45%;height: 90px;color:white;background-color: blue;float: left;border:1px solid white;}
}

2.引入css时，指定media属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="mediaQueryIE8.css"><link rel="stylesheet" media="screen and (min-width: 100px) and (max-width:600px)" type="text/css" href="mediaQuery2.css"><link rel="stylesheet" media="screen and (min-width: 600px) "type="text/css" href="mediaQuery3.css"><!--width为600px时，mediaQuery3.css生效，后面覆盖前面-->
</head>
<body><div class="section">111111</div><div class="section">222222</div><div class="section">333333</div><div class="section">444444</div><div class="section">555555</div><div class="section">666666</div><div class="section">777777</div><div class="section">888888</div><div class="section">999999</div>
</body>
</html>

转载于:https://www.cnblogs.com/grape1211/p/4265389.html

media query学习笔记相关推荐

VGGNet学习笔记及仿真
VGGNet学习笔记及仿真文章目录 VGGNet学习笔记及仿真引言 VGGNet论文笔记 VGGNet架构参数详解创新点训练细节结果代码实现 Visualize a few images ...
Mining Precision Interface From Query Logs -- 学习笔记（一）
Mining Precision Interface From Query Logs>是SIGMOD2019所接收到的papers当中的一篇. 花了大概4天时间阅读,全英文的paper读起来还是 ...
Kusto Query Language (KQL) 学习笔记
Kusto Query Language (KQL) 学习笔记 Kusto 是一种nosql,其有自身的查询语言规则,简称KQL. 学习笔记持续更新中,点击每个节点的小加号,展开小节内容 KQL学习笔 ...
js/jquery学习笔记
javascript简介 JavaScript是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言. 不同于服务器端脚本语言,例如PHP与ASP,JavaScript是客户端脚本语言,也就是说Ja ...
Puppeteer 学习笔记及基本用法
Puppeteer 学习笔记及基本用法 Puppeteer 安装语法基本语法 API 分层结构加载导航页面等待元素.请求.响应自定义等待元素定位用户模拟操作请求拦截获取 WebSoc ...
《高性能PHP》学习笔记
本文主要是阅读<高性能PHP>之后做的学习笔记,以便查阅. 简介 <高性能PHP 7>从PHP所需环境讲起,涉及环境搭建与配置设置等内容,能够帮助有一定计算机基础的读者实现PH ...
【JavaScript】相关知识学习笔记
JavaScript笔记定义: JavaScript是一种基于对象和事件驱动的,并具有安全性能的脚本语言. 特点: 01.向HTML页面中添加交互行为 02.脚本语言,语法跟java类似 ...
移动web——学习笔记整理
目录 Day1 00.流式布局 00.1目标 00.2目录 01.移动端浏览器 02.视口(layout viewport) 03.meta视口标签(单标签) 04.物理像素&物理像素比 05 ...
DBA高效入职指南学习笔记
(本文为本人自学oracle,读完DBA高效入职指南一书所记录的学习笔记,仅作为自己日后参考查询使用.) ----------------------------------------------- ...
JavaWeb黑马旅游网-学习笔记10【项目代码】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb黑马旅游网-学习笔记01[准备工作] JavaWeb黑马旅游网-学习笔记02[注册功能] JavaWeb黑马旅游网-学习笔记03[登陆和 ...

media query学习笔记

media query学习笔记相关推荐

最新文章

热门文章