Question

因为很多时候移动友好屏幕尺寸和网站完整版本之间的实际元素不同，我发现自己想在两个独立的div中只有两个版本的网站。一旦设置了两个版本，我就会使用CSS来显示/隐藏正确的版本。这种做法有什么问题吗？

@media only screen and (max-width: 767px) {   /* phones & small screens */
    #desktop{
        display:none;
    }

    #mobile{
        display:block;
    } 
}

@media only screen and (min-width: 768px) {  /* tablets, desktops, & larger screens */
    #desktop{
        display:block;
    }

    #mobile{
        display:none;
    } 
}

<div id="desktop">
    Desktop Site
</div>

<div id="mobile">
    Mobile Site
</div>

Answer 1

推荐的方法是尽可能多地重用，为您的首选版本创建一个样式表，然后使用媒体查询隐藏/显示和修改所有内容。这将防止重复，并允许你坚持旧的格言：不要重复自己。但是，有时候某些东西的两个版本并不一定是坏的，但同样，你应该对特定元素的媒体查询这样做，因为你不想重复自己（具有讽刺意味的是，我刚刚做过）。

正如评论中所提到的，现在使用具有百分比的可伸缩布局非常好，并且由于box-sizing: border-box属性，因此创建全宽网站而不牺牲对框的填充的控制更容易使用，使一切看起来很好和一致很容易。

如果您的移动网站与您的主网站完全不同，最好将它们分开并将其放在不同的网址上，这样可以减少移动浏览器和桌面浏览器的负载，这总是一件好事。< / p>

这是实现响应式设计元素的错误方法吗？

1 个答案: