モバイルデバイスのCSSのみを変更しますか？

Question

ウェブサイトの作成を終了しましたが、失敗しました。私の問題は、私のWebサイトがPCで完全に見栄えがよいことです。でも、携帯から見に行くと、ある画像の隙間などがすごすぎます...

だから私の質問は、モバイルデバイスとおそらくタブレットにのみ影響を与えるいくつかのCSSコードをどのように作成できるのですか？

方法はありますか？

Answer 1

CSSには メディアクエリ という機能があります。 MDNリンクから：

CSS3に追加されたメディアクエリにより、コンテンツ自体を変更することなく、特定の範囲の出力デバイスに合わせてコンテンツのプレゼンテーションを調整できます

例えば：

div {
    background: black;
}

@media (max-width: 1000px) {

      div {
            background: yellow;
       }

}

このdivの背景色は、提供されている例のように、画面上で幅が1000px未満の場合は黄色になります。

Answer 2

さまざまな画面解像度のメディアクエリを使用できます。例-

#image img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #image img {width:375px;}
}

Answer 3

メディアクエリ を読んで理解する

あなたはあなたのウェブサイトの特定のメディアサイズのCSSを調整することができます。