query media是css3中的模块，对于移动端的开发是非常重要的，是响应式web设计的中不可或缺的一部分。简单点说就是根据不同移动设备的屏幕参数来制定不同的css方案以实现web的响应式开发。目前Media Query在浏览器上的兼容度要高很多，Firefox,Safari,Chrome,Opera,iOS Safari,IE等主流浏览器都能很好的支持Media Query。CSS3 Media Query模块是目前在特定移动设备上开发Web应用样式所必需的技术。

先列举下常见的引入方式：

1、link方法引入

   <link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

2、xml方式引入

  <?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

3、@import方式引入

@import引入有两种方式，一种是在样式文件中通过@import调用别一个样式文件；另一种方法是在<head></head>中的<style>...</style>中引入，单这种使用方法在ie6-7都不被支持 如

样式文件中调用另一个样式文件：

   @import url("css/reset.css") screen;

   @import url("css/print.css") print;

在<head></head>中的<style>...</style>中调用：

  <head>

    <style type="text/css">

	@import url("css/style.css") all;

    </style>

  </head>

4、@media引入

这种引入方式和@import是一样的，也有两种方式：

样式文件中使用：

   @media screen{

     选择器{

	属性：属性值；

     }

   }

在<head>>/head>中的<style>...</style>中调用：

  <head>

    <style type="text/css">

	@media screen{

           选择器{

	     属性：属性值；

	   }

	}

    </style>

  </head>

　　多个Media Queries使用

   <link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />
二、好了让我们来做个例子吧：
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。呢么我们可以这样写：
.header{background:url("1.png") no-repeat;}

//像素比为1.5时

@media only screen and (-moz-min-device-pixel-ratio:1.5),noly screen and (-o-min-device-pixel-ratio:3/2),only screen and (-webkit-min-device-pixel-radio:1.5),only screen and (min-device-pixel-radio:1.5){

	.header{background:url("1.png") no-repeat;background-position:66.7%;}

}

//......

　　ok！我们再来看一个阿里的试题：

No.9

实现如下图所示的布局
要求：
sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局

默认如下

宽度小于600px时如下

下面是html结构：

  1. <div class='header'>
  2. <h1>header</h1>
  3. </div>
  4. <div>sidebar"</h1>
  5. </div>
  6. <div>
  7. <h1>content</h1>
  8. </div>

请写出其css代码：
（提示，可以使用media query来检测浏览器窗口宽度）

ok，并不难!

这里也涉及到了css3的盒模型，涉及到了box及自适应不就，ok，直接粘代码。

*{margin:0;padding:0;}

		body{width:100%;height:200px;display:box;display:-moz-box;display:-webkit-box;}

		.header{

			width:100%;

			background:red;

			margin-bottom:10px;

		}

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

			body{

				box-orient:vertical;

				-moz-box-orient:vertical;

				-webkit-box-orient:vertical;

			}

			.header{

				box-flex:1;

				-moz-box-flex:1;

				-webkit-box-flex:1;

				margin-bottom:10px;

			}

			.sidebar{

				box-flex:1;

				-moz-box-flex:1;

				-webkit-box-flex:1;

				background:green;

				margin-bottom:10px;

			}

			.content{

				box-flex:1;

				-moz-box-flex:1;

				-webkit-box-flex:1;

				background:blue;

				margin-bottom:10px;

			}

		}

　　

webapp之路--之query media的更多相关文章

  1. webapp之路--之必备知识

    移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...

  2. webapp之路--meta标签format-detection、apple-mobile-web-app-capable

    1. format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta ...

  3. webapp之路--理解viewport的使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  4. webapp之路--apple私有属性apple-touch-icon

    以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...

  5. webapp之路--百度手机前端经验（转）

    看了之后收获很大,分享一下: 本文将围绕我半年来在移动前端工程化做的一些工作做的总结,主要从localstorage缓存和版本号管理,模块化,静态资源渲染方式三个方面总结手机百度前端一年内沉淀的解决方 ...

  6. webapp之路--之ios上图标

    以前我们用过favicon在浏览器给网站进行身份标识,用法如下: <link href="http://image.feeliu.com/web/favicon.ico" r ...

  7. viewport和media query

    viewport: 你可以定义viewport的宽度.如果你不使用width=device-width,在移动端上你的页面延伸会超过视窗布局的宽度(width=980px),如果你使用了width=d ...

  8. media type和media query

    media type media type是CSS2的重要属性,通过它,可以针对不同的设备指定不同的样式.   media type种类:   用法: <link href="styl ...

  9. 学习EChart.js（四） 移动端显示

    ECharts.js 移动端显示 现在很多时候,我们是在用手机.pad等一些移动端设备来进行办公获取数据.所以我们的图表很多时候是需要用移动端设置来查看的,而我们的图表有时候因为数据的偏多,会出现遮挡 ...

随机推荐

  1. web开发在线调试

    来源: http://www.cnblogs.com/itech/archive/2012/09/23/2698754.html 通常我们开发web时候,使用ie的developertoolgs,或c ...

  2. think in uml 1

    对象,在过程的基础上,是一个抽象级别的提升,可以构建更大更复杂的系统 数据流图(Data Flow Diagram):简称DFD,它从数据传递和加工角度,以图形方式来表达系统的逻辑功能.数据在系统内部 ...

  3. wpf资源嵌套，一个资源引用另外一个资源，被引用的资源应该声明在前面

    在wpf的XAML的Window.Resources中,一个资源引用另外一个资源,出现如下错误: “错误 1 “{DependencyProperty.UnsetValue}”不是 Setter 上“ ...

  4. ThreadLocal类及常用的线程安全类探究

    1.ThreadLocal类 ThreadLocal是Thread Local Variable的简称,意思是线程局部变量.作用是为每一个使用该变量的线程都提供一个该变量的副本,使每一个线程都能独立操 ...

  5. [转]Linux挂载点介绍及桌面服务器分区方案

    原链接:http://www.metsky.com/archives/255.html 本文介绍Linux常用分区挂载点常识以及桌面.服务器分区挂载点的推荐配置,当然这个配置是天缘自己写的,分区大小这 ...

  6. AutoTile 自动拼接（一） 学习与实践

    恩,大家好,这两天江苏冷空气袭击,下了今年 第一场第二场雪. 不过今天我要说的 ,和 上面的 屁关系都没有. 今天要说的是 2d无缝自动拼接.大家有没有玩过  RPG Maker VX Ace. 类似 ...

  7. surpersocket客户端

    大家在学习surpersocket时候,都是拿telnet测试的吧,是不是没有 客户端 而感到 烦恼. 我么,就抽了一点时间 写了个简单的客户端代码. 针对QuickStart的 1-Basic 第一 ...

  8. 使用Qt报错error while building deploying project

    方法一:点击左侧的“项目”栏,看“构建目录”栏的路径,一定要注意,在路径中一定不要出现汉字,否则一定会报“error while building deploying project”的错误. 方法二 ...

  9. android 报错之noclassdeffounderror

    解决方案1: 导入第3方jar包问题,明明导入了jar但还是报java.lang.NoClassDefFoundError解决步骤:1.在Android项目根目录下新建一个lib文件夹:2.把你需要导 ...

  10. LightOJ 1030 Discovering Gold（期望）

    Description You are in a cave, a long cave! The cave can be represented by a 1 x N grid. Each cell o ...