javascript - 移动响应式显示器

我正在设计一个响应移动的网站。我正在使用一段独特的代码，它允许我打开多个隐藏的ul，但是它们都向左滚动。

问题是在台式机或笔记本电脑上，它显示滚动条，因此，如果您是该网站的新手，它将知道它会滚动。但是在移动网站上，它不会显示此滚动条，因此，如果您是移动端网站的新手，您将不会知道这些项目在滚动。

我想知道是否有一种方法可以隐藏内容，直到内容宽度达到800px为止，它将显示文本以告诉人们向左滚动。或者即使有一种使滚动条可见的左或右按钮的方法，当它们在台式机，笔记本电脑和移动设备上单击或粘贴时，它们也会向左或向右滚动。

任何意见，将不胜感激。

谢谢

最佳答案

您可以使用css @media标签来调整响应值。例如，您正在使用普通的CSS类，如下所示：

.YourClass{
    display:block;
 }

它用于max-width:800px的移动宽度，您可以将其用于自适应调整：

 @media only screen and (max-width: 800px){
   .YourClass{
       display:none;
    }
 }

在此示例中，如果窗口宽度小于800px，则浏览器将使用放置在@media only screen and (max-width: 800px)中的该类并隐藏内容。如果其大于800px，则使用您的普通CSS类并显示内容。

您可以在this链接中找到用法和各种示例。