webapp之路--之query media

　　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;}}

转载于:https://www.cnblogs.com/dunken/p/4360934.html

webapp之路--之query media相关推荐

201509280825_《css3——media query整理2》
1.Smartphones (竖板和横板) @media only screen and (min-device-width : 320px) and (max-device-width : 480p ...
css3 media queries
CSS3 Media Queries模板作者:大漠日期:2012-04-04 点击:3183  最早在<CSS3 Media Queries>一文中初探了CSS3的媒体类型和媒体特性 ...
前端面试之路一(HTML+CSS面试整理)
一.HTML基础 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下直接内容) meta title style link script base body区: div/ ...
前端面试之路一(HTML+CSS面试整理) 1
一.HTML基础 html常见元素和理解 html常见元素分类 head区元素:(不会在页面上留下直接内容) meta title style link script base body区: div/ ...
html5的网页布局工具,HTML5网站响应式布局的主流设计方法介绍及工具推荐
我们都知道,目前主流的pc屏幕的分辨率都是1366*768.1440*900 .1280*1024等大屏的显示器.所以网页不能再按照1024的标准来设计或者是前端重构了.加上现在移动互联网的发展势头, ...
html响应式布局是什么,什么是响应式网页设计？响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
html响应式布局平移,响应式网页设计、响应式布局的实现原理
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
响应式HTML网页开发,web开发中的响应式网页设计
概念响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
html响应式布局效果图,响应式网页布局的实现方法原理
昨天我在马海祥博客上跟大家详细的介绍过<什么是响应式网页设计?>,我觉的响应式网页设计不仅仅是一种趋势,还更是一个新的设计解决方案!它有助于解决不同的分辨率和设备(台式电脑,笔记本电脑,平 ...
css网格_快活的Gridmas！使用CSS网格构建喜庆的日历
css网格在本教程中,我们将使用CSS Grid,SVG和一些节日的欢呼声来构建季节性出现日历! 让我们先看一下我们将要朝着什么方向前进-单击日期以查看其背后的内容: 您需要什么本教程实际上并不需 ...

webapp之路--之query media

No.9

webapp之路--之query media相关推荐

最新文章

热门文章