メディアクエリでスタイルシートを振り分ける

テーマのカスタマイズです。 jQueryでモバイル用スタイルシートに振り分けて～なら簡単なのですがこのテーマは@mediaで振り分けられています。

このCSS、全く使ったことがないので覚書メモ

目的

今回は「見出しh2の位置をスマホ表示時画面に収めたい」です。

テーマの見出しは非常にシンプルで下線もアイコンも色もなく大きさのみなので、文章が長い私にとってちょっと見えにくいことに。

で、昨日こんな感じの見出しに変えたのですが

↑見えてますかね？角を丸くすると短く見えるのでmargin-leftでマイナスして左に寄せました。よく見る左に色がついた見出しとかも本文より少し左に出てますよね。

スマホでの表示

いまやスマホユーザーのアクセスが半数を占める状態で無視できないスマホ表示 ぶったぎられてる！

ソース見てもわからんのだけど、おそらくモバイル表示は左端の余白部分をカットでマイナスではみ出てる部分が表示されないということだろうね。私の知恵ではmargin以外左にはみ出させる方法がわからなかったのでモバイル表示とPC表示切り替えればいいじゃんと思いついたわけです。そんなモン、諦めて別の飛び出してない見出しにすればいいじゃんという話ですが、自己満足ですね。

確認

このテーマでの「ブレークポイント」は min-width: 479px （スマホ横置き） min-width: 767px　（タブレット） min-width: 1023px　（タブレット横置き） min-width: 1260px　（13インチPC) min-width: 1360px　（15インチPC）

と非常に細かいなんで上三つが1ピクセル小さく設定されてるのかわからんけど（最小値だから？より大きい～ってことだよね？じゃあ480px以下の記述はどこに？）はっきりいってこんな細かく設定されている所いじれない。内容見てもわからない高解像度なスマホやら携帯やらがたくさんあるのに@mediaでの振り分けは正解なのか？とか思いつつ（Xperiaではサイドバーが下にくるモバイル表示がされてるので480px以上扱い？でもwidth400pxに設定した枠がはみ出ていたので360かな）（レスポンシブ表示を確かめるサイトで320pxだと見出しの表示がそもそも反映してない）

実装していく

んですが・・・・ぐぐってよく出てくる @media screen and (min-width: 480px) and (max-width: 767px) っていう、480px以上767px以下っていうのを設定しても無意味

最初本体css通りにmin-width: 479pxとmin-width: 767pxにそれぞれはみ出てないCSSにして、はみ出たCSSは普通に記述しても動かず・・・・えっもしかして本体に設定してある通りに全部指定していかないと無理？と思ったのですが、スマホをどうこうと指定するのではなく PCでは～という表示　ようはmin-width: 980pxではみ出た見出し指定 @media以降の普通の部分にはみ出てない指定するとなんとか動いたようです。設定は980以上でいいのかなあ？1024pxにすべきか？それともそれ以上？？iOSは解像度高めだよね。

/* 980px以上用*/
@media screen and (min-width: 980px) {
.entry-content h2{
    margin-left:-10px;
    padding: 10px 0px 10px 10px;
    border: 2px solid #c8db93;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;}
}

.entry-content h2{
    padding: 10px 0px 10px 10px;
    border: 2px solid #c8db93;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    background: #fff;}
}