現在還是有各種各樣的瀏覽器和屏幕比例，做的網頁，怎麼樣才能適配所有的呢？請講講思路，貼上代碼也行。

還有一個問題也很頭疼，移動端適配。新出的蘋果X比例和原來手機有差別，原先做的H5頁面在X上圖形位置不對，這個該如何解決。

方案1（邏輯像素）：

  • 設置meta view-port w=device-width
  • 將設計稿尺寸除以一個整數換算為320-414寬度左右（比如750/2）
  • 使用px作為單位，按照上一條規則得出的尺寸進行測量
  • 配合一些flex，來適應不同手機的布局

方案2（等比縮放）：

  • 設置meta view-port w=設計稿寬度
  • 使用px作為單位，1：1布局

方案3（等比縮放）：

  • 設置meta view-port w=device-width
  • 使用vmin進行布局，1vmin就是設計稿的1%寬度

方案4（等比縮放）：

  • rem方案，自己網上找吧，不多說

推薦程度：1 &> 3 &> 2 &> 4

媒體函數，高清屏方案以及rem和vh 方案。

這篇文章也許能幫助你：

關於移動端適配，你必須要知道的 - 掘金?

juejin.im

響應式布局。

flex布局

響應式

media query不同設備跳轉不同url多套設計

flex

百分比balabalabala還可以跳槽

對於相同比例不同大小的屏幕，布局時可以用百分比來控制大小，而不是用像素等絕對大小。

對於不同設備間的適配，最簡單的是響應式布局的方法。例如@media(max-width：640px)這樣分別寫移動端和PC段的布局，在樣式中使用rem做單位而不是px（rem等於當前默認的font-size的值）

屏幕大小利用媒體查詢，瀏覽器就很麻煩了，兼容性一直是一個大問題

js動態調整網頁縮放scale

推薦閱讀：
相关文章