Question

使用Skeleton CSS考虑以下HTML：

<html>
  <head>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/skeleton.css">
  </head>
  <body class="container">
    <div class="row">
      <section class="three columns"> 
        ...
      </section>
      <section id="content" class="nine columns">
        ...
      </section>
    </div>
  </body>
</html>

我想修改CSS，以便在打印页面时隐藏three columns部分，nine columns部分跨越整个宽度。

前者可以通过媒体查询设置display到none来完成。

如何将content部分类从nine columns更改为twelve columns，以便使用整个页面宽度打印内容区域？或者在使用Skeleton CSS时可能有更好的方法吗？

Answer 1

一种可能的方法是覆盖.nine类中定义的宽度，类似这样。

@media print {
    .nine.columns {
        width: 100% !important;
    }
}

基于媒体查询/打印时更改HTML元素类名称

1 个答案: