移动优先设计和印刷

Question

我有一个带有四个CSS文件的移动优先网站：

1. 主CSS-@media全部和（最小宽度：240像素）
2. 小型移动设备-@media全部（最小宽度：481px）
3. 大型移动设备-@media全部和（最小宽度：769px）
4. 桌面-@media全部和（最小宽度：981px）

当我尝试从桌面上的网站打印某些内容时，在打印预览上它实际上看起来像是移动版本。 即使在风景中，显然也没有足够的像素来加载最小宽度981px。 那是第一问题。

第一题是通过在最小宽度中添加单词“ device”来解决的，但是第二题，您在台式机上看不到移动设计，因此我需要使其可见。

有任何想法吗 ？

Answer 1

创建一个@media print部分。

Answer 2

您只需要像上面提到的那样设置corect的大小和样式，就可以像这样打印不同的点：

@media print and
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



@media print {

}