响应式---web设计之CSS3 Media Queries
一:设置视口 (view [vju:] 看; ==看待 port [pɔ:t] 接口)==视口
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
二:Media Query(媒体查询)
@media媒体类型and(媒体特性){ /*CSS样式*/ } 媒体类型:screen,print... 媒体特性:max-width,max-height...
1:HTML标签加载:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 400px)" href="tinyScreen.css" /> //如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
<link rel="stylesheet" type="text/css" media="screen and (min-width: 400px) and (max-device-width: 600px)" href="smallScreen.css" /> //如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件.
2:在现有CSS文件中加载。
@import url("tinyScreen.css") screen and (max-device-width: 400px); //如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。
3:内部直接使用CSS书写方式: @当+media媒体+screen [skri:n] 屏幕、屏风...;
<style type="text/css"> @media screen and (max-width:320px){ /*css*/ } </style>
<style type="text/css"> @media only screen and (min-width:321px) and (max-width:640px){ /*css*/ }</style>
要注意的是由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用具有绝对宽度的元素。这一条非常重要,否则会出现横向滚动条。
三:补充:media query中的not only all等关键字
今天在群里一群友问起 @media only screen and (min-width: 320px) 中only是什么意思,查了些资料。
not: not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)、
only: 用来定某种特别的媒体类型。对于支持Media Queries的移动设备来说,如果存在only关键字,移动设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持 Media Queries的设备但能够读取Media Type类型的Web浏览器,遇到only关键字时会忽略这个样式文件。
all: 所有设备,这个应该经常看到
还有其它一些:
media_type |
设备类型说明 |
all |
所有设备 |
aural |
听觉设备 |
braille |
点字触觉设备 |
handled |
便携设备,如手机、平板电脑 |
|
打印预览图等 |
projection |
投影设备 |
screen |
显示器、笔记本、移动端等设备 |
tty |
如打字机或终端等设备 |
tv |
电视机等设备类型 |
embossed |
盲文打印机 |
相关资料扩展:http://book.51cto.com/art/201204/328362.htm
http://www.w3cplus.com/content/css3-media-queries
http://www.w3.org/TR/CSS2/media.html#media-types
----------------------------------华丽的分割线-----------------------------------------------------------
以下是demo
一个三栏布局的,在不同的尺寸下,变为两栏,再变为一栏~
代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>css3-media-queries-demo</title>
<style>
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
padding: 0;
margin: 0;
}
.content{
zoom:1;
}
.content:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.leftBox, .rightBox{
float: left;
width: 20%;
height: 500px;
margin: 5px;
background: #ffccf7;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 2s ease;
transition: width 1s ease;
}
.middleBox{
float: left;
width: 50%;
height: 800px;
margin: 5px;
background: #b1fffc;
display: inline;
-webkit-transition: width 1s ease;
-moz-transition: width 1s ease;
-o-transition: width 1s ease;
-ms-transition: width 1s ease;
transition: width 1s ease;
}
.rightBox{
background: #fffab1;
}
@media only screen and (min-width: 1024px){
.content{
width: 1000px;
margin: auto
}
}
@media only screen and (min-width: 400px) and (max-width: 1024px){
.rightBox{
width: 0;
}
.leftBox{ width: 30%}
.middleBox{ width: 65%}
}
@media only screen and (max-width: 400px){
.leftBox, .rightBox, .middleBox{
width: 98%;
height: 200px;
}
}
</style>
</head> <body>
<div class="content">
<div class="leftBox"></div>
<div class="middleBox"></div>
<div class="rightBox"></div>
</div>
</body>
</html>
参考文章:http://www.swordair.com/blog/2010/08/431/
http://webdesignerwall.com/tutorials/css3-media-queries
http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
原文出处:http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html
最新文章
- [精品书单] C#/.NET 学习之路——从入门到放弃
- Geometry Curve of OpenCascade BRep
- 单臂路由与三层交换机实现VLAN通信
- IOS中定时器NSTimer的开启与关闭
- BZOJ3343: 教主的魔法 分块
- 单例模式中的多线程分析synchronized
- 在VS中快速查看文件被谁签出
- Javascript中常用事件的命名
- LCA of a Binary Tree
- mysql max_allowed_packet错误
- Spring + Quartz配置实例
- (转)调用System.gc没有立即执行的解决方法
- PMP知识点(四)——项目管理计划的内容
- Java8内置的函数式编程接口应用场景和方式
- echarts地图 禁止高亮显示(转载)
- 16-client、offset、scroll系列
- [Linux] ubuntu各目录含义
- 【iOS XMPP】使用XMPPFramewok(三):好友状态
- Android Studio 视图解析
- ASP.NET Core 2 学习笔记(六)MVC
热门文章
- [Unity优化]UI优化(三):GraphicRebuild
- javac编译错误: 编码UTF8/GBK的不可映射字符
- java.io.UnsupportedEncodingException
- c#中使用excel
- JRebel 代理激活
- 一个类似于jq的小型库
- 【FZSZ2017暑假提高组Day1】华容道游戏
- UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新
- Java POI操作Excel注意点
- GDI+_Png图片浏览器