1
그래서 기본적으로 클라이언트 요청시 미디어 쿼리를 사용하여 반응적으로 웹 사이트를 프로그래밍하기 시작했습니다. 놀랍게도 내 클라이언트가 웹 사이트가 IE7에서 반응 적이어야한다는 것을 알았을 때?!?!?! 그래서 jQuery 플러그인을 개발했습니다.이 플러그인을 사용하면 중단 점을 플러그인 한 다음 사용중인 장치를 나타내는 클래스 또는 ID를 본문에 추가 할 수 있습니다. 여기에 플러그인 코드입니다 : 당신이 기본값에게 그들이 그냥 플러그인을 인스턴스화하는 방법을 떠날 경우에 따라서 본질적으로반응 형 웹 사이트의 경우 미디어 쿼리 대신 접두사 ID 태그를 사용하는 것이 좋지 않습니까?
(function ($) {
$.fn.windowDimensions = function(options) {
var config = $.extend({
attr : 'id',
largeDesktop : 1600,
smallDesktop : 1024,
tablet : 768,
largePhone : 640,
smallPhone : 480,
smallPhoneName : 'smallPhone',
largePhoneName : 'largePhone',
tabletName : 'tablet',
smallDesktopName : 'smallDesktop',
largeDesktopName : 'largeDesktop'
}, options);
var w = 0, className = '';
$(this).on('resize ready', function() {
w = $(this).width();
if(w <= config.smallPhone) {
className = config.smallPhoneName;
} else if(w <= config.largePhone && w > config.smallPhone) {
className = config.largePhoneName;
} else if(w <= config.tablet && w > config.largePhone) {
className = config.tabletName;
} else if(w <= config.smallDesktop && w > config.tablet) {
className = config.smallDesktopName;
} else {
className = config.largeDesktopName;
}
$('body').attr(config.attr, className);
});
};
}) (jQuery);
, 그것은 iPad에서 body 태그에 id="tablet"을 적용됩니다. 나는 이것이 아마 최고의이나 일을하는 기존의 방법이 아니다 알고
.wrap { ... }
#tablet .wrap { ... }
#largPhone .wrap { ... }
#smallPhone .wrap { ... }
을하지만 난 어떤 다른 방법을 알고하지 않습니다 내가 요소의 스타일을 CSS를 사용하여 거기에서 그 같이 보일 것이다 이게 더 잘하는거야. 이 방법이나보다 최적의 솔루션에 접근하는 더 좋은 방법이 있습니까?