0

サイトのデスクトップ バージョンでいくつかのモーダルを制御するこの CSS があります。

#modal, #purchModal, #travModal, #notesModal, #explainModal 
{ position: fixed; z-index: 101; top: 10%; left: 25%; 
   width: 50%; background:#CEECF5; border-radius:15px; 
}

URL に「/mobile/」が含まれている場合、CSS コードを次のように切り替えます。

 z-index: 101; top: 5%; left: 5%; width: 95%; 
 background:#CEECF5; border-radius:15px;

これを行うための最良の方法は何ですか？ここでjQueryまたはJavaScriptを使用していると思います

4

4 に答える 4

4

Toggleスタイルとそれらの両方に2つの異なるクラスを使用します

.Class1 { 
    position: fixed; z-index: 101; top: 10%; left: 25%; 
    width: 50%; background:#CEECF5; border-radius:15px; 
}

.Class2 {
    z-index: 101; top: 5%; left: 5%; width: 95%; 
    background:#CEECF5; border-radius:15px; 
}

そして、それらを次のように切り替えます

$('Element you want to change css').toggleClass('Class1' , 'Class2');

または、次のように直接使用できます

if(document.url.indexOf('mobile')!=-1)
{
    $('Element you want to change css').addClass('Class1');
}
else
{
    $('Element you want to change css').addClass('Class2');
}

必要に応じて、古いクラスを削除してから、上記の方法で新しいクラスを追加できます。

于 2013-11-02T05:06:59.613 に答える
1

まず、2 つの CSS バリエーションを定義します。

/* Desktop */
#modal, #purchModal, #travModal, #notesModal, #explainModal {
  position: fixed; z-index: 101; top: 10%; left: 25%; 
  width: 50%; background:#CEECF5; border-radius:15px; 
}

/* Mobile */
body.mobile #modal, body.mobile #purchModal, body.mobile #travModal,
body.mobile #notesModal, body.mobile #explainModal {
  z-index: 101; top: 5%; left: 5%; width: 95%; 
  background:#CEECF5; border-radius:15px;
}

<body>次に、ページの読み込み時に URL に基づいて jQuery にクラスを設定させます。

$(function() {
  var isMobile = /\/mobile\/.test(window.location.url);
  $('body').toggleClass('mobile', isMobile);
});
于 2013-11-02T05:10:39.393 に答える
1

jQuery や JavaScript を使用しなくても実行できます。異なるデバイス用のCSSを書くだけです

//A comman css for class #modal
 #modal {
   position: fixed;
   top: 10%;
   left: 50%;
   z-index: 1050;
   width: 560px;
   margin-left: -280px;
   background-color: #ffffff;
 }

//if screen width is less then 767px
@media (max-width: 767px) {
 #modal {
    position: fixed;
    top: 20px;
    right: 20px;
    left: 20px;
    width: auto;
    margin: 0;
  }
}

//if screen width is less then 480px
@media (max-width: 480px) {
 #modal {
    top: 10px;
    right: 10px;
    left: 10px;
  }
}

したがって、この不要な JS の jquery を含めずに、読み込み時間を改善できます。

于 2013-11-06T05:57:25.093 に答える
0

2 つの異なる css ファイルを用意するのはどうですか? 1 つはデスクトップ バージョン用で、もう 1 つはモバイル用ですか? ページ内の css ファイルを次のように変更します。

$('head').append('<link rel="stylesheet" href="desktop.css" type="text/css" />');
于 2013-11-02T05:21:02.690 に答える