반응 형 웹 디자인에 jQuery를 사용해도 되나요?

11

응답 성이 있고 스마트 폰에 올바르게 표시되도록 사이트를 업데이트해야했습니다. 불행히도 현재 형식의 사이트는 다루기가 쉽지 않습니다. CSS 만 변경할 수는 없습니다.

브라우저 크기를 감지하고 jQuery로 CSS를 변경하는 것이 나쁜 것으로 간주됩니까?

예 :

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}

— 녹는 개
소스

7

미디어 쿼리는 2012 년 6 월 이후 W3C에서 권장하는 표준이기 때문에 대신 미디어 쿼리 를 사용해야 합니다 .

— Zistoloen

스타일 시트를 변경 하시겠습니까? 저도 그렇게 생각했지만 여전히 많은 요소를 변경해야합니다

— MeltingDog

예. 어쨌든 많은 CSS 변경 사항이 있다고 생각합니다.

— Zistoloen

2

"응답 할 수 있도록 사이트를 업데이트하도록되어 있습니다"라는 문장 뒤에 "CSS 만 변경할 수는 없습니다"

— Francisco Presencia

4

모든 것이 더 jQuery를 필요로 ( 면책 조항 : 심각하지 않습니다 )

— Darkhogg

13

확실한. 분명히 CSS 만 사용하는 것이 좋지만 할 수 없다면 가지고있는 것을 사용하십시오. CSS로 최대한 많은 작업을 수행하고 필요에 따라 JS를 사용하십시오. 기존 CSS를 변경할 수없는 이유는 확실하지 않지만 JS를 사용하여 스타일 시트를 추가 할 수 있습니다.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

출처 : http://christian-fei.com/add-stylesheets-after-the-head-using-javascript/

그런 다음 CSS / 미디어 쿼리를 사용하십시오.

또는 jQuery를 사용하여 :

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

DOM을 변경하지 않고는 할 수 없었던 반응 형 '스킨'을 수행했습니다. HTML에 액세스 할 수없는 경우 JS DOM 조작이 유일한 해답 인 경우가 있습니다.

편집 :
작은 화면 버전의 시각적 요구 사항에 따라이 CSS 스 니펫이 '모바일 친화적 인'방법으로 얼마나 멀리 갈 수 있는지에 놀랄 수 있습니다.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

원래 CSS 개발자가 너무 좋아서 !importantHTML을 얻을 수 없다면 jQuery / JS를 사용하여 본문 또는 상위 레벨 컨테이너에 ID를 추가하고 선택기에 추가하십시오.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }

— 의지
소스

내 경험으로는 CSS만으로 반응 형 디자인을 수행 할 수 있습니다. 디자인이 적응력을 갖추어야하는 즉시 Javascript도 필요할 수 있습니다. 자바 스크립트를 최대한 최소화하려는 것을 명심하십시오.

— Marco

4

미디어 쿼리를 먼저 사용해보십시오. 원래 데스크톱 전용 디자인을 다룰 때 더 쉬운 방법은 다음과 같습니다.

두 개의 별도 스타일 시트로 시작하십시오. 하나는 새로운 반응 형 디자인을위한 것이고 다른 하나는 이전 데스크탑 버전을위한 것입니다.

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

모든 이전 스타일은 desktop.css에 포함될 수 있습니다 . 한편 mobile.css 에서 처음부터 시작할 수 있습니다 . 태블릿에서도 작동하는 모바일 CSS에서 멋진 단일 열 레이아웃을 만들 수 있습니다.

이 접근 방식을 사용하면 새로 시작할 수 있으며 모바일 및 태블릿 전용으로 스타일을 지정할 수 있으며 데스크탑 스타일을 사용하지 않고 물건을 재정의하지 않아도됩니다. 모바일에서만 필요에 따라 요소를 숨기거나 표시 / 위치시킬 수 있습니다.

모바일 및 데스크탑에서 작동하도록 데스크탑 코드를 변경해야하는 경우 마크 업을 리팩터링 할 수 있습니다. 또는 반응 형 버전과 모바일 버전 모두에 대해 HTML을 사실적으로 리팩터링 할 수없는 경우 데스크톱 코드에 클래스 (예 : 클래스 "desktop")를 배치하고 모바일 버전에서 CSS를 사용하여 HTML을 숨길 수 있습니다. 그런 다음 해당 섹션에 대한 새로운 HTML을 작성하고에 제공하십시오 class="mobile". 그런 다음 mobile.css 에서 스타일 을 지정하고 desktop.css 에서 숨 깁니다 .

