如何写出高质量的媒体CSS样式表？

随着移动设备和多平台的普及，媒体网站已经成为人们获取信息的重要渠道之一，而CSS样式表则是媒体网站不可或缺的一环。媒体网站的样式表要求文艺、美观、扁平而又不失分明度。在这篇文章中，我们将从各种角度总结出一些写出高质量的媒体CSS样式表的经验。

一、页面整体布局

整体布局是网页设计的基础，这一步不好，后面的排版难以得到优化。我们需要根据页面的特点来选取合适的布局方式，例如单栏式、双栏式、多栏式等。单栏式布局通常用于热点新闻和专题报道，这种布局优化了阅读体验；双栏式布局通常用于全面性的报道，可以通过左栏导航进一步分化；多栏式布局用于囊括大量信息的网站，例如门户网站。

.container {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.content {
  float: left;
  width: 80%;
}

.sidebar {
  float: right;
  width: 20%;
}

有了上面代码的例子，我们可以实现基本的页面布局，其中，容器的宽度一般设为1200px，具体视情况而定。为了实现响应式布局，可以使用百分比而非px单位表示页面元素的宽度。

二、排版与文字设计

媒体网站依靠文字来传递信息。为了让用户在阅读时能够舒适、流畅的获取信息，我们需要设计好排版。排版的一些要素包括：字体、字号、行高、字间距、段间距、颜色、对齐方式等。在文本排版中尽量不要使用绝对单位，而是采用相对单位，比如em、rem、%等。

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
}

h1, h2, h3, h4, h5, h6 {
  margin: 1.5rem 0 1rem;
  line-height: 1.2;
  font-weight: 700;
  color: #333;
}

p {
  margin: 1.5rem 0;
}

在上面代码的例子中，我们定义了常用的网页字体，也可以采用Web Font。如果你采用Web Font，需要对字体进行优化以提高加载速度。通过定义字体大小、行距和段距，我们可以让文章更具可读性，同时也可以改变排版的情境。需要注意的是，要很好地支持中英文混排，建议使用line-height属性对文字的行高进行设置。

三、图片与多媒体元素

媒体网站离不开图片和多媒体元素。为了保证流畅性，我们需要对这些元素进行优化。对于图片，我们可以优化大小和格式，减少请求次数、采用响应式图片等。另外，如果图片被压缩后的显示效果不佳，我们可以使用SVG格式的矢量图象。

img {
  max-width: 100%;
  height: auto;
}

在上面代码的例子中，我们使用max-width:100%来设置图片的最大大小可以充满父元素。

在添加视频和音频元素时，一定要引入第三方插件如Video.js或MediaElement.js。该插件可以做到跨浏览器兼容，同时具备更好的样式效果。为了保持页面的流畅，我们建议在网站首页不要开放自动播放机制，而是提供用户可控的播放机制。需要注意的是，在页面自动播放音频时，用户体验会变得很差，特别是在移动设备上。

video {
  display: block;
}

audio {
  display: none;
}

在上面代码的例子中，我们可以通过display来控制多媒体的显示效果。

四、交互与动画效果

在媒体网站中添加一些交互和动画效果往往会让用户在页面上有更好的体验。例如，当用户滚动页面时内容随之移动，或者在页面上添加一些特效，使得用户使用上更加流畅。为此，我们引入了基于jQuery开发的动态效果插件Animate.css和WOW.js。

  

  
  
   
标题
  
   
内容

  

在上面代码的例子中，我们使用Animate.css的效果来给box添加动态切换效果，

@media (max-width: 768px) {
  .col-sm-4 {
    width: 100%;
}