响应式布局
更适合简单的PC端官网
在不同分辨率下改变相应的布局
<style>
@media screen and (max-width:1024px) {
body {
background-color: #666;
}
}
@media screen and (max-width:768px) and (min-width:1024px) {
body {
background-color: #666;
}
}
@media screen and (max-width:448px) and (min-width:768px) {
body {
background-color: #666;
}
}
</style>
竖屏
@media screen and (orientation:portrait) and (max-width:768px) {
body {
background-color: #666;
}
}
横屏
@media screen and (orientation:landscape) and (max-width:768px) {
body {
background-color: #666;
}
}