<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title></title>
<style type="text/css">
/*自适应页面div均为float 切均为百分比宽度*/
div {
height: 80px;
width: 100%;
float: left;
}
.normal {
float: none;
}
.class1 {
background-color: blue;
}
.class2 {
width: 40%;
background-color: aquamarine;
}
.class3 {
width: 60%;
background-color: crimson;
}
.class4 {
background-color: darkkhaki;
}
/*当屏幕小于等于500时使用该样式*/
@media only screen and (max-width:500px) {
.class2 {
width: 100%;
}
.class3 {
width: 100%;
}
}
/*当屏幕处于501-900时 使用该样式*/
@media only screen and (min-width:501px) and (max-width:900px) {
.class2 {
width: 60%;
}
.class3 {
width: 40%;
}
}
/*当屏幕处于501-900时且横屏情况下使用该样式*/
@media only screen and (min-width:501px) and (max-width:900px) and (orientation:landscape) {
.class2 {
width: 60%;
}
.class3 {
width: 40%;
}
}
/*高分辨率设备下使用该样式*/
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
</style>
</head>
<body>
<div>
<div class="class1"></div>
<div class="class2"></div>
<div class="class3"></div>
<div class="class4"></div>
</div>
</body>
</html>
