固定寬度設計


在網際網路早期,大多數使用者都是臺式電腦使用者。如今,你可以在筆記型電腦、手機、平板電腦、汽車等裝置上訪問網際網路。人們期望網站在所有平臺上都能顯示良好。在響應式網頁設計出現之前,網頁開發者和設計師嘗試過各種不同的方法,其中一種就是固定寬度設計。

顧名思義,“內容寬度固定”意味著,無論螢幕尺寸如何,內容的寬度始終保持不變。讓我們深入瞭解這篇文章,學習更多關於固定寬度設計的知識。

固定寬度設計

固定佈局是一種設計,它從網頁設計師指定的特定尺寸開始。無論顯示頁面的瀏覽器視窗有多大,它們都保持該寬度。在大多數情況下,固定寬度佈局使設計師能夠更直接地控制網站的外觀。那些有印刷背景的設計師通常更喜歡它,因為它允許設計師對佈局進行微調,並在不同的瀏覽器和電腦上保持一致性。

示例

讓我們來看下面的例子,我們將設計一個具有固定寬度的網頁。

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         width: 800px;
         font-family: verdana;
         line-height: 1.6;
         padding: 0 15px;
         color: #DE3163;
         background-color: #D5F5E3;
      }
   </style>
</head>
<body>
   <h1>TutorialsPoint</h1>
   <article>
      <p> The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated, we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on topics ranging from programming languages to web designing to academics and much more. </p>
   </article>
</body>
</html>

當我們執行上面的程式碼時,它將生成一個輸出,其中包含應用了CSS的文字以及網頁上顯示的固定寬度。

使用固定寬度的優點

讓我們來看看使用固定寬度的一些優點:

  • 無論畫布大小如何,頁面的基本結構都保持不變。希望向所有訪問者展現統一企業形象的公司可能會認為這是重中之重。

  • 當在寬屏顯示器上檢視頁面時,固定寬度頁面和列透過防止行過長,使您能夠更好地控制行長。

  • 在較小的顯示器上,文字不會因固定寬度元件(如影像)而中斷,因為它的寬度等於全頁寬度。

固定寬度的缺點

現在,讓我們來看看固定寬度的一些缺點:

  • 在較小的瀏覽器視窗中,固定寬度設計需要水平滾動。大多數人都討厭水平滾動。

  • 在較大的顯示器上,它們會留下大片空白區域,這會留下很多空區域,並且需要比必要的更多的垂直滾動。

  • 固定寬度佈局難以適應使用者對字型大小的更改。對於字型大小的適度增加,它們可能還可以,但對於大幅度增加,佈局可能會受到影響。

示例

在下面的例子中,我們將比較固定寬度和響應式設計之間的區別。

<!DOCTYPE html>
<html>
<head>
   <style>
      .tutorial {
         background-color: #D5F5E3;
         width: 600px;
         height: 20px;
         margin: 200px auto;
         text-align: center;
         font-family: verdana;
         color: #DE3163;
      }
      .tutorial1 {
         background-color: #E8DAEF;
         width: 50%;
         height: 20px;
         margin: 20px auto;
         text-align: center;
         font-family: verdana;
         color: #DE3163;
      }
   </style>
</head>
<body>
   <main>
      <div>
         <div class="tutorial">WELCOME</div>
         <div class="tutorial1">TUTORIALSPOINT</div>
      </div>
   </main>
</body>
</html>

執行上述程式碼後,將彈出一個輸出視窗,顯示文字:一個應用了固定寬度,另一個應用了響應式寬度,顯示在網頁上。當用戶嘗試更改視窗大小時,我們將注意到其行為的變化。

更新於:2024年1月19日

瀏覽量:130

啟動你的職業生涯

透過完成課程獲得認證

開始學習
廣告