css响应式布局RWD

时间:2023-12-16 20:38:20

响应式布局结合了三大理念:

1)用于布局的弹性网络(百分比定义宽度)

2)用于图片和视频的弹性媒体

3)媒体查询

在布局中,需要注意的点有:

1)尽量用min-width/max-width,max-height/min-height代替width,height

2)尽量使用百分比,em为单位代替精确值

3)采用媒体查询

二、媒体查询

IE8以下不支持媒体查询,需要引入

<!-- if lte IE 8>
<script src="response.min.js"></script>
<![endif]-->

媒体查询需要设置断点,常见的断点如480px,769px等。也可以逐渐缩小浏览器的宽度,观察布局效果来引入。

媒体查询引入的方式有两种

1)通过link标签引入

<link rel="stylesheet" href="css/small.css" media="(max-width:480x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:769x)">
<link rel="stylesheet" href="css/large.css" media="(min-width:480px) and max-width(768px)">

2)将查询包含在样式表中

@media(max-width:480px){
}
@media(min-width:480px) and (max-width:768px){
}
@media(min-width:769px){
}