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. php5.6之后的版本使用curl以＠+文件名的方式上传文件无效的解决版本

    使用curl上传文件使用file=@文件路径的方式,在php5.6以后的版本中无法使用了 官方文档给出明确解释 如果需要支持的话,可以将CURLOPT_SAFE_UPLOAD设置为false 或者使用 ...

  2. adb端口被占用

    程序不能执行,kill掉任务管理器里面adb服务,重新连接设备仍然有错 查到可能是adb端口被占用 查看adb用的是哪个端口:C:\Users\wanglin>adb nodaemon serv ...

  3. oracle中触发器的讲解

    触发器在数据库里以独立的对象存储,它与存储过程和函数不同的是,存储过程与函数需要用户显示调用才执行,而触发器是由一个事件来启动运行.即触发器是当某个事件发生时自动地隐式运行.并且,触发器不能接收参数. ...

  4. Jquery树控件ZTree异步加载

    异步加载的意思就是: 当点击展开树节点时,才去请求后台action返回点击节点的子节点数据并加载. 这里面主要设计ztree的setting变量的async属性设置: var setting = { ...

  5. Hibernate 系列教程13-继承-鉴别器与内连接相结合

    Employee public class Employee { private Long id; private String name; HourlyEmployee public class H ...

  6. linux 查看磁盘、文件夹、文件大小(df du)

    du 查看文件夹大小 1.查看当前文件夹中所有文件夹及其子文件夹的大小,注意是文件夹大小,不是文件 # du -h -rw-r--r-- 1 root root 82785865 6月 9 15:53 ...

  7. MFC DLL中导出函数模板

    //my.h struct AFX_EXT_CLASS B { }; struct AFX_EXT_CLASS C { }; class AFX_EXT_CLASS A { public: templ ...

  8. iOS开发frame, contentSize, contentOffset, contentInset 区别联系浅析

    1. 概述 iOS开发中,必然会涉及到布局相关问题,frame,bounds,contenSize,contentOffset,contentInset这几个布局相关概念让许多初学者感到困惑.虽然初步 ...

  9. Android提高第十九篇之"多方向"抽屉--转

    本文来自http://blog.csdn.net/hellogv/ ,引用必须注明出处! 在android上要实现类似Launch的抽屉效果,大家一定首先会想起SlidingDrawer.Slidin ...

  10. Theos tweak MSHookFunction

    #import "substrate.h" static FILE * (*s_orig_fopen) ( const char * filename, const char * ...