您的位置：首页 > 其它

自适应布局

2016-04-18 21:27 351 查看

原文链接：https://www.geek-share.com/detail/2671986022.html

关于自适应布局，主要是在不同的设备中，显示都能达到一种理想的效果，所以采用了自适应。

<!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;
}
}

转载于:https://www.cnblogs.com/yuaima/p/5405950.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航