【2019年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！
こんにちは（・∀・） 昨年【2018年度決定版】レスポンシブデザインのブレークポイントはこれで決まり！という内容の記事を投稿しました。 基本的な考えは変わってません。細かな指定で表示したい場合は前回ご紹介した通りの設定が良いと思っています。 しかし、管理することを考えると前回ご紹介したブレークポイントの数では手間が掛かってしまうのも事実。 なので今回、ちょっと多かったブレークポイントを少し減らしてみることにしました。 前回投稿した記事では作ったブレークポイントの数は10個。 10個と言っても考え方としてはメジャーブレークポイントはモバイルとPCの境目の835pxの1つです。 しかし、10個あるのに変わりはなく、また管理の手間を考えるとやはりブレークポイントは少ない方が良い。 ということで今回、ブレークポイントは415pxと960pxに決定しました。 0px 〜 414px @media (
ゆめいろデザイン｜ブランドマネージャー・Web/UX/UIデザイナー・デザインコンサルタント ヒガシナオヤ
まず、iPhone Xに対応していないWebサイトはSafariブラウザではどのように表示されるのでしょうか？ ポートレートモードでは一見正しく表示されます。 下向きにスクロールするとステータスバーが表示されなくなり、画面下部のラウンドした領域にもコンテンツが表示されます。 早い話が、追尾型広告のようなページ下部に表示されるコンテンツに重要なコンテンツやナビゲーションを配置すると、クリックされない可能性が高くなります。 また、ランドスケープモードでははっきりと違いがわかります。 ツールバーやステータスバーは全画面で表示されます。 中央左右に安全領域がありますが、それ以外の部分もbody要素のbackground-colorで描画されます。 なお、背景画像を指定していても無視されるということを覚えておきましょう。 そのほかにも、セーフエリアの存在でデザイナーが意図した描画がされない状態になり
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
