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 文字セットの表示と変更のチュートリアル
1. 文字セットを確認する1. MYSQLデータベースサーバーとデータベースの文字セットを確認する方...
Vueプラグインの書き方を説明する記事
目次プラグインとはプラグインの作成プラグインの使用要約するプラグインとはVue フレームワークでは、...
Bootstrapはカルーセルの効果を実現します
この記事では、カルーセルマップの効果を実現するためのBootstrapの具体的なコードを参考までに共...
ウェブページ要素の完全な分析
相対的な長さの単位それら説明: 相対的な長さの単位。現在のオブジェクト内のテキストのフォント サイズ...
CentOS7.6にMYSQL8.0をインストールする詳細な手順
1. 一般的に、CentOS では mariadb がデフォルトでインストールされているため、まず ...
js の parseInt() の奇妙な動作の調査と修正
背景： parseInt(0.006) または parseInt(0.0006) は 0 という値を...
IE と FF でスペースの幅を同じにするにはどうすればよいですか?
body{font-size:12px; font-family:"宋体";}...
MySQL データベースのインポートとエクスポートのデータ エラーの解決例の説明
データのエクスポートエラーを報告する 「secure_file_priv」のような変数を表示します。...
Linuxで相対パスを表現する方法
たとえば、現在のパスが /var/log で、/usr ディレクトリに移動する場合は、次のコマンドを...
フォーム送信ページの更新がジャンプしない
1. ソースコードの設計コードをコピーコードは次のとおりです。 <!DOCTYPE html ...
パーティショニングを使用して数十億のデータに対する MySQL データ処理を最適化する方法
MySQL が数千万のデータをクエリする場合、ほとんどのクエリ最適化の問題はインデックスを通じて解決...
Alibaba Cloud Server にセキュリティ グループ ルールを追加する詳細な説明 (グラフィック チュートリアル)
Alibaba Cloud セキュリティグループの概要Alibaba Cloud Server セ...
MySql でデータの重複挿入を回避する 3 つの方法
序文MySql で主キーの競合または一意キーの競合が発生した場合、挿入方法に応じてエラーを回避するた...
32 典型的な列/グリッドベースのウェブサイト
列ベースの Web デザインのインスピレーションをお探しの場合は、32 個のクラシックな列/グリッド...
ブラウザのスクロールバーのスタイルを変更するための純粋な CSS の例
CSSを使用してブラウザのスクロールバーのスタイルを変更する ::-webkit-スクロールバー{ ...