CSS3在改善响应式网站用户体验中的应用

在互联网成为人们生活一部分的时代，伴随着技术的快速更新，网络技术的应用也在满足着用户的更高体验需求，用户在浏览网站时从视觉体验到交互体验都显示出了更高更丰富的要求。CSS3作为CSS（层叠样式表）的第三个版本，是对CSS 规范的一个很大改善和增强，既为网站前端开发者提供了易于开发的网站浏览功能，也为使用者提供了更好的用户体验， CSS3中的媒体查询技术、动画技术等在改善网站用户体验方面已经得到了很好的应用。

1. CSS3媒体查询在响应式网站中的应用

随着移动互联网的迅猛发展，用户浏览网站的设备也在不断丰富，能够针对不同大小的屏幕进行网站浏览成为现代web应用的趋势，响应式设计在网站中的应用越来越多，响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，目前很多商业类网站都提供的是响应式网站，为用户的购物行为提供便利。CSS3提供的媒体查询功能，其语法结构及用法：

@media设备名only（选取条件）not（选取条件）and（设备 选取条件），设备二{sRules} 

以此可以判断设备横竖屏、设备类型、设备宽高以及设备 像素比，例如判断设备宽高的代码： 

@media screen and(max-width:320px){ .logo{height:40px} .header{height:40px} } 

在使用CSS3进行响应式网站设计中，网站内容方面的原则是在较小屏幕的设备上，从上向下根据内容优先级依次显示，网站视觉与交互体验的原则是设备不同体验一致，保证用户在浏览网站时的熟识感受。 

2. CSS3的2D动画和3D变换在图片相册中的应用

在网站中进行图片展示的应用实例非常多，例如企业产品宣传展示、营销型网站的商品图片展示，用户在浏览图片的过程中如果能够在全部平铺出来的缩略图中，通过鼠标悬浮在某一张图片获取较大尺寸的图片来了解更多的信息，将会给用户带来更良好的用户体验，如www.booking.com网站，CSS3的2D动画功能就能够实现，它的优势在于不需要编写事件接口，直接使用浏览器提供的事件接口（TransitionEnd，AnimationStart， AnimationIteration，AnimationEnd）即可，目前这些事件接口需要针对浏览器添加前缀，例如webkit内核的浏览器，提供的事件接口为webkitTransitionEnd，webkitAnimationStart，webkitAnima⁃ tionIteration，webkitAnimationEnd。CSS3的2D动画应用的技术 有translate()、rotate()、scale()等方法，以及transition过渡属性。 上面提到的图片展示实例的相关实现代码：

img{ width:150px; height:150px; -moz-transition:width1s,height1s,transform1s; -webkit-transition:width1s,height1s,transform1s;}

#pic:hover{ width:800px; height:800px; z-index:10; -moz-transform:translate(0px,-170px); -webkit-transform:translate(0px,170px);}

CSS3中的3Dtransform变换效果更是将图片的展示置于模拟三维空间，为用户的浏览体验提供了更加真实的环境，主要涉及rotateX()、rotateY()、rotateZ()三个方法和perspective属性，相关代码如下：

perspective:**px;

transform-style:preserve-3d;

transition:transform1s;

img:transform:rotateY(***deg)translateZ(***px) 

3. CSS3在网站导航设计中的应用

网站导航是用户浏览网站的重要交互区域，因此对导航进行一些微小的交互动画能有效提升一定的用户体验，CSS3在网站导航方面的应用一方面是仅使用CSS3来实现，配合bor⁃der-radius、transition、transition-delay等主要的技术可以制作出过渡效果非常好的下拉式导航，相关代码如下：

transition:0.5s;

transition-delay:0.5s;

background-image:-moz-linear-gradient(-90deg,rgba(255, 255,255,0.5),rgba(255,255,255,0));

另一方面是将CSS3与JQuery技术两者结合制作的导航， 可以实现侧栏折叠展开式导航、垂直固定式导航等效果，在形式和交互方面都能够给用户带来更多的用户体验，例如汽车网 站http://www.lexus.eu/car-models/nx/nx-house/#side-menu中的侧栏导航，对页面的充分利用使得用户能够有更多的空间浏览汽车方面的信息。

总之，CSS3在CSS2.1的基础上拓展了很多强大的功能，为现代网站设计应用提供了更多方法，满足网站前端的设计开发需求，设计者通过应用CSS3的圆角、阴影、渐变、变换、动画以及媒体查询等技术，为用户提供了更加美观、更加良好的用户体验界面，CSS3的新特性降低了网站开发的复杂度，网站在性能上得到了很大进步，用户浏览网站的速度以及交互等多方面的体验都有很多改善，随着CSS3技术的进一步发展完善，网站用户体验将得到更多的提高与实现。