CSS3を使用して水平画面と垂直画面を一致させる方法

この記事では主にCSS3で横画面と縦画面を一致させる簡単な方法を紹介しています

同じCSSで書いています

書きました。 2つのCSSで別々に
縦画面

@media screen and (orientation: portrait) {   
  /*竖屏 css*/  
}    
@media screen and (orientation: landscape) {   
  /*横屏 css*/  
}

横画面

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">

どこに適用するか

(1) モバイルWEBページ要素のコンテンツは通常、さまざまな解像度で表示できるようにパーセンテージで定義されます。すべてのデバイスで正常に表示されますが、モバイル デバイスの画面解像度の幅と高さは依然として大きく異なり、画面上で同じページをめくると、パーセンテージで定義された要素の幅が非常に大きくなる場合があります。このように、画面の反転状態に合わせて方向を指定すると、別の CSS を記述してページのスタイルを制御できます。

(2) 背景画像を含むモバイル WEB ページの場合、画面の向きに応じて画面の状態を合わせ、異なる背景を設定できます。

(3) 少し技術的な点: 要素が絶対配置されている一部の WEB ページでは、画面が縦長モードの場合、ページの全長が画面より短いことが原因である可能性があります。高さ (ただし画面の幅よりも大きい) の場合、絶対に配置された要素を下部に配置するのは正しいことですが、画面が横向きになると、ページ コンテンツの高さが画面の高さよりも大きくなります。 (つまり、反転する前の画面の幅)、絶対配置された要素が上のページ コンテンツを覆うため、ページ上で問題が発生する場合は、画面の状態に合わせて CSS コードを調整することができます。

横画面と縦画面の状態の一致については、JSでも判断できます。JSのonorientationchangeはwindowのイベントであり、それをリッスンすることで横画面と縦画面の状態を一致させることができます。

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

CSS3 と jQuery は、マウスの方向に従うホバー効果を実装します

CSS の table-layout 属性の使用

以上がCSS3を使用して水平画面と垂直画面を一致させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。