今天面對如此眾多的pc瀏覽器，手機瀏覽器，不同螢幕大小，web頁面不僅要適應瀏覽器相容，還要適應螢幕大小。有可能為了移動端，再從新做一套頁面，很麻分。
下面我來說說通過注意使用css的方式，在一定程度上進行螢幕自適應，避免瀏覽器螢幕適應問題。
首先，使用乙個viewport:
2，不使用絕對寬度：
width:*** px;，可以使用em或%代替，字型也一樣
3. 推薦使用float，也就是流動布局。這樣可以將多出來的部分浮動到下面。
4. 適當使用
overflow，不濫用。
5. 選擇載入css:
上面的**意思是，如果螢幕寬度小於400畫素(max-device-width: 400px)，就載入tinyscreen.css檔案。media="screen and (max-device-width: 400px)"
href="tinyscreen.css" />
如果螢幕寬度在400畫素到600畫素之間，則載入smallscreen.css檔案。
7. 使用@media：
@media screen and (max-device-width: 400px)
#sidebar
}8. 自適應：
img 或
img, object
引用：
讓頁面自適應螢幕
貼 use strict param basefontsize 100 基礎fontsize,預設50px,對於iphone的設計稿,1rem 100px 方便裸算rem 有的是16px,用瀏覽器預設 param psdwidth 750 設計稿預設寬度,以750為基準 object.definep...
螢幕自適應
1 media screen and max width 240px 寬度小於240px執行 media screen and min width 240px 寬度大於240px執行 2 flexible.js 在所有資源載入之前先放入 3 使用數值單位時可以嘗試使用rem作為單位替代px。rem一...
vue專案螢幕自適應 Vue專案螢幕自適應
一 安裝lib flexible npm i lib flexible d 二 在main.js中引入 import lib flexible flexible 三 在index.html檔案中設定meta標籤 四 然後在專案中寫css時會自動將rem轉化為px,需要安裝px2rem這個工具 npm...