移动端布局方案

 

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">

具体做法同上。