HTML/CSS - 横向和纵​​向选项

Posted 2023-03-10

【中文标题】HTML/CSS - 横向和纵​​向选项

【英文标题】：HTML/CSS - Landscape and Portrait options

【发布时间】：2016-06-30 13:23:13

【问题描述】：

我有一个 html 页面和一个链接的 css 页面，它们在链接时可以完美地显示和打印（纵向）。

当我选择横向选项时，它的显示方式相同，但由于我设置的分页符和间距，它的打印效果很差。

我的问题是，是否可以为不同的页面方向设置不同的 css 页面？如果是这样，我是否应该将其他选项添加到 HTML/CSS 链接中？

【问题讨论】：

有多个选项，查看这个帖子：***.com/questions/138422/landscape-printing-from-html

@RobbinvanderJagt 谢谢你的帮助！

没问题！希望对您有所帮助（：

【参考方案1】：

您可以使用一个 css 文件，例如，您可以为每个设备和每个方向指定 css 类：像这样：

/* Portrait and Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) 

 

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) 
  

/* Landscape */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape)