固定写法
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
含义
width=device-width :表示宽度是设备屏幕的宽度
initial-scale=1.0:表示初始的缩放比例
minimum-scale=0.5:表示最小的缩放比例
maximum-scale=2.0:表示最大的缩放比例
user-scalable=yes:表示用户是否可以调整缩放比例
@ media的用法
<head>
<meta charset="UTF-8">
<title>自适应案例</title>
<!-- width=device-width :表示宽度是设备屏幕的宽度 -->
<!-- initial-scale=1.0:表示初始的缩放比例 -->
<!-- minimum-scale=0.5:表示最小的缩放比例 -->
<!-- maximum-scale=2.0:表示最大的缩放比例 -->
<!-- user-scalable=yes:表示用户是否可以调整缩放比例 -->
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--外部引入-->
<link media="screen and (max-width:700px)" rel="stylesheet" href="Demo.css">
</head>
<body>
</body>
<style type="text/css">
@media screen and (max-width: 960px) and (min-width: 700px){
body{
background-color: red;
}
}
</style>
css样式
body{
background-color: blue;
}
横屏竖屏操作
/*横屏*/
@media screen and (orientation: landscape){
body{
background-color: aqua;
}
}
/*竖屏*/
@media screen and (orientation: portrait){
body{
background-color: brown;
}
}
效果图
小案例
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>响应式布局</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<div class="container">
<header id="header">
<h3>页头</h3>
</header>
<nav id="navigation">
<h3>导航</h3>
</nav>
<section id="mainbody">
<h3>主体</h3>
<p>
我家养了一只小兔子,它很可爱。全身雪白,张着一对红眼睛,
三瓣嘴,可招人喜欢了。特别是我喂它吃菜叶时的表情,它把
俩只脚一抬,屁股一坐,竖起耳朵等着你喂它。它吃菜时,会
发出嚓嚓嚓的声音。可是,好景不长,没养几天就让妈妈给送
人了。我问妈妈,你为什么,要送人,妈妈说白天没人喂它,
会饿死的。可是我很想念它,有时候做梦都会梦见跟它玩。
</p>
</section>
<aside id="asider">
<h3>边栏</h3>
<p>
Almost every child will complain about their parents
sometimes. It is natural, because when people stay
together for a long time, they will start to have
argument. But ignore about the unhappy time, our
parents love us all the time. No matter what happen
to us, they will stand by our sides. We should be
grateful to them and try to understand them.
</p>
</aside>
<footer id="footer">
<h3>页脚</h3>
</footer>
</div>
</body>
</html>
CSS代码
*{
margin: 0;
padding: 0;
}
body{
margin-top: 35px;
text-align: center;
}
.container{
width: 960px;
margin: 0 auto;
}
#header,#navigation,#mainbody,#asider,#footer{
height: 100px;
line-height: 25px;
background: #eee;
margin-bottom: 20px;
}
#mainbody,#asider{
float: left;
height: 300px;
}
#mainbody{
width: 620px;
margin-right: 20px;
background: tomato;
}
#asider{
width: 320px;
background-color: darkcyan;
}
#footer{
clear: both;
}
@media screen and (max-width: 1200px){
.container{
width: 1170px;
}
#mainbody{
width: 700px;
margin-right: 30px;
}
#asider{
width: 440px;
background-color: blueviolet;
}
}
/*流动布局*/
@media all and (max-width: 959px){
.container{
width: 100%;
}
#mainbody{
width: 67%;
}
#asider{
width: 30%;
float: right;
}
}
@media all and (max-width: 767px){
#mainbody,#asider{
float: none;
width: 100%;
}
}