css display：none for responsive web design

需要关于最佳解决方案的建议。css display：none for responsive web design

我正在做一个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不会减少加载时间。我在我的画廊中有数百张照片，我担心这可能会大大影响加载时间。有没有解决这个问题的好方法？

来源

2014-02-27 Dodong

您应该考虑在服务器端确定mobile vs pc，并且只将正确的图像发送给客户端。加载时间会更多一些（假设移动和桌面图像是不同的，如果它们是相同的，加载时间将类似于HTML大小不那么显着）。 – JCOC611

'mobile'和'desktop'加载2套不同的图片吗？如果他们加载的是同一组图像，那么'display：none'就可以正常工作，而不会影响性能。 –

[这可能是有趣的]（http://blog.cloudfour.com/css-media-query-for-mobile-is-fools-gold/）TLDR：这两个图像将被下载。 – steveax

为什么你需要两个标签？

<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属性。

这样做的好处是您只会加载一个图像，而不是两个。

来源

2014-02-27 04:40:59 SajithNair

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

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

这里是代码

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());

而且锡尔选项，是使用既为桌面和移动工作的灯箱，我认为这是做正确的方式。

祝你好运。

来源

2014-02-27 04:54:30 Zagen

css display：none for responsive web design

回答

相关问题