ar0のブックマーク - はてなブックマーク

CSSだけでアスペクト比を固定するテク - Qiita
Javascriptを使わず、CSSだけでimgやdivやiframeのアスペクト比を固定したままコンテナに合わせてリサイズする方法です。レスポンシブなデザインの場合は端末の画面サイズに合わせて要素の幅を変える必要があるので、こういうテクニックを使ってアスペクト比を固定してやります。 imgの場合 HTML
ar0 2021/06/02
レスポンシブ
リンク
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。いろいろ調査した結果、以下の考え方で理解できると思う。まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。次にviewportを実際の液晶画面に表示する。この時、view
ar0 2015/10/21
リンク
1

はてなブックマーク