media query媒体查询
媒体查询（CSS3 media query）
一.逻辑操作符：not、and、only
- not：not操作符用来对一条媒体查询的结果取反。
- and：and操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中。只有当美每个属性都为真时，媒体查询结果为真
- only：only操作符 表示：仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式的浏览器中不被应用
二：媒体属性
- color ：是否min/max前缀：是
- 颜色索引：color-index 。是否min/max前缀：是
- 宽高比：aspect-ratio。是否min/max前缀：是。描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例
- 设备宽高比：device-aspect-ratio：是否min/max前缀：是。描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数（第一个值）与垂直像素数（第二个值）的比例
- 设备高度比：device-height：是否min/max前缀：是。描述了输出设备的高度（整个屏幕或页的高度，而不是仅仅像文档窗口一样的渲染区域）
- 设备宽度比：device-width：是否min/max前缀：是。描述了输出设备的宽度（整个屏幕或页的宽度，而不是仅仅像文档窗口一样的渲染区域）
- 网格：grid：是否min/max前缀：否。 判断输出设备是网格设备还是位图设备。如果设备是基于网格的，该值为1，否则为0。
- 高度：height。是否min/max前缀：是。height媒体属性描述了设备渲染区域的高度
- 黑白：monochrome。是否min/max前缀：是。指定了一个黑白（灰度）设备每个像素的比特数。如果不是黑白设备，值为0.
- 方向：orientation。是否min/max前缀：否。 指定了设备处于横屏（宽度大于高度）模式还是竖屏（高度大于宽度）模式
- 分辨率：resolution。是否min/max前缀：是。 指定输出设备的分辨率（像素密度）。分辨率可以用每英寸（dpi）或厘米（dpcm）的点数来表示
- 扫描：scan。是否min/max前缀：否。 描述了电视输出设备的扫描过程
- 宽度：width。是否min/max前缀：是。描述了输出设备的渲染区域的宽度。
三、例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>media query</title>
<style>
*{
margin: 0;
padding: 0;
}
.leftColumn{
width: 50%;
float: left;
background-color: red;
height: 300px;
}
.rightColumn{
width: 50%;
float: left;
background-color: yellow;
height: 300px;
}
@media screen and (max-width:400px) and (orientation: landscape){
.leftColumn {
background-color:orange;
}
}
@media screen and (max-width: 300px) and (orientation: landscape){
.leftColumn {
background-color:OrangeRed;
}
}
</style>
</head>
<body>
<div class="leftColumn">left</div>
<div class="rightColumn">right</div>
</body>
</html>
media query媒体查询的更多相关文章
- media query(媒体查询)和media type(媒体类型)
media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...
- CSS3 之 Media（媒体查询器）
1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...
- media queries 媒体查询使用
media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...
- Media Queries 媒体查询常见设备断点
按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...
- css3之Media Queries 媒体查询
一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...
- CSS media queries 媒体查询
最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...
- Media Queries 媒体查询
1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...
- Html5 @media + css3 媒体查询
css3 media媒体查询器用法总结 随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...
- Media Queries媒体查询
Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...
随机推荐
- 利用CSS生成精美细线Table表格
精美的表格是前端开发用到的一个组件,很多时候我们利用复杂的页面style代码,来生成这样的表格,造成了页面的修改性和可读性都非常差.这里推荐直接使用css来产生一个细线表格. 使用方法也很简单: 第一 ...
- C++ 匿名对象初始化新对象
//c++中匿名对象初始化新对象 #include<iostream> using namespace std; class Point{ public: Point(){ cout &l ...
- 嵌入式开发之davinci--- 8148/8168/8127 中的二维图像处理内存tiler 铺瓷砖
http://blog.csdn.net/shanghaiqianlun/article/details/7619603
- 断言（assert）和程序的安全保证
断言,用来DEBUG错误的,在DEBUG时发现然后跟踪错误! 通常 写一个程序给别人使用的,这个代码在安全性上的要求是什么呢?直觉上,我们都知道程序不应该崩.但是通常C/C++的程序如果把包含API的 ...
- gcc参数PIE和PIC的区别和共同点
gcc参数的PIE和PIC 区别 PIE:用在可执行文件 PIC:用在库文件 共同点 生成跟位置没有关系的symbol
- ERROR getting 'android:label' attribute: attribute is not a string value
这个的原因很多地方都有描述,原因多半是多国语言string.xml 有的有这个值, 有的没有. 关键是怎么定位? 实际上他报错的是当前处理的xml element有问题, 而出错的时候盖住了要处理的. ...
- cocos2d怎么设置屏幕朝向？横屏 or 竖屏设置
在cocos引擎里面找了好久.没找到相关接口,网上也搜索了好久,最后发现.原来须要依据各个平台分别进行设置. android 改动项目根文件夹 proj.android\AndroidManifest ...
- MathType与Office公式编辑器有什么不同
说到在论文中编辑公式,有经验的人都会知道要用公式编辑器来编辑,没经验的人也会被安利使用公式编辑器.然而在使用公式编辑器时,又有了两种选择,一种是使用Office自带的公式编辑器,一种是MathType ...
- python3----scrapy(笔记)
import scrapy import sys # import io # sys.stdout = io.TextIOWrapper(sys.stdout.buffer, encoding='gb ...
- Ehcache缓存框架具体解释
一.前言 ehcache是一个比較成熟的java缓存框架.它提供了用内存,磁盘文件存储.以及分布式存储方式等多种灵活的cache管理方案.ehcache最早从hibernate发展而来. 因为3.x的 ...