百分比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<style type="text/css">
.container{
width: 600px;
margin:0 auto;
}
p.text{
float: left;
width: 60%;
}
div.img-wrap {
float: right;
width: 40%;
}
img.responsive {
/*这里一定需要max-width*/
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="container">
<p class="text">响应式布局响应式布局</p>
<div class="img-wrap">
<img alt="" class="responsive" src="1.jpg" />
<p>transition</p>
</div>
</div>
</body>
</html>
媒介查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式导航栏</title>
<style type="text/css">
@media screen and (max-width: 800px) {
.small-menu {
display: inline;
}
.large-menu {
display: none;
}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
.small-menu {
display: none;
}
.large-menu {
display: inline;
width: 100%;
}
.large-menu ul {
list-style-type: none;
}
.large-menu ul li {
display: inline;
}
.content {
width: 100%;
}
}
@media screen and (min-width: 1025px) {
.small-menu {
display: none;
}
.large-menu {
float: left;
display: inline;
width: 20%;
}
.content {
float: right;
width: 80%;
}
}
</style>
</head>
<body>
<div class="small-menu">
<select>
<option>首页</option>
<option>新闻</option>
<option>反馈</option>
</select>
</div>
<div class="large-menu">
<ul>
<li>首页</li>
<li>新闻</li>
<li>反馈</li>
</ul>
</div>
<div class="content">
这里是内容
</div>
</body>
</html>
媒介查询判断横竖屏
html {
font-size: 12px;
}
/*横屏*/
@media screen and (orientation:portrait) {
p.a{
font-size: 1rem;
}
}
/*竖屏*/
@media screen and (orientation:landscape) {
p.a{
font-size: 3rem;
}
}