Media
1.什么事响应式
http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html
Media Queries :响应式
-->其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。
2.响应式格式:
@media 设备类型 关系 具体样式{}
常用设备类型:
1. all -->指所有类型
2. screen -->指显示器/笔记本/移动端设备
关系:
and(并且) 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
示例: 匹配:@media screen and(min-width:600px)
匹配: 显示器 并且 最小宽度为600px
1.all: 所有设备
2.not是用来排除掉某些特定的设备的,比如 @media not print(非打印设备)、
3.only: 用来定某种特别的媒体类型
样式:
屏幕:
1.Min-width: 最小宽度
2.max-width: 最大宽度
3.min-height: 最小高度
4.max-height: 最大高度
设备输出宽高:
1.min-device-width: 最小输出宽度
2.ma-device-width: 最大输出宽度
3.min-device-height: 最小输出高度
4.max-device-height: 最大输出高度
根据不同浏览器的宽度引用不同样式
<link rel=“stylesheet” type=“text/css” media=“only screen and (max-width: 480px),only screen and (max-device-width: 480px)” href=“link.css”/>
内容换行:实现换行只要
给父级元素添加:word-wrap:break-word
各浏览器的内核:
(-ms-:IE内核 / -webkit-:Safari 和 Chrome内核 / -moz- :Firefox 内核 / -o-: Opera 内核)
<!DOCTYPE html>
<html>
<head>
<title>响应式</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<!-- <link rel="stylesheet" type="text/css" href="style.css"> -->
<style>
- html,body{margin: 0;padding: 0;}
.heading,
.containg,
.footing{
margin: 10px auto;
}
.heading{
height: 100px;
background: chocolate;
}
.left,
.right,
.main{
background-color: cyan;
}
.footing{
height: 100px;
background-color: gray;
}
@media only screen and (min-width:960px){
.heading,
.containg,
.footing{
width: 960px;
}
.left,
.main,
.right{
float: left;
height:500px;
}
.left,
.right{
width: 200px;
}
.main{
width: 550px;
margin: 0px 5px;
}
.containg{
height: 500px;
}
}
@media only screen and (min-width:600px) and (max-width: 960px){
.heading,
.containg,
.footing{
width: 600px;
}
.left,
.main{
float: left;
height: 400px;
}
.right{
display: none;
}
.left{
width: 160px;
}
.main{
width: 435px;
margin-left: 5px;
}
.containg{
height: 400px;
}
}
@media only screen and (max-width: 600px){
.heading,
.containg,
.footing{
width: 400px;
}
.left,
.right{
width: 400px;
height: 100px;
}
.main{
margin-top: 10px;
width: 400px;
height:200px;
}
.right{
margin-top: 10px;
}
.containg{
height: 420px;
}
}
</style>
</head>
<body>
<div class="heading"></div>
<div class="containg">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
<div class="footing"></div>
</body>
</html>