@mediaメディアクエリが無効になった原因のまとめ

649 ワード

1.セレクタの権限が正しいかどうか:
div p{
    font-size: 14px;
}
@media screen and (min-width:500px) and (max-width:1024px){
    p{
        font-size: 12px;
    }
}

例えば、画面幅を500 pxから1024 pxの間に設定し、pラベルの文字サイズは12 pxである.
ただし、一部のpタグのcss権限[上のdiv pの文字サイズは変わらない]が@mediaのp権限より高い場合は有効ではない.
2.and前後のスペースの問題
@media screen and (min-width:500px) and (max-width:1024px){
    p{
        font-size: 12px;
    }
}

ここでand前後にスペースの間隔を確保する必要がある.
3.meta宣言

携帯電話端末の開発の場合、それを設定する必要があり、pc端末は要求しない.