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. 清除number输入框的上下箭头

    <input type="number"/> 在chrome,firefox,safari浏览器上输入框右侧会有上下箭头 方法1: <input type=&qu ...

  2. 【servlet】 第一个servlet

    简单打印haha Helloyt.java package day01; import java.io.IOException; import javax.servlet.ServletConfig; ...

  3. [转]View属性 之 paddingStart & paddingEnd

    [CAUSE] 在写一个自定义View时, 直接复制了Android-Source的XML布局文件, 默认开发SDK版本是4.2.2(Level-API-17), 后因其他原因将SDK版本改为4.1. ...

  4. Modis 陆地产品格网

    Technorati 标签: Modis,陆地产品,格网

  5. 英文SEO外部链接资源收集之常用的footprints

      inurl:/privacy-policy "Using Article Directory plugin"inurl:/terms "Using Article D ...

  6. Day05_JAVAEE系列：Junit

    Junit 单元测试开发工具:myeclipse10 内部集成的junit的库 1)什么是junit?     junit是一个专业的编写测试代码的工具 2)建立junit测试类的步骤:     2. ...

  7. 用phpstudy搭建dedecms网站验证码出不来解决方案

    验证码图片不显示,这应该是很多站长朋友们最长遇到的一个问题,本地测试明明好好的,为什么传上空间或者服务器上验证码就无法显示了呢,春哥分析这可能是由于没有加载gd库扩展所引起的,那么怎么解决呢?由于引起 ...

  8. EF开发程序经常用的几个东西

    PM> Install-Package EntityFramework PM> Install-Package AutoFac PM> Install-Package AutoMap ...

  9. Nginx 502/504 Gateway time-out错误完美解决方案【转发】

      在安装完Nginx+PHP-fpm+Mysql后,跑PHP的应用会经常出现504 Gateway Time-out 或者502 Bad Gateway的情况. Nginx 504 Gateway ...

  10. Servlet程序开发--WEB开发模式（Mode I, Mode II）

    Mode I: 就是在开发中,将显示层,控制层,数据层的操作统一交给JSP或JavaBean来进行处理. 客户端通过访问JSP,调用里面的JavaBean,而通过JavaBean调用数据库,在Java ...