는 jQuery를 해상도 변경 CSS를

나는 responive 디자인 뷔씨 그리고 난이이 코드를 somewone 작은 다음 980 픽셀 브라 우어가 크기를 조정하거나 브라우저가 980 픽셀거나 기능 변화보다 작은 시작될 때 내가 원하는는 jQuery를 해상도 변경 CSS를

$("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");

을 JS :

$("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0");

어떻게하면됩니까?

출처

2013-03-18 Maanstraat

예제 코드 : http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css – JasonWoof

선택자는 실제로 복잡하고 지나치게 장황합니다. 왜 그냥 $ ('camboxs .cambox : nth-child (5n)')를 사용하지 않는 것이 좋을까요? ID는 고유하므로 더 빨리 만드는 것 외에 다른 점이 없습니다. – Andy

@media only screen 
and (min-device-width : 980px) { 
    /* Styles */ 

    $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0"); 
}

출처

2013-03-18 20:20:34 user2415300

왜이 용도로 자바 스크립트를 사용하고 있습니까? 순수 CSS로 수행 할 수 있습니다 앤디 제안처럼

@media screen and (max-width: 980px), projection and (max-width: 980px) 
{ 
    /* first undo the general styles */ 
    #gradient #wrapper #camboxs .cambox:nth-child(5n):not(#gradient #wrapper #footer .box #camboxs .combox) 
    { 
     margin-right: 10px; /* replace with the original margin */ 
    } 
    #gradient #wrapper #camboxs .cambox:nth-child(2n):not(#gradient #wrapper #footer .box #camboxs .combox) 
    { 
     margin-right: 0; 
    } 
}

,이 방법은 적은 코드와 함께 할 수있다 :

#gradient #wrapper #camboxs .cambox:nth-child(5n):not(#gradient #wrapper #footer .box #camboxs .combox) 
{ 
    margin-right: 0; 
}

그리고는 미디어 쿼리를 사용합니다.

그리고 대체에 대한

는 다음 (안된) jQuery를 함께 다음과 같은 사용, 창 크기 조절에 반응 :

$(window).resize(function() { 
    if ($(window).width() <= 980) { 
     $("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right",""); 
     $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0"); 
    } else { 
     $("#gradient #wrapper #camboxs .cambox:nth-child(2n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right",""); 
     $("#gradient #wrapper #camboxs .cambox:nth-child(5n)").not("#gradient #wrapper #footer .box #camboxs .combox").css("margin-right","0"); 
    } 
});

출처

2013-03-18 20:21:04

이전 IE 버전에서는 CSS의 n 번째 자식을 허용하지 않으므로 ... – Maanstraat

@Maanstraat, 알 수 있습니다. 물론 사실입니다. 미디어 쿼리는 그 방법으로도 호환되지 않습니다. 그러나 아마도 이것을 사용하고 IE에 대한 대안을 가질 수 있습니다. 그냥 내 의견 : 당신이 js없이 뭔가를 할 수있을 때마다, 그것을해라. ;-) –

하지만 그때 나는 아직도 내가 IE를 위해 그것을 어떻게 할 수 있는지 모른다. – Maanstraat

나는 강하게 심 또는 polyfill을 사용하여 다음 미디어 쿼리 및 CSS3 선택기 등을 사용하여 조언을 것입니다. 10 년이 넘은 브라우저를 위해 코드 품질과 성능을 희생해서는 안됩니다.

그래서, 여기 IE7/8을위한 미디어 쿼리 에뮬레이터입니다 :

http://ie7-js.googlecode.com/svn/version/2.0%28beta3%29/IE8.js

여기에 IE6/7/8에 대한 CSS3의 polyfill의 : 재미를

http://selectivizr.com/

출처

2013-03-18 20:37:30

안녕하세요,이 모든 것을 위해 잘 작동하지만 Internet Explorer 8에서 브라우저를 시작하거나 크기를 조정하면 모바일 레이아웃이 변경되지 않습니다. (크롬과 다른 모든 작품은 괜찮습니까?) 내가 어떻게 고칠 수 있는지 아십니까? – Maanstraat

는 jQuery를 해상도 변경 CSS를

답변

관련 문제