明凯博客

关注网站技术,一个特立独行的程序员

响应式设计CSS3 Media Queries模板

上次写了一篇响应式文章的概述,很多朋友就问有没有模板提供呢?

用3个步骤实现响应式网页设计

下面给大家介绍一下常用的模板。

CSS3 Media Queries模板

CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满足就调用相应的样式。打个比方来说,如果你的Web页面在960px的显屏下显示,那么首先会通过CSS3 Media Queries进行查询,看看有没有设置这个条件样式,如果找到相应的,就会采用对应下的样式,其他的设备是一样的道理。下面具体看看“max-width”和“min-width”模板:

使用max-width

1
2
3
@media screen and (max-width: 600px) {
			//你的样式放在这里....
		}

使用min-width

1
2
3
		@media screen and (min-width: 900px) {
			//你的样式放在这里...
		}

max-width和min-width的混合使用

1
2
3
		@media screen and (min-width: 600px) and (max-width: 900px) {
			//你的样式放在这里...
		}

同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用:

iPhone和Smartphones上的运用

1
2
3
4
		/* iPhone and Smartphones (portrait and landscape) */
		@media screen and (min-device-width : 320px) and (max-device-width: 480px) {
			//你的样式放在这里...
		}

max-device-width指的是设备整个渲染区宽度(设备的实际宽度)

iPads上的运用

1
2
3
4
5
6
7
8
		/* iPads (landscape) */
		@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
			//你的样式放在这里...
		}
		/* iPads (portrait) */
		@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
			//你的样式放在这里...
		}

针对移动设备的运用,如果你想让样式工作得比较正常,需要在“”添加“viewport”的meta标签:

1
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />

调用独立的样式表

你可能希望在不同的设备下调用不同的样式文件,方便管理或者维护,那么你可以按下面的这种方式进行调用:

1
2
		<link rel="stylesheet" media="screen and (min-device-width : 320px) and (max-device-width: 480px)" href="iphone.css" />
		<link rel="stylesheet" media="screen and (min-device-width : 768px) and (max-device-width : 1024px)" href="ipad.css" />

CSS3 Media Queries在标准设备上的运用

下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:

1、1024px显屏

1
2
3
		@media screen and (max-width : 1024px) {
			/* CSS Styles */
		}

2、800px显屏

1
2
3
		@media screen and (max-width : 800px) {
			/* CSS Styles */
		}

3、640px显屏

1
2
3
		@media screen and (max-width : 640px) {
			/* CSS Styles */
		}

4、iPad横板显屏

1
2
3
		@media screen and (max-device-width: 1024px) and (orientation: landscape) {
			/* CSS Styles */
		}

5、iPad竖板显屏

1
2
3
		@media screen and (max-device-width: 768px) and (orientation: portrait) {
			/* CSS Styles */
		}

iPhone 和 Smartphones

1
2
3
		@media screen and (min-device-width: 320px) and (min-device-width: 480px) {
			/* CSS Styles */
		}

现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:

1
2
3
4
5
6
7
8
9
10
11
	// Landscape phones and down
	@media (max-width: 480px) { ... }
 
	// Landscape phone to portrait tablet
	@media (max-width: 768px) { ... }
 
	// Portrait tablet to landscape and desktop
	@media (min-width: 768px) and (max-width: 980px) { ... }
 
	// Large desktop
	@media (min-width: 1200px) { .. }

在bootstrap中的responsive.css采用的是网格布局,大家可以到官网查看或下载其源码进行学习。另外为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。

1、Smartphones (portrait and landscape)

1
2
3
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	/* Styles */
}

2、Smartphones (landscape)

1
2
3
@media only screen and (min-width : 321px) {
	/* Styles */
}

3、Smartphones (portrait)

1
2
3
@media only screen and (max-width : 320px) {
	/* Styles */
}

4、iPads (portrait and landscape)

1
2
3
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
	/* Styles */
}

5、iPads (landscape)

1
2
3
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
	/* Styles */
}

6、iPads (portrait)

1
2
3
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
	/* Styles */
}

7、iPhone 4

1
2
3
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}

8、640px显屏

1
2
3
@media screen and (max-width : 640px) {
	/* CSS Styles */
}

9、800px显屏

1
2
3
@media screen and (max-width : 800px) {
	/* CSS Styles */
}

10、1024显屏

1
2
3
@media screen and (max-width : 1024px) {
	/* CSS Styles */
}

11、Desktops and laptops

1
2
3
@media only screen and (min-width : 1224px) {
	/* Styles */
}

12、Large screens

1
2
3
@media only screen and (min-width : 1824px) {
	/* Styles */
}

那么有关于CSS3 Media Queries模板的相关介绍就说到这里了,最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值,您可以把他推荐给您的朋友,如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。

最新更新模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
@media only screen and (min-width: 320px) {
 
  /* Small screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
 
  /* Small screen, retina, stuff to override above media query */
 
}
 
@media only screen and (min-width: 700px) {
 
  /* Medium screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 
 
  /* Medium screen, retina, stuff to override above media query */
 
}
 
@media only screen and (min-width: 1300px) {
 
  /* Large screen, non-retina */
 
}
 
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 
 
  /* Large screen, retina, stuff to override above media query */
 
}

, ,

相关文章

4 条评论 “响应式设计CSS3 Media Queries模板

发表评论

电子邮件地址不会被公开。 必填项已用*标注