关于自适应布局，主要是在不同的设备中，显示都能达到一种理想的效果，所以采用了自适应。
<!DOCTYPE html>
<html>
<head>
<title>layout.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<link href="layout.css" type="text/css" rel="stylesheet" media=‘only screen and (max-width:640px)‘/>//这句话的意思是说如果设备的宽度在640px以下的话就遵循这个样式
<style>
@media screen and (min-width:640px){
body{
background-color:blue;
}
}
</style>
</head>
<body>
This is my HTML page. <br>
</body>
</html>
对应的css文件
*{
margin:0;
padding:0px;
background-color:red;
}
自适应的小案例
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width = device-width,initial-scale=1">//这句话是设置自适应布局的标示语 <link href="1.css" type="text/css" rel="stylesheet"/> </head> <body> <div class="header"></div> <div class="container"> <div class="left"></div> <div class="main"></div> <div class="right"></div> </div> <div class="footer"></div> </body> </html>
css文件
*{
margin:0;
padding:0;
}
@media screen and (min-width: 940px){
.header,
.container,
.footer{
margin:10px auto;
width:940px;
height:450px;
}
.header{
background-color:red;
}
.container{
}
.footer{
background-color:yellow;
}
.left,.main,.right{
float:left;
width:300px;
height:450px;
background-color:blue;
}
.main{
margin-left:20px;
margin-right:20px;
}
}
@media screen and (min-width: 600px) and (max-width:940px){
.header,
.container,
.footer{
margin:10px auto;
width:600px;
height:450px;
}
.header{
background-color:red;
}
.container{
}
.footer{
background-color:yellow;
}
.left,.main{
float:left;
width:290px;
height:450px;
background-color:blue;
}
.right{
display:none;
}
.main{
margin-left:20px;
}
}
@media screen and (max-width: 600px) {
.header,
.footer{
height:450px;
}
.container{
margin:10px auto;
width:400px;
height:1400px;
}
.header{
background-color:red;
}
.container{
}
.footer{
background-color:yellow;
}
.left,.main,.right{
margin:0 auto;
width:300px;
height:450px;
background-color:blue;
}
.main{
margin-bottom:10px;
margin-top:10px;
}
}
时间： 2024-12-28 12:13:48