1
回答
CSS3 动画媒体查询(Animated Media Queries)
滴滴云服务器,限时包月0.9元,为开发者而生>>>   


网站设计的一个新趋势是使用media queries(媒体查询),这是因为如今有大量的设备可以访问因特网,因此所有的网站都需要适应各种设备。responsive design(响应设计)应运而生。它可以发现用户使用的是什么设备,并调整设计内容以适应设备。

例如,桌面机的屏幕分辨率远远大于智能手机,因此当用户使用桌面机的时候,我们可以在屏幕上展示更多的内容并可以增加元素的宽度。如果用户使用屏幕尺寸较小的智能手机,我们就需要重新安排一些元素以适应屏幕。

这篇文章将会介绍media queries,我们提供了一些代码片段(你可以使用它们来开始media queries的编写),并向你展示怎样结合CSS transitionmedia queries 以实现元素的动画功能。

什么是Media Queries

CSS3给我们带来了许多有助于web设计的新功能,其中之一便是提高了网站可用性的Media Queries

Media Queries用于找出屏幕当前的最大分辨率,并允许你根据分辨率使用不同的CSS。这个特点叫做responsive design,它能找出用户当前使用的分辨率并通过Media Queries对其做出响应。

过去,我们让网站适应各种分辨率的唯一方法就是使用fluid page design(流体网页设计),但是media queries具有更多的功能。

通过使用media queries 你可以在小屏幕上隐藏侧边栏以展示更多的内容,也可以在大屏幕上增大字体,这些都无法用fluid page design来实现。

media Queries的替换方案

如果我们想让网站适应所有的设备,却又不想使用media queries,那还有别的选择方案吗?

 

我们可以使用mobile apps,这是一个好方法,你可以创建一些非常漂亮的apps,通过它用户可以直接在手机上访问你的网站,当网站有更新的时候还可以产生提醒。问题是创建 app比使用media queries需要更多的资源。不同的设备操作系统也是一个问题,如果你想创建一个app,你需要为iOS,Android,Windows Mobile,Blackberry等等各创建一个,而media queries能让你的网站适应任何设备。


另外一种替换方案是使用jQuery Mobile,它创建的基于HTML5的网站能适应大多数主流的移动设备。问题是它还需要在你的网站上维护另外一个系统。

还有一个与jQuery Mobile类似的方案是使用服务器端来找出用户使用的是什么浏览器,从而根据浏览器使用不同的样式表。问题仍然是你需要维护大量的CSS文件版本以适应不同的浏览器。

Media queries技术可以让你只需要维护一份原始的CSS文件,而让它能在所有最新的浏览器和移动设备上使用。它很容易维护,也能由现有的web设计师开发。

Media Queries 的引用

这里有一些代码片段来帮助你开始编写自己的media queries。这些代码是我以前贴在Media Queries Boilerplate上的。


/*Smartphones (portrait and landscape) ———– */

@media only screen

and (min-width : 320px)

