响应式布局
- 概念:根据不同的分辨率,显示不同的样式
- 主要修改的样式
- 元素的隐藏与显示
- 宽度
- 浮动排列
- 文本对齐方式
- 字体大小
- 优点:适配性好
- 缺点:
- 增大工作量
- 出现大量的隐藏元素,导致代码量冗余
- 一般用在小网站
媒体查询
@media 设备类型 and (媒体特性){}
- 设备类型
- all 所有的设备
- screen 显示器/笔记本/移动端设备
- print 打印机
- 媒体特性
- min-width(比最小值大)/max-width(比最大值小)
- 媒体特性的值后面不要加分号
- 多个媒体特性之间用and连接
- and两侧必须有空格
<style>
/* @media 设备类型 and 媒体特性{} */
/* 设备宽度>1000 body显示红色 */
@media screen and (min-width:1000px) {
body {
background-color: red;
}
}
/* 设备宽度500-1000 body显示蓝色 */
@media screen and (min-width:500px) and (max-width:999px) {
body {
background-color: blue;
}
}
/* 设备宽度<500 body显示粉色 */
@media screen and (max-width: 499px) {
body {
background-color: pink;
}
}
</style>
;
}
}