- 締切済み
レスポンシブのコーディングについて
初めまして。 初心者ながらレスポンシブサイトを作っていて、 つまづいてしまった箇所があるので教えて頂きたいです。 １：左右中央寄せのcss記述について iPhone（320px）とAndroid（推定360px）の実機で表示確認をしながら Media Queriesのcssを記述を書いてたのですが、画面サイズが異なる為か cssの書き方が悪いのか、画面の左右中央寄せにしたくて 片方のスマホサイズに合わせると、片方ずれてしまいます。 cssでどの画面サイズでも左右中央に寄る書き方はありますか？ ２：Media Queriesについて １のcssの書き方がわからないので、画面サイズによって Media Queriesを書き分ければ早いかなと思い、 iPhone用とAndroid用で別で記述してみたのですが、 画面サイズを指定してるにも関わらず、片方のMedia Queriesが 両方のスマホに反映してしまいます。 下記、Media Queriesの記述内容です。 iPhone用（幅320px） @media screen and (max-width: 320px) { Android用（幅：360px） @media screen and (max-width: 360px) and (min-width: 321px) { 上記の書き方は間違っておりますでしょうか。 以上、2点について教えて頂けると助かります。 初心者なため、これで何時間も調べたり試行錯誤してしまっています。。 ちなみに、実機はiPhoneはiPhone4S、AndroidはF-01F です よろしくお願いします。 よろしくお願いします。
- みんなの回答 （4）
- 専門家の回答
みんなの回答
私の場合は、mediaQueriesを、下記のように記述しています。 携帯端末用 @media only screen and (min-width: 200px) and (max-width: 299px){} スマートホン用 @media only screen and (min-width: 300px) and (max-width: 400px){} タブレット用 @media only screen and (min-width: 401px) and (max-width: 600px){} PC用 @media only screen and (min-width: 601px) and (max-width: 960px){} 各機種ごとに設定すると、記述が面倒になってしまいますよ！ ＨＴＭＬに、viewpor は、記述されていますか？・・・ <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
320pxと360pxは統一してもいいと思います。 <html>,<body>と<header>や<section>のような親要素を width:100%; にします。 その子要素のwidth:%は親要素の100%に対して計算されます。 width:95%; max-width:700px; (pc用) min-width;300px; (スマホ用) margin: 0 auto 0; (中央配置) また display:flex を使うと都合よくリサイズされます。 http://liginc.co.jp/web/html-css/css/21024 http://developers.linecorp.com/blog/?p=2479
- doraneko66
- ベストアンサー率11% (535/4742)
あ、width:100%;でどうでしょう。 display: table; width: 100%; vertical-align: middle; text-align: center; こんな感じ！
- doraneko66
- ベストアンサー率11% (535/4742)
単に display: table; width:320px; vertical-align: middle; text-align:center; とかもあると思いますけどね。 ちょっと試してないから、実装みてないけど こんなんどうでしょう。
補足
ご回答ありがとうございます。 ご教示頂いた内容で実装してみたのですが だめでした；；