如何在大屏幕上不显示网站内容 - How to not display website content on larger screen

How to not display website content on larger screen

本文关键字：显示网站大屏幕 | 更新日期: 2023-09-27

我不希望在大于1600px的屏幕上显示网站内容。对于较大的屏幕尺寸，我想只显示一些图像显示一些消息。我该怎么做呢?

首先认真地问自己为什么，我相信在你的用例中有一个很好的理由，但是要确定，然后:

使用媒体查询和显示值:

@media (max-width: 1600px) {
    /* site styles in here */
    .big-image {
        display: none;
    }
}
@media (min-width: 1601px) {
    .page-container {
        display: none;
    }
    .big-image {
        display: block;
        /* more image styles here */
    }
}

这里.page-container有你想要隐藏的一切。.big-image代表你的形象。显示属性的应用取决于视口的大小。