Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?-tutorial css-php.cn

Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?

Susan Sarandon

Lepaskan： 2024-10-26 07:33:02

asal

997 orang telah melayarinya

How to Overcome the CSS Media Query Orientation Dilemma on Tablets: Aspect Ratios to the Rescue?

Dilema Orientasi Pertanyaan Media CSS: Mencari Penyelesaian

Apabila bekerja dengan berbilang peranti tablet, bergantung pada pertanyaan media CSS untuk menggunakan orientasi peranti- gaya berasaskan boleh menimbulkan cabaran. Isu ini timbul apabila papan kekunci lembut muncul semasa input teks, yang mengecilkan halaman web yang boleh dilihat dan mencetuskan aplikasi CSS berasaskan landskap, walaupun peranti berada dalam mod potret.

Penyelesaian biasa ialah menambah kelas ke elemen HTML dan menyasarkan kelas khusus berdasarkan orientasi peranti:

<code class="html"><html class="landscape">
  <body>
    <h1 class="landscape-only">Element Heading - Landscape</h1>
    <h1 class="portrait-only">Element Heading - Portrait</h1></code>

Salin selepas log masuk

<code class="css">.landscape .landscape-only { display:block; }
.landspace .portrait-only  { display:none; }
.portrait .portrait-only   { display:block; }
.portrait .landscape-only  { display:none; }</code>

Salin selepas log masuk

Walau bagaimanapun, pendekatan yang lebih serba boleh terletak pada penggunaan pertanyaan media yang menyasarkan nisbah aspek. Untuk mod landskap:

<code class="css">@media screen and (min-aspect-ratio: 13/9) { /* landscape styles here */}</code>

Salin selepas log masuk

Untuk mod potret:

<code class="css">@media screen and (max-aspect-ratio: 13/9) { /* portrait styles here */}</code>

Salin selepas log masuk

Kaedah ini memastikan pengalaman yang konsisten tanpa mengira kehadiran papan kekunci lembut. Keberkesanannya boleh dikaitkan dengan fakta bahawa ia kekal tahan air pada ketinggian papan kekunci, tidak seperti pertanyaan media berasaskan orientasi.

Atas ialah kandungan terperinci Bagaimana untuk Mengatasi Dilema Orientasi Pertanyaan Media CSS pada Tablet: Nisbah Aspek untuk Penyelamat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!