如何調整CSS以適應特定的縮放等級？-css教學-PHP中文網

如何調整CSS以適應特定的縮放等級？

王林

發布： 2023-09-13 20:29:06

轉載

923 人瀏覽過

如何調整CSS以適應特定的縮放等級？

In this article, we will learn How to Adjust specific zoom level in CSS. Adjust specific zoom level in the website using CSS, we need CSS zoom properties with animation and @media rules.

What is the zoom level in CSS?

The "zoom" level refers to the level of magnification applied to a webpage in the css. It is alike to the "zoom" feature in a web browser, which allows to increase or decrease the size of the text and other elements on a webpage.

根據應用於網頁的放大等級來調整網頁的佈局和設計，我們可以在CSS中使用@media規則。

Adjust specific zoom level in CSS

在網頁設計方面，確保網站在任何裝置或螢幕尺寸上都能呈現出良好的外觀非常重要。一種方法是根據網頁的目前縮放等級調整CSS樣式。這樣可以確保無論用戶放大或縮小，網站都能呈現出良好的外觀。

我們使用min-zoom和max-zoom功能來調整特定縮放等級的CSS樣式。這些功能允許設定應用CSS的縮放等級範圍。

例如，您可以使用以下程式碼在縮放等級在110％和130％之間時套用特定的CSS樣式 -

@media screen and (min-zoom: 110%) and (max-zoom: 130%) {
   /* your CSS styles here */
}

登入後複製

調整特定縮放等級的CSS樣式的另一種方法是在CSS中使用@media規則。此規則允許根據媒體的條件（如螢幕大小或縮放等級）套用樣式。

例如，當縮放等級設定為200%時，可以使用以下程式碼套用特定的CSS樣式 -

@media screen and (zoom: 200%) {
   /* your CSS styles here */
}

登入後複製

This means that the style will be applied only when the zoom level is exactly 200%.

值得注意的是，zoom屬性不是標準的CSS屬性，而且並不被所有瀏覽器支援。此外，它不會影響佈局，只是修改元素的視覺呈現方式。

當調整特定縮放等級的CSS樣式時，考慮使用者體驗非常重要。例如，當使用者放大頁面時，您可能想要調整元素的字體大小或間距，以確保文字仍然可讀。同樣，當使用者縮小頁面時，您可能想要調整元素的位置或大小，以確保網站在較小的螢幕上仍然看起來很好。

Example

的中文翻譯為：

範例

<html>
<head>
   <style>
      body {
         height: 100vh;
         background-color: #FBAB7E;
         text-align: center;
      }
      .zoom-in-out-box {
         margin: 24px;
         width: 50px;
         height: 50px;
         background: #f50;
         animation: zoom-in-zoom-out 2s ease infinite;
      }
      @keyframes zoom-in-zoom-out { 
         0% {
            transform: scale(1, 1);
         }
         50% {
            transform: scale(1.5, 1.5);
         }
         100% {
            transform: scale(1, 1);
         }
      }
   </style>
</head>
<body>
   <h3>Zoom-in Zoom-out Demo</h3>
   <div class="zoom-in-out-box"></div>
</body>
</html>

登入後複製

Example

的中文翻譯為：

範例

<html>
<head>
   <title>TutorialsPoint</title> 
   <style>
      body{
         text-align:center;
      }
      .div1{
         margin: auto;
         background: #6ff;
         padding: 20px;
         width: 50px;
         height: 50px;
      }
   </style>
</head>
<body>
   <h2>Adjust CSS for specific zoom level</h2>
   <div class="div1" id="zoom"></div>
   <hr>
   <button onclick="zoom.style.zoom='100%'">Normal</button>
   <button onclick="zoom.style.zoom='80%'">ZoomOut</button>
   <button onclick="zoom.style.zoom='140%'">ZoomIn</button>
</body>
</html>

登入後複製