网站设计的一个新趋势是使用media queries（媒体查询），这是因为如今有大量的设备可以访问因特网，因此所有的网站都需要适应各种设备。responsive design（响应设计）应运而生。它可以发现用户使用的是什么设备，并调整设计内容以适应设备。
例如，桌面机的屏幕分辨率远远大于智能手机，因此当用户使用桌面机的时候，我们可以在屏幕上展示更多的内容并可以增加元素的宽度。如果用户使用屏幕尺寸较小的智能手机，我们就需要重新安排一些元素以适应屏幕。
这篇文章将会介绍media queries,我们提供了一些代码片段（你可以使用它们来开始media queries的编写），并向你展示怎样结合CSS transition 与media 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类似的方案是使用服务器端来找出用户使用的是什么浏览器，从而根据浏览器使用不同的样式表。问题仍然是你需要维护大量的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
Trent Walton
Naomi Atkinson
Converge
A Different Design
The Sweet Hat Club
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中增加动画效果了。
沒有留言
張貼留言