1、什么是媒体查询

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

2、为什么响应式设计需要,媒体查询
如果没有CSS3的媒体查询模块,就不能针对设备特性(如视口宽度)设置特定的CSS样式

3、如何在CSS文件中引入媒体查询

媒体查询写在CSS样式代码的最后,CSS是层叠样式表,在同一特殊性下,靠后的的样式会重叠前面的样式

4、怎样使用media

一、

首先需要在html文档中添加以下代码,用来兼容移动设备的显示效果

<meta name="viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>

ps:

width=device-width:宽度等于当前设备的宽度

initial-scale=1:初始的缩放比例(默认为1)

maximum-scale=1:允许用户缩放到得最大比例(默认为1)

user-scalable=no:用户不能手动缩放

二、怎样在CSS文件中写CSS响应式媒体查询 

例:

@media screen and (max-width:720px) and (min-width:320px){

      body{

       background-color:red;

       }

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

      body{

         background-color:blue;

       }

}

ps:该段媒体查询的意思是:当设备屏幕宽度在320px——720px之间时,媒体查询中body的背景色(background-color:red;)会重叠之前的body背景色,当设备屏幕宽度在320px以下时,媒体查询中body的body背景色(background-color:blue;)会重叠之前的body背景色

Media Queries

Media Queries 媒体查询的更多相关文章

  1. media queries 媒体查询使用

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

  2. css3之Media Queries 媒体查询

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

  3. CSS media queries 媒体查询

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

  4. Media Queries媒体查询

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

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

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

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

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

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

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

  8. media query媒体查询

    媒体查询(CSS3 media query) 一.逻辑操作符:not.and.only not:not操作符用来对一条媒体查询的结果取反. and:and操作符用来把多个媒体属性组合起来,合并到同一条 ...

  9. Html5 @media + css3 媒体查询

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

随机推荐

  1. [转载]ORACLE EXP/IMP

    转载自:https://www.cnblogs.com/mengfanrong/p/3792955.html 本文对Oracle数据的导入导出 imp ,exp 两个命令进行了介绍, 并对其对应的參数 ...

  2. 高可用数据采集平台(如何玩转3门语言php+.net+aauto)

    同类文章:高并发数据采集的架构应用(Redis的应用) 吐槽下:本人主程是PHP,团队里面也没有精通.net的人才,为了解决这个平台方案,还是费了一部分劲. 新年了,希望有个新的开始.技术+团队管理都 ...

  3. vue.js 源代码学习笔记 ----- fillter-parse.js

    /* @flow */ export function parseFilters (exp: string): string { let inSingle = false let inDouble = ...

  4. avalon 搭配 百度的UI移动框架 gmu 可以很好干活

    使用过的人评价, 这个UI稳定, bug少, 组件丰富, 触屏好; 小公司, 可以用用 链接

  5. 使用file_get_contents提交http post

    以前使用curl获取需要登陆内容的文章,但其实,自5.0开始,使用file_get_contents就可以完成.(前提是开启了allow_url_fopen),下面以一个简单的例子说明一下:1.先看一 ...

  6. resin WED服务器初用遇到的问题和解决方法 java.lang.RuntimeException: java.net.SocketException: Unrecognized Windows Socke ts error: 0: JVM_Bind

    开启resin 服务器以后提示如下:(控制台不断的循环循环打印如下错误提示) java.lang.RuntimeException: java.net.SocketException: Unrecog ...

  7. Java第三次作业--面向对象基础(封装)

    Deadline: 2017-4-6 23:00 一.学习要点 认真看书并查阅相关资料,掌握以下内容: 掌握简单类的设计 掌握利用对象引用建立类与类之间的联系 掌握this关键字 掌握static关键 ...

  8. RabbitMQ部署

    操作步骤: 安装依赖文件 -->yum install ncurses-devel 进入opt目录创建rabbitmq目录 -->cd /opt -->mkdir rabbitMQ ...

  9. SqlServer一些常用函数(持续更新。。。)

    1. 字符串拼接: + 拼接 SELECT 'AA' + 'BB' A //AABB在2012版本sqlserver之后,可以使用cancat进行字符串拼接了. 2. 判断是否为空,并取另外的值 :I ...

  10. 一个Android开发妹子的找工作心酸史

    阿里:实习二面被KO 1,人生接到的第一个电话面试来自大家都说好的阿里,心情激动,说话颤抖,本以为没有戏,然而第二天接到了二面的电话有点小激动.然后就是被ko了,死的原因很简单,那时候单纯的自己什么都 ...