版權宣告：本文為章魚哥原創文章，若要轉載，請註明出處 https://blog.csdn.net/qq_40388552/article/details/84838474
  前段時間做了一個大資料前端頁面顯示的專案，在專案的收尾階段，遇到了頁面自適應的問題，如何讓頁面去相容不同尺寸大小的螢幕，相信很多人也會碰到類似的問題，在這裡我將我自己嘗試出來的解決方案分享一下，請多指教。

採用的方案核心的3個步驟

1. 採用bootstrap的的網格系統來進行頁面佈局劃分。要實現自己想要的頁面效果就需要結合百分比和div巢狀來實現，這都是基礎哈。

2. 整個頁面的寬度width和高度height都採用百分比

   的形式來設計，從一開始的標籤開始到裡面的內容層層遞進都設定上百分比。
   注意：當你發現對某個元素設定的百分比沒有起作用時，這是因為百分比的大小是相對其父級元素寬高的大小，如最外層元素設定的百分比是對應螢幕而言的。

3. 字型如何去做自適應我採用的是使用Css3的@media 查詢，通過@media可以針對不同的螢幕尺寸設定不同的樣式，我們這裡對字型的樣式進行修改，於是我在’style’標籤中寫了類似如下的一串程式碼，來改變body的字型大小,你也可以把它寫成css檔案然後引入到網頁中。

  @media screen and (max-width: 1920px) {
   body { font-size: 16px;}
   }
    @media screen and (max-width: 1200px) {
   body { font-size: 14px;}
   }
    @media screen and (max-width: 1000px) {
   body { font-size: 12px;}
   }
    @media screen and (max-width: 800px) {
   body { font-size: 8px;}
   }
    @media screen and (max-width: 700px) {
   body { font-size: 7px;}
   }
    @media screen and (max-width: 600px) {
   body { font-size: 6px;}
   }
 

這個時候你會發現我們只是在不同尺寸大小的螢幕下修改標籤的字型大小，其他地方的字型我們沒有去設定，這裡我找到一種比較好的方法，使得我們只需修改裡面的字型大小,就可以實現整個網頁字型大小的自適應，方法就是使用css 的em單位來對頁面中所有的字型大小進行統一設定，em相對長度單位。相對於當前物件內文字的字型尺寸，如當前對行內文字的字型尺寸未被人為設定，則相對於瀏覽器的預設字型尺寸。 在標籤中設定font-size後em就會以他作為標準，如font-size:16px;那麼1em=16px，這時我們整個網頁中其他的font-size就可以換算成多少em值 如font-size:1em;、font-size:0.75em、font-size:2em等等。通過@media和em我們實現了字型的自適應。
注意：

  通過這三步我們就實現了整個頁面的自適應問題，當然不同尺寸大小的螢幕合適多少大小的字型，這需要自己結合實際情況來除錯。