— 광속
소스

3

이 방법을 사용하는 사이트에서 근무했으며 휴대 기기의 화면 회전에 문제가있었습니다. JavaScript는 페이지로드시 한 번만 감지하므로 사용자가 장치를 회전하면 미디어 쿼리에서와 같이 전체 너비로 확장되지 않습니다. 당시 CSS로 전환하는 것이 더 쉬웠지만 JS 전문가는 뷰포트 너비의 변화를 감지하는 방법이 있는지 알고있을 것입니다. AJAX에 대한 방법이 있어야하는 것처럼 보이지만 megasteve가 설명하는 것처럼 성능이 향상되는 한 당신이 찾은 것을 기꺼이 내기 것입니다.

— 스테파니
소스

2

응답 성과 "스마트 폰에 올바르게 표시"는 완전히 다른 작업입니다.

아마도 응답 성은 가능한 경우 서버로의 추가 왕복을 제거하는 것을 의미합니다. 오류 검사, 요청 된 데이터를 검색하는 Ajax 및 동적 DOM 조작은 일반적으로 응답 성을 향상시키는 작업입니다. JavaScript (또는 JavaScript 프레임 워크)를 사용하는 것이 효과적인 방법입니다. 지난 몇 년 동안 이러한 구현을 위해 JavaScript에서 jQuery로 옮겼습니다. 많은 경우 jQuery에는 브라우저 호환성이 내장되어있어 분명한 이점이 있습니다. 날짜 선택기, 자동 완성 및 메뉴를위한 플러그인은 개발 시간을 절약 해줍니다.

스타일링의 주요 소스가되어서는 안됩니다. 이것이 CSS의 일입니다. 그러나이 두 가지를 효과적으로 함께 사용할 수 있습니다. 간단한 예에서, 일부 동작의 결과에 따라 텍스트의 스타일이 다르게 나타날 수 있습니다. jQuery를 사용하여 CSS 정의 클래스를 변경할 수 있습니다.

$('#result').removeClass('red').addClass('green');

스타일을 동적으로 변경하여 모바일 용 표준 페이지를 재사용하려고합니다. 내 경험은 불만족스러운 솔루션을 제공한다는 것입니다. CSS는 완전히 다르며 모바일 기능을 이용하려면 다른 클라이언트 측 스크립팅이 필요합니다. 선호하는 스타일이나 기능을 선택하기 위해 로직이 필요한 한 페이지가 아닌 별도의 전용 HTML 페이지를 만드는 것이 좋습니다.

— 스테파니 페리
소스

질문자는 "응답 성 웹 디자인"( en.wikipedia.org/wiki/Responsive_web_design )을 언급했는데, 이는 다양한 화면 크기 및 기능에 대한 디자인을 나타냅니다. 전화에만 국한된 것은 아니지만,이 기술을 최전선에 도입하는 데 큰 요인이었습니다.

— Jacob Hume

1

우리는 우리 사이트에 널리 사용되는 960.gs CSS 프레임 워크 를 사용했습니다 .

우리는 그것을 반응 적으로 만들고 싶었습니다.

누군가가 960 gs를위한 JS 기반 반응 형 플러그인을 만들었 으므로 우리는 구조적 사이트 템플릿을 변경할 필요가 없기 때문에 왜 이것을 사용하지 않는지를 생각했습니다.

그것은 효과가 있었지만 좋은 브라우저를 포함하여 대부분의 브라우저에서 게으르다. 일반적으로 페이지 복잡성에 따라 크게 달라지는 '스타일이 지정되지 않은 콘텐츠의 플래시'가 나타납니다.

JS 솔루션이 작동하기는하지만 이상적이지는 않지만 가능한 경우 CSS 3 미디어 쿼리가 최선의 선택입니다. 결국 우리는 Twitter Bootstrap 을 사용하여 사이트 템플릿을 다시 얻었으며 우리 의 요구에 매우 적합했습니다.

짧게 자르는 것이 어려울 수도 있지만 장기적으로 더 많은 시간이 걸리고 고통 스럽습니다.

— megasteve4
소스