media queries

CSS3 Media Queries模板

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

CSS制作Facebook的媒体对象

前面在《OOCSS——核心篇》一文中有简单的提到Facebook的媒体对象(有的地方称作为“信息状态块”)的制作。那么今天老话重谈,主要使用不同的几种结构来制作这个媒体对象效果:

我们把上图拆分细化一下,可以划成下图的样子:

根据上图我们就可以轻松的写出需要的HTML结构。

HTML Markup:

Responsive设计和CSS3 Media Queries的结合

Responsive这个词,这段时间公司老是在提,致使我大量的查找相关方面的资料学习。总算是能做出小小的东西出来,也让自己有点满足感。今天我想和大家一起来学习web designer wall的《Responsive Design with CSS3 Media Queries》教程。从这篇教程中,我们可以学会如休何使用CSS3的Media Queries属性来实现Responsive设计。

CSS3 Media Queries案例——Tee Gallery

今天继续讲有关于CSS3 Media Queries案例,前面介绍的《CSS3 Media Queries案例——Hicksdesign和《CSS3 Media Queries案例——A List Apart》都是有关于页面的应用,而今天的我要说的案例Tee Gallery是涉及产品列表布局的应用。换句话说就是让产品列表页面如何应用流体布局结合CSS3的Media Queries,制作出在不同媒体条件和媒体介质下的页面风格。别的先不说,和大家一起目睹一下Tee Gallery网站在不同屏幕下的显示风格,如下图所示:

CSS3 Media Queries案例——A List Apart

有关于CSS3 Media Queries的介绍,现在在网络上铺天盖地了,在《CSS3 Media Queries》中主要介绍了一些关于CSS3 Media Queries的理论知识,而在《CSS3 Media Queries案例——Hicksdesign》中介绍关于CSS3 Media Queries应用的第一个案例,今天和大家一起来看有关于CSS3 Media Queries实战中的第二个实例A List Apart网站。看看这个网站是如何应用CSS3 Media Queries的。

CSS3 Media Queries案例——Hicksdesign

前面在《CSS3 Media Queries》介绍了一些CSS3的Media Query的理论知识,今天开始主要针对CSS3 Media Query进行一些实际案例的分析,从实际案例中来进一步学习和运用CSS3的Media Query,从而好让大家在自己的项目中更好的应用Media Query。

CSS3 Media Queries

Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码:

  <link href="css/reset.css" rel="stylesheet" type="text/css" media="screen" />
  <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
  <link href="css/print.css" rel="stylesheet" type="text/css" media="print" />

或者这样的形式:

页面

返回顶部