【问题标题】:override responsive styles for printing覆盖响应式打印样式
【发布时间】:2016-09-21 13:22:55
【问题描述】:

我们在 SASS 中使用断点来实现响应。桌面样式从 min-width:960px 开始。不幸的是,当我们打印页面时,浏览器使用平板电脑样式 - 换句话说,它“认为”打印页面的宽度小于 960 像素。我知道如何编写打印样式来接管,但我们只想使用桌面样式进行打印,而不必将它们复制到媒体打印 CSS 查询中。

有没有办法告诉浏览器在打印时使用桌面样式?

【问题讨论】:

    标签: css printing sass media-queries


    【解决方案1】:

    使用

    @media print {
        //Your CSS
    }
    

    您可以在http://www.w3schools.com/css/css3_mediaqueries.asp阅读有关@media print 以及如何使用它的信息

    一个应用示例可以是

    @media print {
        .header {
            display:none!important;
        }
    }
    

    【讨论】:

    • 问题不在于如何进行打印样式,而在于如何克服打印样式回退到平板大小的断点样式这一事实,然后在此之上应用打印样式。 OP 希望使用以桌面断点为基础的打印样式,然后在此基础上应用打印样式。我有同样的问题,所以我还没有答案。
    • 我确实回答了这个问题。在打印规则的每一行末尾使用!important 标签。
    • hellojason 是正确的——问题是如何告诉 print 使用哪个断点,而不是为整个站点编写新的打印样式。我认为像素密度或 dpi 设置可能存在问题,但迄今为止,我还无法让它工作。任何想法都非常感谢。
    • 很公平,你能提供一个活生生的例子吗?
    猜你喜欢
    • 1970-01-01
    • 2016-04-29
    • 2017-11-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-07-27
    • 2013-03-15
    相关资源
    最近更新 更多