【CSS】スライドショーをPCとスマホで表示を変えたい

Question

前提・実現したいこと

お世話になります、質問させていただきます。
初心者です。

CSSで横長画像をスライドショーを設定しているのですが
レスポンシブで、スマホ画面で見るとかなり画像が小さくなってします。
そこでスマホで見たときに別のスライドショーが表示される仕組みにしたいのですが、
方法をご教示いただけないでしょうか。

該当のソースコード

【html】

<header> <h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="SAMPLE COMPANY"></a></h1> <!--スライドショー--> <aside id="mainimg"> <img src="images/0.png" alt="" class="slide0"> <img src="images/1.jpg" alt="" class="slide1"> <img src="images/2.jpg" alt="" class="slide2"> <img src="images/3.jpg" alt="" class="slide3"> </aside> </header>

【CSS】

＃mainimg {
clear: left;
width: 100%;
position: relative;
}
.slide1,.slide2,.slide3 {
animation-duration: 15s; /アニメーションを実行する時間。「s」は秒の事。/
animation-iteration-count:infinite;
position: absolute;left:0px;top:0px;width: 100%;height: auto;
animation-fill-mode: both; /アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。/
animation-delay: 2s; /出現するタイミング（秒後）/
}
.slide0 {
position: relative;width: 100%;height: auto;z-index: -1;
}
.slide1 {
animation-name: slide1;
}
.slide2 {
animation-name: slide2;
}
.slide3 {
animation-name: slide3;
}

Answer 1

メディアクエリを使用してみると良いのではないでしょうか？

https://sole-color-blog.com/blog/71/

Comments

[janne0519]

ありがとうございます！うまくいきました～！