1.采用縮放比為1的meta name=viewport的標簽。在頁面采用px寫法。也要根據設計圖。如是設計圖是2倍圖，那么相應的px需要除以2,如果設計圖是3倍圖，那么相應px尺寸除以3。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3.采用Rem+Vw布局。
介紹：
1）rem尺寸是一個相對與html 元素的相對尺寸。 比如
html { font-size:12px } 那么 1rem就是 12px
2）vw，vh 也是一個相對尺寸， 1vw表示 1%的視口寬帶， 1vh表示 1%的視口高度。
設計設計圖要素 {1。如果是640px，750px ,DPR=2,兩倍圖 } 。
舉個例子，假設設計圖是 750px。 那么
100vw == 750px; 1px =0.13333vw ==>100px ==13.3333vw ==calc (100vw / 7.5) 這里可以根據自己需要的結果進行換算。
那么 1rem==100px==13.333vw.
html { font-size:cal (100vw / 7.5) } //常規html的font-size為100px；
並加入
<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, minimum-scale=2.0, user-scalable=no">
在具體寫css的時候； div設計圖 寬 100px, 高 50px.
那么 div{ width:1rem; height:0.5rem }
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------
如果是3倍圖（設計設計圖要素 {1。如果是1080px ,DPR=3,兩倍圖 } 。）
100vw == 1080px; 1px =0.0925925925vw ==>100px ==9.25925925vw ==cald (100vw / 10.80)
html { font-size:cal (100vw / 10.80) } //常規html的font-size為100px；
並加入
<meta name="viewport" content="width=device-width, initial-scale=3.0, maximum-scale=3.0, minimum-scale=3.0, user-scalable=no">
具體做法同上。