css display:none 用于响应式网页设计答案

【问题标题】：css display:none for responsive web designcss display:none 用于响应式网页设计
【发布时间】：2014-02-28 03:38:30
【问题描述】：

需要有关最佳解决方案的建议。

我正在制作 RWD 照片库页面。基本上，如果通过桌面访问，我会使用漂亮的照片，而在移动设备中访问时，我会使用 photoswipe。

我做的是这样的：

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

我使用媒体查询根据屏幕大小隐藏（显示：无）其中之一。这是一种正确的方法吗，我读到使用 display:none 不会减少加载时间。我的画廊中有数百张照片，我担心这可能会极大地影响加载时间。有什么好的解决办法吗？

【问题讨论】：

您应该考虑在服务器端确定移动端还是 PC 端，并且只向客户端发送正确的图像。否则加载时间会增加一倍（假设移动和桌面图像不同。如果它们相同，加载时间将相似，因为 HTML 大小不那么重要）。
mobile 和 desktop 是否加载了 2 组不同的图像？如果他们正在加载相同的图像集，那么 display: none 将可以正常工作而不会影响性能。
This might be of interest TLDR：两张图片都将被下载。
一篇值得阅读的好文章：选择响应式图像解决方案：mobile.smashingmagazine.com/2013/07/08/…
移动和桌面类包含 1 个图像。因此，这就像同一图像的 2 个锚标签，只是具有不同的类和 rel。如果它达到一定的屏幕尺寸，javascript或jquery有没有办法改变class和rel属性？所以我只使用一个锚标签？

标签： javascript jquery html css

【解决方案1】：

为什么需要两个标签？

<a href="large_image" class="desktop" rel="prettyPhoto"><img src="sample_image" /></a>
<a href="large_image" class="mobile" rel="external"><img src="sample_image" /></a>

你可以用一个标签来达到同样的效果。

<a href="large_image" class="desktop_and_mobile" rel="prettyPhoto"><img src="sample_image" /></a>

现在使用媒体查询，您可以在两个媒体查询中使用相同的 desktop_and_mobile 类，并在每个媒体查询中相应地定义 css 属性。

这样做的好处是您将只加载一张图片，而不是两张。

【讨论】：

【解决方案2】：

我认为您想要的是让锚标记在单击时调用正确的灯箱，因为使用响应式 css 设置 sample_img 的样式将按预期工作，不需要花哨的东西，但如果我是正确的，那么您有我认为有 3 个选择，您可以像您说的那样做，并使用媒体查询隐藏 .desktop 链接，因为图像完全相同，用户不必再次加载该图像，并设置为 display:none 用户浏览器不会渲染那个元素，所以唯一的缺点是你会有一个杂乱的 html 并且会感觉很混乱，但我认为没有其他问题。

另一种选择是使用像这样的 js 代码，但是由于通常灯箱代码将有一种方法可以将事件处理程序添加到他们找到的每个链接（使用正确的格式，比如说它的 rel），你将不得不在更改链接 rel attr 后手动触发该事件，或在此之前执行adaptLinks()，在这种情况下，在 Windows 上调整大小将不起作用，除非你按照我之前所说的去做。为此，您可以在灯箱页面上查看如何操作，他们可能列出了该方法。

这是代码

var adaptLinks = (function(){
    var $winHeight = $(window).height();
    var $lightBoxLinks = $('a.lightBox');

    return function() {  
        var isPrettyPhoto = false;

        if($winHeight < 1000){
             $lightBoxLinks
                .removeClass('desktop')
                .addClass('mobile')
                .attr('rel','external');
        } else {
             $lightBoxLinks
                .removeClass('mobile')
                .addClass('desktop')
                .attr('rel','prettyPhoto');

                isPrettyPhoto = true;
        }

        // Call the link processing method of the lightbox
        if(isPrettyPhoto) {
           $lightBoxLinks.prettyPhoto();
        } else {
          // photoSwipe method
        }

    }

})();    

$(window).resize(adaptLinks());

第三个选项是使用适用于台式机和移动设备的灯箱，我认为这是正确的方法。

祝你好运。

【讨论】：