Question

我最近注意到，当你低于360px时，我正在设计的网站看起来非常糟糕。当使用媒体查询低于360px时，我能够对网站进行css更改。但是，我想知道是否有办法制作自定义隐藏和可见选项？

我的目标是通过隐藏当前内容并使一组专门针对该尺寸设计的新内容可见，让网站在较小的分辨率上看起来很好。

我的第二个问题是，是否值得这样做。在媒体查询中使用CSS基本上更改整个网站会更好吗？另一种选择是创建一个新页面，并且如果用户的屏幕尺寸小于，则将用户路由到该页面。 640x360像素。我不确定什么是良好的做法，任何建议/帮助将不胜感激！

Answer 1

使用bootstrap网站上的自定义来定义新的断点

或者这个：

@media only screen and (max-width: 360px) {
    .xxs-hidden{
        display: none;//this is your own customised hidden class maybe?
    }


}

如果您想创建不同的页面并且您不想使用媒体查询来检查每个屏幕分辨率，您可以使用jQuery检查屏幕大小并导航到该屏幕大小的html文件：

<script>
    if (screen.width <= 360) {
    window.location.replace("http://www.theExtraExtraSmallPage.html");
}
</script>