タグ

メディアクエリーに関するyk_acのブックマーク (2)

  • スマホサイトのランドスケープ対応(画面横向き対応)をする時間がなくてアイデアで乗り切った話 - Qiita

    この記事は、株式会社Y's アドベントカレンダー7日目の記事になります。 ディレクター出身の初心者エンジニアの私が自社コーポレートサイトを実装したときの経験談。 ディレクター時代に培った提案力が功を奏し、アイデアがたまたま採用されて乗り切れただけなので参考になるかはわかりませんが、あまり書かれていなさそうな方法だったのと、そこにたどり着いた経緯を忘れたくないので、備忘録的に残しておきます。 ※方法のみを知りたいという方は、『実際に使った手法②』から読むことをおすすめします。 普通のランドスケープ対応がしたかった 普段スマホでwebサイトを訪れた際に、端末を横向きにして見るケースは個人的にほとんどないし、自分の周りでもそうしている人はあまり見たことがありません。 それでも世の中に一定少数は居るらしく、その人達のために対応をしてあげる必要があります。 デザインにもよりますが、よくある対応方法と

    スマホサイトのランドスケープ対応(画面横向き対応)をする時間がなくてアイデアで乗り切った話 - Qiita
  • CSS Media Queries(メディアクエリ)を使った色々な記述方法|GSblog|Webで解決する小さな会社 株式会社 月虹製作

    こんにちは。iPhone7Plusユーザーになった川口です。 大きい画面だと使いづらいかなと思って届くまでドキドキしていましたが、ものすごく使い勝手が良く今後Plusから逃れられそうにありません…! レスポンシブデザインをするにあたって、ブレイクポイントを指定する時に活躍するメディアクエリさん。PCでブラウザ幅を可変させた時だけではなく、スマホやタブレットの実機で表示した時用にいろいろ細かく指定する方法を備忘録として記載したいと思います。 せっかくなのでiPhone7Plusのサイズで! 通常のブレイクポイント指定 @media only screen and (max-width: 414px) { 〜ブラウザ幅が414pxより小さい時の指定〜 } ブラウザ幅が414pxより小さい時の指定、つまりiphone7Plus以下のサイズで表示する指定。 レスポンシブではこの記述が主に使われてい

    CSS Media Queries(メディアクエリ)を使った色々な記述方法|GSblog|Webで解決する小さな会社 株式会社 月虹製作
  • 1