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. linux c中select使用技巧

    1.select函数作为定时器使用    it_value.tv_sec ＝ 0;    it_value.tv_usec ＝ 100000:    select(1,NULL,NULL,NULL,& ...

  2. make module失败的原因cc1: error: unrecognized command line option “-m64

    cc1: error: unrecognized command line option "-m64"cc1: error: unrecognized command line o ...

  3. 重启库，提示找不到mysqld

    --ledir=/usr/local/mysql/bin    加上server的 directory https://dev.mysql.com/doc/refman/5.5/en/mysqld-s ...

  4. 介绍XXTEA加密算法及其C实现

    介绍XXTEA加密算法及其C实现 http://en.wikipedia.org/wiki/XXTEA “微型加密算法(TEA)及其相关变种(XTEA,Block TEA,XXTEA)都是分组加密算法 ...

  5. idea 注册机生成密钥代码

    import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.zip.CR ...

  6. OpenGL红宝书例子2.2 uniform变量的使用

    1. 简单介绍一下OpenGL可编程渲染管线的流程 顶点着色 --> 细分着色 --> 几何着色 --> 片元着色 --> 计算着色 一般我们主要参与的阶段是顶点着色和片元着色 ...

  7. web项目的集成测试:模拟点击

    利用模拟点击的方式进行集成测试,我们准备用google,Firefox和ie三种浏览器测试. 其中除了Firefox是模拟点击的鼻祖不需要插件外,谷歌和ie需要另外下载插件 chromedriver. ...

  8. 转载：数位DP模板

    // pos = 当前处理的位置(一般从高位到低位) 2 // pre = 上一个位的数字(更高的那一位) 3 // status = 要达到的状态,如果为1则可以认为找到了答案,到时候用来返回, 4 ...

  9. 完整版getByClass2016/4/20

    function getByclass(parent,sclass) { var re=new RegExp('\\b'+sclass+'\\b','i') var aEli=parent.getEl ...

  10. webstrom自定义代码块的设置方法

    webstrom里面的自定义代码块叫做活动模版 在文件 -> 设置 -> 编辑器 -> 活动模版可以打开 里面的$var$ 代表一个变量  两个相同的$var$在不全后可以同时修改, ...