@media only screen and (max-device-width: 667px), screen and (max-width: 552px) {
.class1 {
}
.class2 {
}
.class3 {
}
.class4 {
}
.class5 {
}
}
私は上記のCSSファイルを作成しています。 私が実装しようとしているのは、ボタンがあることです。そのボタンをクリックすると、max-width: 552pxをmax-width: 1000pxに変更する必要があります。それは可能ですか？メディアクエリの最大幅をプログラムで変更する（Javascript/jQuery）
ボタンをクリックすると、デバイス画面が変更されたことを意味しますか？ 1000pxに？ もしそうでなければ..
属性552pxを1000pxに変更できますが、これは画面デバイスでは表示されません。
はい。ボタンをクリックすると、値は1000pxに変更されます。 –
----------- Demo ？ –
a {
display: block;
font-size: 18px;
border: 2px solid gray;
border-radius: 100px;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
}
a:active {
font-size: 18px;
border: 2px solid green;
border-radius: 100px;
width: 100px;
height: 100px;
}
a:target {
font-size: 18px;
border: 2px solid red;
border-radius: 100px;
width: 500px;
height: 100px;
}<a id="btn" href="#btn">Demo</a>こんにちはViviek .. これはあなたを助けるでしょうか？
すべてのご回答ありがとうございます。しかし、私はこれを行う別の方法を考え出した。私は結果を達成するために以下を行った。サイズについてはサイズのために
=
552px@media only screen and (max-device-width: 667px), screen and (max-width: 552px) {
.class1 {
}
.class2 {
}
.class3 {
}
.class4 {
}
.class5 {
}
}
は= 1000px
@media only screen and (max-device-width: 667px), screen and (max-width: 1000px) {
full-screen .class1 {
}
full-screen .class2 {
}
full-screen .class3 {
}
full-screen .class4 {
}
full-screen .class5 {
}
}
は今、私はボタンをクリックするたびに、私は以下のコードを呼び出す必要があります。 $("body").addClass("full-screen")
完了！
大きな質問！クイックアンサーは「いいえ」です。 – admcfajn
ありがとう、@admcfajn –
本当にできることは、クラスを切り替えることです。それらのルールを除外し、別のクラスの名前空間に入れてください。 –