响应式布局的一些笔记

CSS 实现响应式布局

什么是响应式布局？

响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。

传统的开发方式是PC端开发一套，手机端再开发一套。

而使用响应式布局只要开发一套就够用了。

缺点就在于CSS会比较重。

@media 媒体查询

@media可用于基于一个或多个媒体查询的结果来应用样式表的一部分。

使用它，可用指定一个媒体查询和一个CSS块，

只有该媒体查询与正在使用其内容的设备匹配时，该CSS块才能用于与该文档。

@media 的基本语法

@media 媒体类型 and (媒体特性) {
	/** 一些CSS样式 */
}

媒体的类型

值	说明
all	全部媒体类型
braille	盲文触摸装置
embossed	分页盲文打印机
handheld	小屏幕和流量有限的手持设备（按照标准来说移动设备都应该使用这个介质类型，但实际上安卓根本不会理会这个介质，请使用 screen结合媒体查询语句使用）
print	提供给打印机的样式，最常用的介质类型，打印页面时获得合适阅读的效果
projection	投影，给投影机使用
screen	彩色屏幕，最常用的介质类型，一般和屏幕大小表达式联合使用
speech	语言朗诵，用于屏幕阅读软件
tty	固定间距字符网格
tv	智能电视设备

几个常用的媒体特性

值	说明
min-width	最小宽度，媒体类型大于或等于指定宽度时，样式生效
max-width	最大宽度，媒体类型小于或等于指定宽度时，样式生效
min-height	最小宽度，媒体类型大于或等于指定高度时，样式生效
max-height	最大高度，媒体类型小于或等于指定高度时，样式生效

更多媒体特性

@media 的使用方式

/** 例如 - 当媒体类型的宽度小于或等于 1200px 时，那么里面的样式就会生效 */
@media screen and (max-width: 1200px) {
    div {
        background: pink;
    }
}

/** 或者同时使用多个媒体特性 */
@media screen and (max-width: 1200px) and (min-width: 992px) {
    ......
}

也可以根据媒体的不同，引入不同的样式文件

<link ref="stylesheet" media="screen and (min-width: 768px)" href="./media.css" />

媒体查询的尺寸

/* 大型设备 - 1200px 以上 */
@media screen and (min-width: 1200px){ ... }
/* 中型设备 - 992px ~ 1199px */
@media screen and (min-width: 992px) and (max-width: 1199px) { ... }
/* 小型设备 - 768px ~ 991px */
@media screen and (min-width: 768px) and (max-width: 991px) { ... } 
/* 超小设备 - 480px ~ 767px */
@media screen and (min-width: 480px) and (max-width: 767px) { ... }
/* 超级小设备 - 479px 以下 */
@media screen and (max-width: 479px) { ... }