CSSメディアクエリのアスペクト比を小さくする方法
|
CSS メディア クエリには非常に便利なアスペクト比、aspect-ratio があり、幅と高さを直接使用してページを調整できます。使用例は次のとおりです。
// アスペクト比は、320*50 のデザインスタイルに合うように (（320/50）+(728/90))/2 の間です @media screen and (min-aspect-ratio: ~"249/50") and (max-aspect-ratio: ~"29/4"){
@ベース: 320;
@変換: 375/@base;
。容器{
幅：100vw;
高さ:100%;
位置:相対;
ディスプレイ:フレックス;
flex-flow:行を折り返さない;
アイテムの位置を中央揃えにします。
.info-icon-box{
.width(46*@convert);
.height(46*@convert);
.border-radius(10*@convert);
.border(1@convert,#e3e3e3);
オーバーフロー: 非表示;
.margin-left(10*@convert);
.min-width(46*@convert);
.max-width(46*@convert);
フレックス成長: 0;
画像 {
幅: 100%;
高さ: 100%;
.border-radius(10);
垂直方向の位置合わせ: 上;
}
}
.info-その他{
フレックス成長: 1;
ディスプレイ:フレックス;
flex-flow:列の折り返しなし;
オーバーフロー: 非表示;
高さ:100%;
.margin-left(10*@convert);
.info-wrap.roll-box{
高さ:200%;
}
.info-box{
幅:100%;
高さ:50%;
フレックス成長: 1;
ディスプレイ:フレックス;
flex-flow:行を折り返さない;
アイテムの位置を中央揃えにします。
。情報{
幅:48vw;
高さ: 100%;
フレックス成長: 1;
ディスプレイ: フレックス;
// 項目の位置合わせ: 中央;
flex-direction:列;
コンテンツの中央揃え: 中央;
.info-title{
フォントの太さ:太字;
.font-size(16*@convert);
.line-height(26*@convert);
色: #484848 ;
.margin-bottom(4*@convert);
}
.info-その他のレート{
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの配置: flex-start;
位置:相対;
zインデックス:2;
.星の数{
.font-size(15*@convert);
色:#4a4a4a;
.padding-right(5*@convert);
}
.star-evaluate {
位置: 相対的;
.width(100*@convert);
.height(16*@convert);
背景: url("../../assets/images/star_gray.png") 繰り返しなし 0 0;
背景サイズ: カバー;
オーバーフロー: 非表示;
。星 {
位置: 絶対;
上: 0;
左: 0;
表示: インラインブロック;
.height(16*@convert);
背景: url("../../assets/images/star.png") no-repeat 0 0;
背景サイズ: カバー;
オーバーフロー: 非表示;
}
.star-1 {
.width(8*@convert);
}
.star-2 {
.width(21*@convert);
}
.star-3 {
.width(29*@convert);
}
.star-4 {
.width(42*@convert);
}
.star-5 {
.width(50*@convert);
}
.star-6 {
.width(63*@convert);
}
.star-7 {
.width(71*@convert);
}
.star-8 {
.width(84*@convert);
}
.star-9 {
.width(92*@convert);
}
.star-10 {
.width(100*@convert);
}
}
}
.info-desc-box{
表示: なし;
}
}
.info-インストール{
.min-width(66*@convert);
幅:コンテンツに合わせる;
.height(40*@convert);
.line-height(40*@convert);
ボックスのサイズ: 境界線ボックス;
.padding-all(0,4*@convert,0,4*@convert);
.font-size(14*@convert);
色:#fff;
テキスト配置: 中央;
.margin-right(20*@convert);
背景:url("../../assets/images/btn_download_short_shadow.png") 繰り返しなし 0 0;
背景サイズ:100% 100%;
}
}
.info-desc-box {
幅:100%;
高さ:50%;
.padding-all(4*@convert, 26*@convert, 4*@convert, 0);
ボックスのサイズ: 境界線ボックス;
オーバーフロー: 非表示;
.info-desc{
.font-size(14*@convert);
.line-height(20*@convert);
色: #484848 ;
.info-その他のレート{
表示: なし;
}
}
}
}
}
}
// アスペクト比は (（320/50）+(728/90))/2 より大きいです。2 つのサイズの中間の値は 728*90 に適しています。デザイン スタイル @media screen and (min-aspect-ratio: ~"29/4"){
@ベース: 728;
@変換: 375/@base;
。容器{
幅：100vw;
高さ:100%;
位置:相対;
ディスプレイ:フレックス;
flex-flow:行を折り返さない;
アイテムの位置を中央揃えにします。
.info-icon-box{
.width(88*@convert);
.height(88*@convert);
.border-radius(10*@convert);
.border(1@convert,#e3e3e3);
オーバーフロー: 非表示;
.margin-left(10*@convert);
.min-width(88*@convert);
.max-width(88*@convert);
フレックス成長: 0;
画像 {
幅: 100%;
高さ: 100%;
.border-radius(10);
垂直方向の位置合わせ: 上;
}
}
.info-その他{
フレックス成長: 1;
ディスプレイ:フレックス;
flex-flow:列の折り返しなし;
オーバーフロー: 非表示;
高さ:100%;
.margin-left(10*@convert);
.info-wrap{
高さ:100%;
.info-box{
幅:100%;
高さ:100%;
フレックス成長: 1;
ディスプレイ:フレックス;
flex-flow:行を折り返さない;
アイテムの位置を中央揃えにします。
。情報{
幅:48vw;
高さ: 100%;
フレックス成長: 1;
ディスプレイ: フレックス;
flex-direction:列;
コンテンツの中央揃え: 中央;
.margin-right(20*@convert);
.info-title-rate{
ディスプレイ: フレックス;
flex-flow: 行の折り返しなし;
}
.info-title{
フォントの太さ:太字;
.font-size(24*@convert);
.line-height(37*@convert);
色: #484848 ;
.margin-bottom(4*@convert);
}
.info-その他のレート{
ディスプレイ: フレックス;
アイテムの位置を中央揃えにします。
コンテンツの配置: flex-start;
位置:相対;
zインデックス:2;
.星の数{
.font-size(15*@convert);
色:#4a4a4a;
.padding-right(5*@convert);
}
.star-evaluate {
位置: 相対的;
.width(100*@convert);
.height(16*@convert);
背景: url("../../assets/images/star_gray.png") 繰り返しなし 0 0;
背景サイズ: カバー;
オーバーフロー: 非表示;
。星 {
位置: 絶対;
上: 0;
左: 0;
表示: インラインブロック;
.height(16*@convert);
背景: url("../../assets/images/star.png") no-repeat 0 0;
背景サイズ: カバー;
オーバーフロー: 非表示;
}
.star-1 {
.width(8*@convert);
}
.star-2 {
.width(21*@convert);
}
.star-3 {
.width(29*@convert);
}
.star-4 {
.width(42*@convert);
}
.star-5 {
.width(50*@convert);
}
.star-6 {
.width(63*@convert);
}
.star-7 {
.width(71*@convert);
}
.star-8 {
.width(84*@convert);
}
.star-9 {
.width(92*@convert);
}
.star-10 {
.width(100*@convert);
}
}
}
.info-desc-box {
幅:100%;
.height(20*@convert);
.padding-all(4*@convert, 26*@convert, 4*@convert, 0);
ボックスのサイズ: 境界線ボックス;
オーバーフロー: 非表示;
.info-desc{
.font-size(14*@convert);
.line-height(20*@convert);
色: #484848 ;
.info-その他のレート{
表示: なし;
}
}
.ロールボックス{
高さ:自動;
}
}
}
.info-インストール{
.min-width(66*@convert);
幅:コンテンツに合わせる;
.height(40*@convert);
.line-height(40*@convert);
ボックスのサイズ: 境界線ボックス;
.padding-all(0,4*@convert,0,4*@convert);
.font-size(14*@convert);
色:#fff;
テキスト配置: 中央;
.margin-right(20*@convert);
背景:url("../../assets/images/btn_download_short_shadow.png") 繰り返しなし 0 0;
背景サイズ:100% 100%;
}
}
}
&.info-desc-box {
表示: なし;
}
}
}
}次の 3 つの点に注意してください。 1. アスペクト比は比率の形式でなければなりません。小数を直接記述することはできません。幅/高さ 2. less でアスペクト比を直接記述しても機能しません。less はそれを 10 進数にコンパイルするからです。比率の前に ~ を追加すれば、完璧に解決できます。 3. スタイル オーバーレイは避けてください。メディア クエリの大部分は最後に記述するのが最適です。 要約する 上記は、編集者が紹介した CSS メディア クエリ アスペクト比 レスの使用法です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。 |
<<: Web デザインのスタイルはシンプルであればあるほど良いというのは本当でしょうか?
>>: Kubernetes コントローラーとラベルの簡単な分析
推薦する
MySQLでよく使われる演算子と関数の概要
まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...
ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション
Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...
HTML 言語百科事典
123WordPress.com-HTML noscriptオブジェクトolオプションPパラントプレ...
MySQL における UNION と UNION ALL の基本的な使い方
データベースでは、UNION キーワードと UNION ALL キーワードの両方が 2 つの結果セッ...
ビジュアルデザイナーの成長の3つの段階のまとめ
この本「グラフィックデザイナーとして成長する」は多くの人が読んでおり、私もオリジナルの PDF 版を...
MySQLでデータを削除してもディスク領域が解放されないのはなぜですか
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
HTML_PowerNode 入門 Java アカデミー
HTMLとは何ですか? HTML は Web ページを記述するために使用される言語です。 HTML ...
MySQL 8.0.11 の詳細なインストール手順
この記事では、参考までにMySQL 8.0.11のインストール手順を紹介します。具体的な内容は次のと...
MySQL実践スキル: 2つのテーブルに異なるデータがあるかどうかを比較する方法の分析
この記事では、MySQL が 2 つのテーブルを比較して、異なるデータがあるかどうかを確認する方法を...
MySQLでテーブルを接続するいくつかの方法
MySQL テーブルでの接続方法は実は非常に簡単なので、ここではその特徴を簡単にリストします。テーブ...
jquery.form.js が IE でアクセスを拒否し、入力アップロード ボタンをアクティブにクリックする必要がある問題
まずはコードを見てみましょう <フォーム id="uploadFileForm2&q...
Reactを使用する際の7つの落とし穴のまとめ
目次1. コンポーネントの肥大化2. 状態を直接変更する3. プロパティは数値を渡す必要があるが文字...
DockerでMySQLマスタースレーブ環境を構築する方法の詳しい説明
序文この記事では、docker-compose と dockerfile を使用して、binlog ...
background-positionプロパティでのパーセンテージ値の使用法の検討
背景位置が背景画像の表示に与える影響この2日間のプロジェクトでホームページの写真を入れ替えていたとこ...
MySQLの明示的な型変換の簡単な分析
CAST関数前回の記事では、型変換を表示するために使用する CAST 関数について説明しました。暗黙...