CSSアダプティブスタイルシート

私たちが開発する過程で、応答式のページを使うのは、PC側とモバイル側のスタイルが異なる場合があるかもしれませんが、この場合はJS方式で簡単であればまあまあです.多くなると肥大化して判断応答速度が大幅に低下する.このときCSS 3の@media属性を使うことができ、
まずhtmlページを作成します

次に、マスタースタイルテーブルindexを導入する.css

.divs{
    width:100px;
    height:100px;
    background:red;
}

次に、移動端応答式スタイルシートmediaを作成する.css             @media

@media (max-width: 1105px) {
    .divs{
        width:100px;
        height:100px;
        background:none;
    }
}

ここで@media括弧内は応答仕様であり、ページ幅が1105 px未満である場合にmediaを使用することを示す.cssというスタイルシート
逆に1105 pxより大きい場合はindexを用いる.cssスタイルシート
このように書くこともできます

@media (min-width: 768px) and (max-width: 991px) {
  //    
}