web前端学习

概述

传统的网页设计都是为了适应在电脑上进行浏览，但随着移动智能终端的普及，越来越多的人喜欢在移动智能终端访问网页。因此CSS3提供了@media screen功能来实现自适应屏幕大小。具体以下三种方法：

属性值	释义
min-width	尺寸最小法，定义当屏幕尺寸大于等于某尺寸时，要执行的属性
max-width	尺寸最大法，定义当屏幕尺寸小于等于某尺寸时，要执行的属性
min-width and max-width	尺寸区间法，定义屏幕尺寸在某个区间范围时要执行的属性

注意仅用手机无法查看完整效果

1.尺寸最小法min-width

属性功能：定义当屏幕尺寸大于等于某尺寸时，要执行的属性。应用格式： @media screen and （min-width:尺寸值px）{ 选择器及其CSS样式列表 }

尺寸最小法min-width

1

2

3

4

5

6

	
.min-width_class{
	width: 50px;  /* 0-800px用 */
}
/* 注意!CSS同一选择器的同一属性会自上而下解释,后面的覆盖前面的属性,所以使用尺寸最小法时,需要采用"前小后大"原则*/
/* 如果屏幕大于800px,则使用下面的属性值 */
@media screen and (min-width:800px){
	.min-width_class{width: 100px;}
}
/* 如果屏幕大于1080px,则使用下面的属性值 */
@media screen and (min-width:1080px){
	.min-width_class{width: 200px;}
}
/* 如果屏幕大于1200px,则使用下面的属性值 */
@media screen and (min-width:1200px){
	.min-width_class{width: 300px;}
}

2.尺寸最大法max-width

属性功能：定义当屏幕尺寸小于等于某尺寸时，要执行的属性。应用格式： @media screen and （max-width:尺寸值px）{ 选择器及属性列表 }

尺寸最大法max-width

1

2

3

4

5

6

	
.max-width_class{
	width: 300px;/*大于1200px用*/
}
/* 如果屏幕小于1200px,则使用下面的属性值 */
@media screen and (max-width:1200px){
	.max-width_class{width: 200px;}
}
/* 如果屏幕小于1080px,则使用下面的属性值 */
@media screen and (max-width:1080px){
	.max-width_class{width: 100px;}
}
/* 如果屏幕小于800px,则使用下面的属性值 */
@media screen and (max-width:800px){
	.max-width_class{width: 50px;}
}

3.尺寸区间法min-width and max-width

功能：定义屏幕尺寸在某个区间范围时要执行的属性。 @media screen and （min-width:尺寸值px）and（max-width:尺寸值px）{ 选择器及其属性列表 }

尺寸最大法min-max-width

1

2

3

4

5

6

	
.min-max-width_class{
	width: 300px;/*默认宽度*/
}
/* 如果屏幕小于1200px,则使用下面的属性值 */
@media screen and (max-width:1200px){
	.min-max-width_class{width: 200px;}
}
/* 如果屏幕小于1080px,则使用下面的属性值 */
@media screen and (max-width:1080px){
	.min-max-width_class{width: 100px;}
}
/* 如果屏幕小于800px,则使用下面的属性值 */
@media screen and (max-width:800px){
	.min-max-width_class{width: 50px;}
}