媒体查询(CSS3 media query)

一.逻辑操作符:not、and、only

  • not:not操作符用来对一条媒体查询的结果取反。
  • and:and操作符用来把多个媒体属性组合起来,合并到同一条媒体查询中。只有当美每个属性都为真时,媒体查询结果为真
  • only:only操作符 表示:仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式的浏览器中不被应用      

二:媒体属性

  1. color :是否min/max前缀:是
  2. 颜色索引:color-index 。是否min/max前缀:是
  3. 宽高比:aspect-ratio。是否min/max前缀:是。描述了输出设备目标显示区域的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例
  4. 设备宽高比:device-aspect-ratio:是否min/max前缀:是。描述了输出设备的宽高比。该值包含两个以“/”分隔的正整数。代表了水平像素数(第一个值)与垂直像素数(第二个值)的比例
  5. 设备高度比:device-height:是否min/max前缀:是。描述了输出设备的高度(整个屏幕或页的高度,而不是仅仅像文档窗口一样的渲染区域)
  6. 设备宽度比:device-width:是否min/max前缀:是。描述了输出设备的宽度(整个屏幕或页的宽度,而不是仅仅像文档窗口一样的渲染区域)
  7. 网格:grid:是否min/max前缀:否。 判断输出设备是网格设备还是位图设备。如果设备是基于网格的,该值为1,否则为0。
  8. 高度:height。是否min/max前缀:是。height媒体属性描述了设备渲染区域的高度
  9. 黑白:monochrome。是否min/max前缀:是。指定了一个黑白(灰度)设备每个像素的比特数。如果不是黑白设备,值为0.
  10. 方向:orientation。是否min/max前缀:否。 指定了设备处于横屏(宽度大于高度)模式还是竖屏(高度大于宽度)模式
  11. 分辨率:resolution。是否min/max前缀:是。 指定输出设备的分辨率(像素密度)。分辨率可以用每英寸(dpi)或厘米(dpcm)的点数来表示
  12. 扫描:scan。是否min/max前缀:否。 描述了电视输出设备的扫描过程
  13. 宽度: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媒体查询的更多相关文章

  1. media query(媒体查询)和media type(媒体类型)

    media type(媒体类型)是css 2中的一个非常有用的属性,通过media type我们可以对不同的设备指定特定的样式,从而实现更丰富的界面.media query(媒体查询)是对media ...

  2. CSS3 之 Media(媒体查询器)

    1.响应式Media(媒体查询器) (1)<link rel=“stylesheet” media=“screen and (max-width: 600px)” href=“small.css ...

  3. media queries 媒体查询使用

    media queries 翻译过来就是媒体查询,media 指的媒体类型.那么有哪些类型呢,常用的有 screen(屏幕).打印(print),个人理解就是它所在的不同终端. 常用的用法:1,< ...

  4. Media Queries 媒体查询常见设备断点

    按需调整断点 一.谷歌后摘抄的一部分媒体查询 /*#region SmartPhones */ /* SmartPhones */@media only screen and (min-device- ...

  5. css3之Media Queries 媒体查询

    一.初步了解 Media Queries是CSS3新增加的一个模块功能,其最大的特点就是通过css3来查询媒体,然后调用对应的样式. 了解Media Queries之前需要了解媒体类型以及媒体特性: ...

  6. CSS media queries 媒体查询

    最近在做一些页面打印时的特殊处理接触到了media queries,想系统学习一下,在MOZILLA DEVELOPER NETWORK看到一篇文章讲的很不错,结合自己的使用总结一下. CSS2/me ...

  7. Media Queries 媒体查询

    1.什么是媒体查询 媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向)为其设定CSS样式,媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成.媒体查询中可用于 ...

  8. Html5 @media + css3 媒体查询

    css3 media媒体查询器用法总结   随着响应式设计模型的诞生,Web网站又要发生翻天腹地的改革浪潮,可能有些人会觉得在国内IE6用户居高不下的情况下,这些新的技术还不会广泛的蔓延下去,那你就错 ...

  9. Media Queries媒体查询

    Media Queries能在不同的条件下使用不同的样式,使页面在不同在终端设备下达到不同的页面效果.Media Queries有其自己的使用规则.一个媒体查询由一个可选的媒体类型和媒体特性表达式,使 ...

随机推荐

  1. sql常用语句(1)

    --排序 select Row_Number() over(order by a.UserName) as Num --区分性别 then '男' else '女' end SexName Sqlse ...

  2. Unity Ragdoll(布娃娃系统)

    逼真的动作如何实现的? 在一些游戏中当NPC或玩家死亡的时候,死亡的肢体动作十分逼真,这一物理现象如何用Unity来实现呢?Unity物理引擎中的Ragdoll系统,可以用来创建这种效果,具体请参阅以 ...

  3. MATLAB学习笔记(七)&mdash;&mdash;MATLAB解方程与函数极值

    (一)线性方程组求解 包含n个未知数,由n个方程构成的线性方程组为: 其矩阵表示形式为: 其中 一.直接求解法 1.左除法 x=A\b; 如果A是奇异的,或者接近奇异的.MATLAB会发出警告信息的. ...

  4. 聊天界面之气泡文本cell(一)

    在实现qq聊天界面的过程中,使用UITableViewCell碰到了不少问题,这里还是记录一下以免遗忘. 气泡聊天cell的实现,网上最多的方法还是: 1.手动计算设置frame的值,文本的size使 ...

  5. hdu 1757 A Simple Math Problem_矩阵快速幂

    题意:略 简单的矩阵快速幂就行了 #include <iostream> #include <cstdio> #include <cstring> using na ...

  6. UWP 律师信息 MVVM 2.0版本

    由于1.0版本存在一个很大的BUG,一直也没有找到问题所在,后来,一位在微软的朋友说,他们的测试小妹给出的结果是框架的问题,所以,就直接整体重构了代码,也布局设计上,由跳转页面变为了UWP常见的左侧列 ...

  7. React笔记:组件(3)

    1. 组件定义 组件是React的核心概念,组件将应用的UI拆分成独立的.可复用的模块. 定义组件的两种方式: (1)类组件:使用ES6 class (2)函数组件:使用函数 使用class定义组件的 ...

  8. 编码符_new88

    begin#239B38F58D59E401465E1FEE0AFA7AE2DD920EB6645F4A2075C7ABBBE2141B925668C9D635D90DE884907F4E52F921 ...

  9. 包含jdk和nginx的基础镜像

    目的 制作一个基础镜像,包含jdk和nginx,这样要将java项目或一些前端页面做成容器,可以稍作修改引用该镜像. Dockerfile FROM alpine:3.8 ENV \ LANG=C.U ...

  10. #leetcode刷题之路49-字母异位词分组

    给定一个字符串数组,将字母异位词组合在一起.字母异位词指字母相同,但排列不同的字符串.示例:输入: ["eat", "tea", "tan" ...