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. MyEclipse10.6、Maven、svn集成

    这几天整理maven,根据开发部署需要,需要把原先的myeclipse下的普通javaWeb工程用maven管理,弄了2天,主要还是在jar包的引入上,总是少- -! 好了,下面记录一下我的安装过程: ...

  2. linq any() all() 返回true 或者false

    一.any()只要有一个符合条件就返回true static void Main(string[] args) { //any 有符合条件的就返回true ,,,,,,,,,}; ); Console ...

  3. icon在页面中的使用

    https://icomoon.io/app/#/select 1.上传.svg新图标 2.选中那个小图标,点底部导航的生成字体. 3.然后命名,下载. 4.下载下来的内容只有这两处是必须要用的. 5 ...

  4. MySQL操作失误导致mysql数据库查看不了

    使用  show databases; +--------------------+| Database           |+--------------------+| information_ ...

  5. Java传参

    1.  如果参数是基本数据类型(int.long等),传值.方法内部改变参数值,外部值不变. 2.  如果参数是对象类型,传地址.方法内部改变对象值,外部对象值改变.但是,如果方法内部调用new重新构 ...

  6. AI 人工智能 探索 （六）

    这次我为 角色 attribute 添加了 多个属性 其中 att 是 好人 坏人 等属性, 显然 数字不同 就要打起来. grade 是智商属性 ,今天先做了 3的智商.也就是小兵智商.碰到就打 逃 ...

  7. js基础之数据类型

    一:JavaScript 数据类型:字符串.数字.布尔.数组.对象.Null.Undefined JavaScript 字符串;        var carname="Bill Gates ...

  8. HDU 1824 Let's go home

    2-SAT,根据题意建好图,求一下强联通分量,判断一下就可以了 #include<cstdio> #include<cstring> #include<cmath> ...

  9. SpringMVC中获得HttpRequest对象的方法

    1. 使用@autowired注入HttpRequest 2. 在方法中直接声明形参有HttpRequest即可. 3. 使用一个Listener,然后获取.

  10. jquery插件简单的声明方法

    (function($){     //  声明插件内容     $.fn.pluginName = function(options){         //  默认插件配置         var ...