响应式布局

响应式布局是根据页面的分辨率来决定用什么样式展示内容。通过媒体查询@media的方式可以设置不同页面尺寸下的样式。

语法

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

示例

@media screen and (max-width: 424px) {} // 普通手机屏幕
@media screen and (min-width: 425px) and (max-width: 767px) {} // 普通平板屏幕
@media screen and (min-width: 768px) and (max-width: 999px) {}
@media screen and (min-width: 1000px) and (max-width: 1279px) {}
@media screen and (min-width: 1280px) and (max-width: 1599px) {}
@media screen and (min-width: 1600px) and (max-width: 1919px) {}
@media screen and (min-width: 1920px) {} // 大屏

样式修改经验

1. 百分比布局

• 对于font size，可以用rem或em替换px的写法；
• 对于元素的width和height，可以采用百分比的写法；
• 对于元素与元素位置相关的边距等属性，可以采用百分比的写法。

2. 排列方式

• 对于在大屏页面中横向排列的元素，当页面宽度变小到手机端页面时，可以改成纵向排列。例如：

.myClass {
	display: flex;
	flex-direction: row;
}
@media screen and (max-width: 424px) {
	.myClass {
		flex-direction: column;
	}
} 

• 当有许多排列的元素时，可以改变每一行/每一列元素的数量。例如：

.myClass {
	width: 33%;
}
@media screen and (max-width: 424px) {
	.myClass {
		width: 50%;
	}
}

3. 自动换行

.myClass {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
}

4. 其它

• 在原本项目的样式就很复杂的情况下，先通过调试找到要修改的元素，并在调试模式下初步试验修改，再修改样式文件。
• 对于样式比较简单的页面，媒体查询分的类别数目可以适当减少，多少分辨率作为分界可以调节。
• 对于难以在外部样式文件中修改的问题，可以写成行内样式，通过判断window.screen.width来达到相同效果。