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

首頁

web前端

css教學

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

王林

Sep 13, 2023 pm 08:29 PM

如何調整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 id="Zoom-in-Zoom-out-Demo">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 id="Adjust-CSS-for-specific-zoom-level">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>