and (max-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ———– */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ———– */

@media only screen

and (max-width : 320px) {

/* Styles */

}

/* iPads (portrait and landscape) ———– */

@media only screen

and (min-width : 768px)

and (max-width : 1024px) {

/* Styles */

}

/* iPads (landscape) ———– */

@media only screen

and (min-width : 768px)

and (max-width : 1024px)

and (orientation : landscape) {

/* Styles */

}

/* iPads (portrait) ———– */

@media only screen

and (min-width : 768px)

and (max-width : 1024px)

and (orientation : portrait) {

/* Styles */

}

/* Desktops and laptops ———– */

@media only screen

and (min-width : 1224px) {

/* Styles */

}

/* Large screens ———– */

@media only screen

and (min-width : 1824px) {

/* Styles */

}

/* iPhone 4 ———– */

@media

only screen and (-webkit-min-device-pixel-ratio : 1.5),

only screen and (min-device-pixel-ratio : 1.5) {

/* Styles */

}

CSS的动态改变

通过使用CSS我们可以为不同的元素以及这些元素的不同属性增加animation(动画效果)。

使用media queries的主要目的之一是改变元素的大小以适应网页。众所周知,改变大小的过程可以产生动画效果,我们可以使用如下代码为CSS的Width 和 Height属性添加动画。


/* webkit */

-webkit-animation-property: -webkit-width;

-webkit-animation-property: -webkit-height;

-webkit-transition-duration: 1s;

/* moz */

-moz-animation-property: -moz-width;

-moz-animation-property: -moz-height;

-moz-transition-duration: 1s;

/* opera */

-o-animation-property: -o-width;

-o-animation-property: -o-height;

-o-transition-duration: 1s;

在你的media queries元素中添加以上代码,从而在改变大小时产生动画效果。

使用了Animated Media Queries技术的网站

下面的网站向你展示了animated CSS3 media queries的功能。

CSS-Tricks

 

CSS Tricks

Trent Walton

 

Trent Walton

Naomi Atkinson


Naomi Atkinson

Converge


Converge

A Different Design


A Different Design

The Sweet Hat Club


The Sweet Hat Club

Lapse


Lapse

看看上面的这些网站,记得改变一下浏览器的宽度看看动画效果

怎样在Media Queries中增加动画效果

在以上的部分你看到了两段代码,一段用于引用media queries,另一段用于增加动画效果,现在我们把它们结合起来创建动态的media queries

首先选一个设备用于展示改变后的布局,在这里我们使用的是智能手机。我们将改变main元素和sidebar(侧边栏)的宽度,使它们相等,从而会从左右排列变为上下排列。

.main{

     width:800px;

     display:inline-block;

}

.sidebar{

     width:300px;

     display:inline-block;

}

/*Smartphones (portrait and landscape) ———– */

@media only screen

and (min-width : 320px)

and (max-width : 480px) {

.main{

    width:480px;

}

.sidebar{

    width:480px;

}

}

如上所见,这个简单的布局由一个main div以及一个sidebar div组成。在桌面机上,它们左右排列,共占据1100px的宽度。但是由于智能手机没有这么宽的空间,所以我们将每个元素的最大宽度设为480px,从而使之上下排列。

现在我们可以添加以下代码,从而在改变元素尺寸的时候产生动画效果。


.main{

     width:800px;

     display:inline-block;

}

.sidebar{

     width:300px;

     display:inline-block;

}

/*Smartphones (portrait and landscape) ———– */

@media only screen

and (min-width : 320px)

and (max-width : 480px) {

.main{

    width:480px;

/* webkit */

-webkit-animation-property: -webkit-width;

-webkit-animation-property: -webkit-height;

-webkit-transition-duration: 3s;

/* moz */

-moz-animation-property: -moz-width;

-moz-animation-property: -moz-height;

-moz-transition-duration: 3s;

/* opera */

-o-animation-property: -o-width;

-o-animation-property: -o-height;

-o-transition-duration: 3s;

}

.sidebar{

    width:480px;

/* webkit */

-webkit-animation-property: -webkit-width;

-webkit-animation-property: -webkit-height;

-webkit-transition-duration: 3s;

/* moz */

-moz-animation-property: -moz-width;

-moz-animation-property: -moz-height;

-moz-transition-duration: 3s;

/* opera */

-o-animation-property: -o-width;

-o-animation-property: -o-height;

-o-transition-duration: 3s;

}

}

总结

以上讲述了怎么在media queries中创建动画效果,现在我们讨论一下为什么要这么做。主要原因之一是当屏幕尺寸改变的时候动画效果能给人更好的体验,并且使用CSS 动画可以显得你技术牛逼。

但是大多数人不会在浏览网页的时候去改变浏览器大小,那么这有什么好处呢?其实该技术的主要使用场景是智能手机或者平板的横竖屏切换,这往往会改变屏幕尺寸。当屏幕尺寸改变的时候你就可以在media queries中增加动画效果了。

原文链接

举报
虫虫
发帖于6年前 1回/2K+阅
顶部