webapp之路--之query media

最新推荐文章于 2024-06-19 23:47:23 发布

weixin_30865427

最新推荐文章于 2024-06-19 23:47:23 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/dunken/p/4360934.html

本文深入探讨了CSS3 Media Queries模块在移动端响应式开发中的重要性，详细介绍了如何利用Media Queries实现不同屏幕尺寸的自适应样式，并提供了实例代码和常见引入方式。此外，文章还通过一个阿里面试题，展示了如何运用Media Queries解决实际布局问题，旨在帮助开发者提升移动端网站的适应性和用户体验。

　　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结构：

<div class='header'>
<h1>header</h1>
</div>
<div>sidebar"</h1>
</div>
<div>
<h1>content</h1>
</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;
			}
		}