移动响应式显示器

Question

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

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

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

任何意见，将不胜感激。

谢谢

Answer 1

您可以使用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类并显示内容。

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