CSS3 Media Queries模板

如果看完了还不过瘾?想和作者深聊相关话题,可以点击这里向作者提问!

最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:

  1. Responsive设计和CSS3 Media Queries的结合
  2. 了解Responsive网页设计的三个特性
  3. Responsive设计的关键三步

从这几篇文章中可以知道,在Responsiv的设计中,CSS3的Media是起着非常关键性的作用,也可以说没有CSS3 Media这个属性,Responsiv设计是玩不起来,也是玩不转的。大家都知道Responsiv是为各种不同的设备进行样式设计的,但有一个问题大家或许还处在模糊状态,这个CSS3 Media要如何设置各自的临界点?

那么今天我们就针对上面的问题,一起来探讨一下CSS3 Media Queries在各种不同设备(桌面,手机,笔记本,ios等)下的模板制作。那么Media Queries是如何工作的?那么有关于他的工作原理大家要是感兴趣的话可以参考《CSS3 Media Queries》一文,里面已经做过详细的介绍,这里就不在进行过多的阐述。

CSS3 Media Queries模板

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

使用max-width

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

使用min-width

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

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

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

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

iPhone和Smartphones上的运用

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

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

iPads上的运用

		/* 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) {
			//你的样式放在这里...
		}
	

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

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

有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相

剩余70%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-media-queries-for-different-devices

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部