浏览器打印页面的时候，在css内判断是横版还是竖版，并分别设置div的样式

在CSS中，可以通过使用媒体查询（Media Queries）来判断当前浏览器的打印页面是横版（landscape）还是竖版（portrait），并根据判断结果来设置不同的样式。媒体查询允许我们根据不同的媒体类型（如屏幕、打印机、等）来应用不同的样式规则。

以下是一个基本示例，展示如何根据打印页面的布局方向设置div的样式：

@media print {
    /* 默认竖版样式 */
    div {
        width: 100%;
        height: auto;
        background-color: lightblue;
    }

    /* 当页面为横版时，改变样式 */
    @media screen and (orientation: landscape) {
        div {
            width: auto;
            height: 100%;
            background-color: lightgreen;
        }
    }

    /* 当页面为竖版时，改变样式 */
    @media screen and (orientation: portrait) {
        div {
            width: 100%;
            height: auto;
            background-color: lightcoral;
        }
    }
}

在这个例子中，我们首先为所有打印设备设置了一个默认的竖版样式。然后，我们使用了嵌套的媒体查询来覆盖横版时的样式。由于打印设备并不支持orientation属性，因此通常情况下我们会根据打印纸张的尺寸来判断是横版还是竖版，例如使用宽度和高度来进行判断。

需要注意的是，上述的`screen and (orientation: landscape)`查询在打印媒体类型中实际上不会起作用，因为打印媒体通常不支持屏幕特有的属性如orientation。不过，我们可以使用宽度和高度来模拟这个效果：

@media print {
    /* 默认竖版样式 */
    div {
        width: 100%;
        height: auto;
        background-color: lightblue;
    }

    /* 当页面为横版时，即宽度大于高度时，改变样式 */
    @media all and (min-width: 900px) and (max-width: 1200px) {
        div {
            width: auto;
            height: 100%;
            background-color: lightgreen;
        }
    }

    /* 当页面为竖版时，即高度大于宽度时，改变样式 */
    @media all and (min-width: 1200px) and (max-width: 900px) {
        div {
            width: 100%;
            height: auto;
            background-color: lightcoral;
        }
    }
}

在这里，我们使用了`min-width`和`max-width`来模拟横版和竖版的打印样式。请根据实际打印纸张尺寸调整宽度和高度的值。