比率を維持するには「padding-top」を使うことが多いですが、他の要素との関係で使えない場合などに 回避策としてcalcを使用しても同じ表現ができます。 ｛余白幅｝とは、 100vwを基準としているためページの両端に余白やサイドバーを設置していると画面をはみ出してしまいますので、その分を引くための値を入れます。 試しにyoutubeの埋め込みコードに適用してみました。
比率計算
/*PC*/
selector{
width:640px;
height:calc((640px / 16) * 9);
}
@media screen and (max-width:768px){
/*SP,TB*/
selector{
width:calc(100vw - {余白幅});
height:calc(((100vw - {余白幅}) / 16) * 9);
}
}
使用例
私達は京都でNo1のデザイン力・UI力を目指す
システム開発・Web開発カンパニー
株式会社なないろです。
各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。
Laboratory
なないろ研究所
⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。
なないろ研究所では日々、様々なことをリサーチし、実験しています。
コミュニケーションの流通をお手伝いするために、日々様々なリサーチを行い、分析し、時に実験しております。
そんな日々の活動内容においてログをつけております。
このような情報共有が、我々が考えるコミュニケーションの一つの形です。
2018.11.19
