blogメディア運営や請負ウェブ制作などを通して得た経験や情報をその場で消費せずアウトプットするための場としてのブログ。この記事は書いてから1年以上経過しました。FacebookシェアFbTwitterTwGoogle+G+HatenaHaPocketPkLINELI最近の案件では、スマホデザインは横幅750pxで制作することが多いと思います。iPhone5などに代表される320pxデバイスもまだまだ健在です。多くのフロントエンドエンジニアの方は上記に近い経験があるのではないでしょうか?これをなんとかしようという話です。Width)という単位です。これは、横幅を320pxとした時に、100vw=320pxになるというものです。%と違って親要素の制約を一切受けません。font-size:1.86666666666vw;}となります。見た目的にもイマイチですね。当然ですが、このような計算はやってられません。sassを利用してmixinにあらゆるパターンをまとめあげます。$width);}とかなんとかを、ある程度全てのCSSで作っておくと、まあまあ便利に使えます。冗長です!正直めんどくさいです。calcとremを組み合わせるそこで、究極の解として、remをあらゆる単位の基準として使用するという方法があります。当社では以下のようにしています。0.040rem;}}こうすることで、直感的にも何pxでデザインされているのかなどが一目瞭然になります。あらゆる横幅の全てのスマホで見た目が相対的に拡大縮小するだけになるので、レイアウトが完全に一致します。[例2]と[例3]の数値が間違ってましたので修正しました!calcが使えない場合IE9未満、Android4.4未満、iOS6未満、Chrome19未満、Firefox4未満、Safari6.0未満はcalcに対応していません。そんな時はjQueryで代用します。fzPC(){$('html').css({fontSize:'62.5%'});}などとします。※pcのフォントサイズは適宜変更してください。まとめvwやvhもいいですが、面倒くさい&sass必須なので、remを使うのがベスト。Scriptによる「重複データの列まるごと削除」ウェブ制作請負事業を開始しました。IE6、IE7でfloatを内包した要素のmargin-bottomが消える際の対処法MovableTypeで非同期にアーカイブリストをページングgulpのファイル構成やgulpfile.jsを公開。システムに関するお問い合わせをお待ちしています。(1)株式会社p.c.c.フロントエンドの下請け・請負制作をはじめ、多数のウェブコンテンツを自社で企画・制作・運営している会社です。企業の外部ウェブ担当として顧問契約も行っています。