CSS 디스플레이 : 응답 성있는 웹 디자인을위한 아무 것도 없음

Question

이 문제를 해결하는 가장 좋은 방법에 대한 조언이 필요합니다.

나는 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은로드 시간을 줄이지 않습니다. 내 갤러리에 수백 장의 사진이 있는데로드 시간에 큰 영향을 줄 수 있다고 걱정됩니다. 이것에 대한 좋은 해결책이 있습니까?

Answer 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 속성을 정의 할 수 있습니다.

이렇게하면 두 개가 아닌 하나의 이미지 만로드된다는 장점이 있습니다.

Answer 2

나는 당신이 원하는 것은 클릭했을 때 올바른 라이트 박스를 호출하는 앵커 태그를 가지고 있다고 생각한다. 예상되는대로 반응하는 CSS로 sample_img를 스타일링하는 것은 멋진 일을 할 필요가 없기 때문이다.하지만 내가 틀렸다면 제 생각에는 3 가지 선택 사항이 있습니다. 미디어 쿼리를 사용하여 .desktop 링크를 숨기고 말한 것처럼 할 수 있습니다. 이미지가 정확히 동일하므로 사용자가 이미지를 다시로드해야하고 사용자 브라우저가 display:none으로 설정됩니다. 그 요소를 렌더링하지 않으므로, 유일한 단점은 혼란스러워하는 html을 보게 될 것이고, 그것은 진흙 투성이라고 느낄 것입니다. 그러나 제 생각에는 다른 걱정거리가 없습니다.

또 다른 옵션은 js 코드를 사용하는 것입니다. 라이트 박스 코드는 일반적으로 라이트와 관련된 모든 링크에 이벤트 처리기를 추가하는 방법을 사용하므로 적절한 형식 지정을 사용하면 rel을 사용할 수 있습니다. 당신이 링크 rel attr을 변경 한 후에 해당 이벤트를 수동으로 트리거하거나, 전에 일어난 일이 일어나지 않는 한 adaptLinks()을 실행하십시오. 이를 위해 라이트 박스 페이지에서 수행하는 방법을 확인할 수 있습니다. 여기

가 코드

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

그리고 THIR 옵션, 데스크톱과 모바일 모두에서 작동하는 라이트 박스를 사용, 난 그게 옳은 방법이라고 생각합니다.

행운을 빈다.