时间戳

首页 > 解决方案 > 打印时响应页面转到移动设备

html - 打印时响应页面转到移动设备

问题描述

打印时响应页面会转到移动设备，而且效果不佳。

这是使用的 HTML 和 CSS：

HTML：

<table class="addr-table">

 <!-- table content -->

</table>
<input type="button" value="Print" onclick="window.print()" />

CSS：

 <style>
        @import 'https://fonts.googleapis.com/css?family=Open+Sans:600,700';
    
    * {font-family: 'Open Sans', sans-serif;}
    .addr-table {
      margin: 5px 5px 5px 5px ;
      min-width: 240px;
      max-width: 100%;
      border-collapse: collapse;
      empty-cells: hide;
    }
    .bottom-table {
      margin: 5px 5px 5px 5px ;
      min-width: 200px;
      max-width: 10%;
      border-collapse: collapse;
      
    }
    
    .addr-table tr:first-child {
      border-top: none;
      background: #428bca;
      color: #fff;
      text-align: center;
    }
    
    .addr-table tr {
      border-top: 1px solid #ddd;
      border-bottom: 1px solid #ddd;
      background-color: #f5f9fc;
    }
    
    .addr-table tr:nth-child(odd):not(:first-child) {
      background-color: #ebf3f9;
    }
    
    .addr-table th {
      display: none;
    }
    
    .addr-table td {
      display: block;
    }
    
    .addr-table td:first-child {
      margin-top: .5em;
    }
    
    .addr-table td:last-child {
      margin-bottom: .5em;
    }
    
    .addr-table td:before {
      content: attr(data-th);
      font-weight: bold;
      width: 120px;
      display: inline-block;
      color: #000;
    }
    
    .addr-table th,
    .addr-table td {
      text-align: left;
    }
    
    .addr-table {
      color: #333;
      border-radius: .4em;
      overflow: hidden;
    }
    
    .addr-table tr {
      border-color: #428bca;
    }
    
    .addr-table th,
    .addr-table td {
      padding: .5em 1em;
    }
    @media screen and (max-width: 601px) {
      .addr-table tr:nth-child(2) {
        border-top: none;
        
        
      }
    }
    @media screen and (min-width: 600px) {
      .addr-table tr:hover:not(:first-child) {
        background-color: #d8e7f3;
        text-align: center;
      }
      .addr-table td:before {
        display: none;
      }
      .addr-table th,
      .addr-table td {
        display: table-cell;
        padding: .25em .5em;
      }
      .addr-table th:first-child,
      .addr-table td:first-child {
        padding-left: 0;
      }
      .addr-table th:last-child,
      .addr-table td:last-child {
        padding-right: 0;
      }
      .addr-table th,
      .addr-table td {
        padding: 1em !important;
      }
    }
    
 
    }

    @media print{
   .hidden-print{
       display:none;
   }
}

    
      </style>

有没有办法防止某些 CSS（@import）在打印时生效？我希望它以普通 PC 模式打印以打印为 A4 纸而不是移动视图。

打印时如何使其不进入响应/移动模式？

我想把它放在一个没有响应式 CSS 的不同模板中，但是将点击转移到该页面将需要一些我无法做到的 JS 魔法，我只是想制作一个 Django 应用程序并陷入 CSS 和 JS 中。好的，我在这里写所有这些是因为我无法提交，我得到“看起来您的帖子主要是代码；请添加更多详细信息”。

标签： htmlcssfrontend

解决方案

有没有办法防止某些 CSS (...) 在打印时生效？

多种方式 - 每个声明都可以专用

<link rel="stylesheet" href="style.css">                    <!-- all media -->
<link rel="stylesheet" href="screen.css" media="screen">    <!-- only screen -->
<link rel="stylesheet" href="print.css" media="print">      <!-- only print -->

@import "https://..." screen;
@import "https://..." screen and (min-width: 600px);
@import "https://..." print;

@media only screen and (min-width: 600px) { ...
@media only print{ ...

选择其中一项或多项。
由于 css 作为级联工作，因此多个文件声明顺序很重要 - 如果选择器重复，则规则将被覆盖。
将始终使用非专用 css 文件。

推荐阅读