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{ 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">
具体做法同上。