Question

我创建了第一个换油业务网站。 1stopexpresslube.com在首页我有一个蓝色的横幅，上面有商业名称，营业时间，电话和地址。我在所有后续页面上删除了横幅，因为在移动设备上查看时，您无法告诉您已切换页面，因为您只能看到横幅和移动页面上的菜单按钮，这些按钮不会更改。我想出的一个快速解决方案是在初始index.html页面上留下横幅，然后在我删除横幅的所有其他页面上留下横幅。然后，我想到了我是否可以更改我的网站，以便在第2，第3，第4等页面上，我可以将蓝色的横幅仅显示在较大的设备上。所以在手机上横幅不会出现，就像现在一样，但是当我在桌面上观看时，那些第二，第三，第四页等都显示了横幅。我尝试了不透明度元素，因此它会显示0，但它只是使横幅消失但仍占用空间。我希望这个空间崩溃。我也尝试过可见性：崩溃;并隐藏;他们似乎都和不透明度一样：0;有没有办法让横幅从移动设备上的文档流中移除，然后重新出现并在更大的屏幕上占用空间？

Answer 1

如上所述，您可以在CSS中使用媒体查询，这样您就可以为不同尺寸的屏幕设置不同的样式。

/* Large desktop */
@media (min-width: 1200px) {
    .banner{ width:123px; display:block; }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
    .banner{ display:none; }
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

我怎样才能制作我的横幅＆＃34;在我的网页上隐藏，在移动设备上，但重新出现在更大的设备上？

1 个答案: