レスポンシブWebデザインにjQueryを使用しても問題ありませんか？

11

私は、サイトを更新して応答性を高め、スマートフォンで正しく表示されるようにする必要があります。残念ながら、現在の形式のサイトは操作が簡単ではありません。CSSを変更するだけではできません。

ブラウザのサイズを検出してjQueryでCSSを変更することは悪いことと考えられていますか？

例えば：

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

— MeltingDog
ソース

7

Mediaクエリは、2012

— 。– Zistoloen

スタイルシートを変更するつもりですか？私もそう思いましたが、それでも多くの要素を変更する必要があります

— MeltingDog 2014

はい。いずれにせよ、CSSの変更はたくさんあると思います。

— ジストローエン2014

2

「サイトを更新してレスポンシブにするように命じられた」という文の後に「CSSを変更することはできません」という

— 表現を続ける

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開発者が非常に気に入って!importantいて、HTMLにアクセスできない場合は、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も必要になります。JavaScriptをできる限り最小限に抑えたいことに注意してください。

— マルコ

4

最初にメディアクエリを使用してみます。もともとデスクトップ専用であったデザインを扱うときに私が見つけた1つの方法は次のとおりです。

2つの別個のスタイルシートから始めます。1つは新しいレスポンシブデザイン用で、もう1つは古いデスクトップバージョン用です。

<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で、1列のレイアウトを作成できることがわかります。

このアプローチにより、新たなスタートを切ることができ、特にモバイルとタブレットのみにスタイルを適用でき、デスクトップスタイルを介してスタイルを変更することはできません。あなただけのモバイルのために必要に応じて要素を非表示/表示/配置することができます。

モバイルとデスクトップで動作するようにデスクトップコードを変更する必要がある場合は、マークアップをリファクタリングできます。または、レスポンシブバージョンとモバイルバージョンの両方でHTMLを現実的にリファクタリングできない場合は、デスクトップコードにクラス「desktop」などのクラスを配置し、モバイルバージョンでCSSを使用して非表示にできます。次に、そのセクションの新しいHTMLをいくつか記述して、を指定しclass="mobile"ます。そして、スタイル、それに応じてでmobile.cssとでそれを隠すdesktop.css。

— ライトスピーダー
ソース

3

私はその方法を使用するサイトで作業し、モバイルデバイスの画面回転に問題がありました。JavaScriptはページの読み込み時に1回しか検出しないため、ユーザーがデバイスを回転させた場合、メディアクエリの場合のように全幅に拡張されません。当時、私はCSSに切り替えるだけの方が簡単でしたが、おそらくJSの専門家なら、ビューポートの幅の変化を検出する方法があるかどうかを知っているでしょう。AJAXには方法があるはずですが、megasteveが説明しているように、パフォーマンスに関しては、あなたが見つけたものはすべてやり過ぎることをいとわないと思います。

— ステファニー
ソース

2

応答性と「スマートフォンで正しく表示される」は、まったく別のタスクです。

おそらく、応答性とは、可能であればサーバーへの余分な往復を排除することを指します。エラーチェック、要求されたデータを取得するためのAjax、および動的なDOM操作は、通常、応答性を向上させるタスクです。JavaScript（またはJavaScriptフレームワーク）の使用は、これを行う効果的な方法です。ここ数年、私はこれらの実装のためにJavaScriptからjQueryに移行しました。多くの場合、jQueryには組み込みのブラウザー互換性があり、これには明らかな利点があります。日付ピッカー、オートコンプリート、メニュー用のプラグインにより、開発時間を節約できます。

それはスタイリングの主なソースであってはなりません。それがCSSの仕事です。ただし、2つを併用すると効果的です。簡単な例では、アクションの結果に応じてテキストのスタイルが異なる場合があります。jQueryを使用して、CSS定義クラスを変更できます。

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

スタイルを動的に変更して、モバイル用の標準ページを再利用しようとするのは魅力的です。私の経験では、それは不十分なソリューションを提供します。CSSは完全に異なり、モバイル機能を利用するには、クライアント側の異なるスクリプトが必要です。私の好みは、使用するスタイルや機能を選択するロジックを必要とする1つのページではなく、個別の専用HTMLページを作成することです。

— ステファニー・ペリー
ソース

質問者は、「レスポンシブWebデザイン」（en.wikipedia.org/wiki/Responsive_web_design）について言及しました。これは、さまざまな画面サイズと機能のデザインを指します。それは電話に固有ではありませんが、これはこの技術を最前線に持っていく上で大きな要因でした。

— Jacob Hume、

1

私たちは、サイトで人気のある960.gs cssフレームワークを使用していました。

レスポンシブにしたかったのです。

誰かが960 gs用のJSベースのレスポンシブプラグインを作成したので、構造サイトテンプレートに変更を加える必要がないため、それを使用しないのはなぜかと考えました。

それは機能しましたが、良いものを含むほとんどのブラウザで遅れました。通常、ページの複雑さに応じて大きく異なる「スタイルのないコンテンツのフラッシュ」が表示されます。

JSソリューションは機能していますが、理想的ではありませんが、可能であればCSS 3メディアクエリが最適です。最後に、Twitter Bootstrapを使用してサイトテンプレートを作り直しました。これは、私たちのニーズに非常に適していました。

近道をするのは不快なことかもしれませんが、長い目で見れば、多くの場合、より多くの時間と痛みを伴います。

— megasteve4
ソース