CSS3 Media Queries模板
2012-04-04 00:00
681 查看
最早在《CSS3 Media Queries》一文中初探了CSS3的媒体类型和媒体特性的相关应用。简单的知道了使用这个能在各种不同的设备显示不一样的样式风格。随着Responsive的响应式设计的兴起,前面跟大家一起学习了:
《Responsive设计和CSS3 Media Queries的结合》
《了解Responsive网页设计的三个特性》
《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
使用min-width
max-width和min-width的混合使用
同时CSS3 Media Queries还能查询设备的宽度“device-width”来判断样式的调用,这个主要用在iPhone,iPads设备上,比如像下面的应用:
iPhone和Smartphones上的运用
max-device-width指的是设备整个渲染区宽度(设备的实际宽度)
iPads上的运用
针对移动设备的运用,如果你想让样式工作得比较正常,需要在“<head>”添加“viewport”的meta标签:
有关于这方面的介绍大家可以看看这个blog上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件,方便管理或者维护,那么你可以按下面的这种方式进行调用:
CSS3 Media Queries在标准设备上的运用
下面我们一起来看看CSS3 Meida Queries在标准设备上的运用,大家可以把这些样式加到你的样式文件中,或者单独创建一个名为“responsive.css”文件,并在相应的条件中写上你的样式,让他适合你的设计需求:
1、1024px显屏
2、800px显屏
3、640px显屏
4、iPad横板显屏
5、iPad竖板显屏
iPhone 和 Smartphones
现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:
在bootstrap中的responsive.css采用的是网格布局,大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
下面给大家提供几个这方面的案例,以供大家参考:
《CSS3 Media Queries案例——Hicksdesign》
《CSS3 Media Queries案例——Tee Gallery》
《CSS3 Media Queries案例——A List Apart》
更新CSS3 Media Queries模板查询
1、Smartphones (portrait and landscape)
2、Smartphones (landscape)
3、Smartphones (portrait)
4、iPads (portrait and landscape)
5、iPads (landscape)
6、iPads (portrait)
7、iPhone 4
8、640px显屏
9、800px显屏
10、1024显屏
11、Desktops and laptops
12、Large screens
那么有关于CSS3 Media Queries模板的相关介绍就说到这里了,最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值,您可以把他推荐给您的朋友,如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。
2012年10月09日更新
如需转载烦请注明出处:W3CPLUS
《Responsive设计和CSS3 Media Queries的结合》
《了解Responsive网页设计的三个特性》
《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上进行的的移动端开发的相关总结。
调用独立的样式表
你可能希望在不同的设备下调用不同的样式文件,方便管理或者维护,那么你可以按下面的这种方式进行调用:
<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显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
2、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
3、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
4、iPad横板显屏
@media screen and (max-device-width: 1024px) and (orientation: landscape) { /* CSS Styles */ }
5、iPad竖板显屏
@media screen and (max-device-width: 768px) and (orientation: portrait) { /* CSS Styles */ }
iPhone 和 Smartphones
@media screen and (min-device-width: 320px) and (min-device-width: 480px) { /* CSS Styles */ }
现在有关于这方面的运用也是相当的成熟,twitter的Bootstrap第二版本中就加上了这方面的运用。大家可以对比一下:
// 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采用的是网格布局,大家可以到官网查看或下载其源码进行学习。另外960gs为大家提供了一个Adapt.js也很方便的帮大家实现上述效果。感兴趣的同学可以去了解了解。
下面给大家提供几个这方面的案例,以供大家参考:
《CSS3 Media Queries案例——Hicksdesign》
《CSS3 Media Queries案例——Tee Gallery》
《CSS3 Media Queries案例——A List Apart》
更新CSS3 Media Queries模板查询
1、Smartphones (portrait and landscape)
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }
2、Smartphones (landscape)
@media only screen and (min-width : 321px) { /* Styles */ }
3、Smartphones (portrait)
@media only screen and (max-width : 320px) { /* Styles */ }
4、iPads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }
5、iPads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }
6、iPads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }
7、iPhone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }
8、640px显屏
@media screen and (max-width : 640px) { /* CSS Styles */ }
9、800px显屏
@media screen and (max-width : 800px) { /* CSS Styles */ }
10、1024显屏
@media screen and (max-width : 1024px) { /* CSS Styles */ }
11、Desktops and laptops
@media only screen and (min-width : 1224px) { /* Styles */ }
12、Large screens
@media only screen and (min-width : 1824px) { /* Styles */ }
那么有关于CSS3 Media Queries模板的相关介绍就说到这里了,最后希望大家喜欢。如果你觉得这篇文章对你有所帮助或者比较有实用价值,您可以把他推荐给您的朋友,如果你有更好的分享可以在下面的评论中直接与我们一起分享您的经验。
2012年10月09日更新
@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 */ }
如需转载烦请注明出处:W3CPLUS
相关文章推荐
- CSS3 Media Queries模板
- CSS3 Media Queries模板使用
- CSS3 Media Queries案例——Hicksdesign
- 2011年60款漂亮的免费 HTML5 / CSS3 网站模板(二)
- 婚礼策划企业CSS3网站模板
- CSS3媒体查询 Media Queries 简介
- 基于 CSS3 Media Queries 的 HTML5 应用
- CSS3动画(典型模板)
- CSS3 Media Queries 片段
- 响应式web设计之CSS3 Media Queries
- CSS3 Media Queries (转载自W3CPLUS)
- 12款高质量的响应式 HTML5/CSS3 网站模板
- <转>CSS3 Media Queries 实现响应式设计
- 27 个免费的 HTML5/CSS3 模板供下载
- CSS3 Media Queries
- 10个免费的响应式布局HTML5+CSS3模板
- 27 个免费的 HTML5/CSS3 模板供下载
- 响应式web设计之CSS3 Media Queries
- CSS3 Media Queries在标准设备上的运用