移动端布局-实例

1.rem布局案例 (demo） 

/*媒体查询*/
@media screen and (min-width:320px){
			html{font-size:10px;}
			}
@media screen and (min-width:360px){
			html{font-size:11.25px;}
			}
			
		
@media screen and (min-width:375px){
			html{font-size:11.71875px;}
		
			}							
@media screen and (min-width:414px){
			html{font-size:12.9375px;}
		
			}
		
		
@media screen and (min-width:480px){
			html{font-size:15px;}
				}
		
@media screen and (min-width:568px){
			html{font-size:17.75px;}
			}
			
@media screen and (min-width:640px){
			html{font-size:20px;}
			}

　　

2.淘宝flexible布局 (demo)

//author:caibaojian
//website:http://caibaojian.com
//weibo:http:weibo.com/kujian
//这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)
!function(e,t){function n(){var n=l.getBoundingClientRect().width;t=t||540,n>t&&(n=t);var i=100*n/e;r.innerHTML="html{font-size:"+i+"px;}"}var i,d=document,o=window,l=d.documentElement,r=document.createElement("style");if(l.firstElementChild)l.firstElementChild.appendChild(r);else{var a=d.createElement("div");a.appendChild(r),d.write(a.innerHTML),a=null}n(),o.addEventListener("resize",function(){clearTimeout(i),i=setTimeout(n,300)},!1),o.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(i),i=setTimeout(n,300))},!1),"complete"===d.readyState?d.body.style.fontSize="16px":d.addEventListener("DOMContentLoaded",function(e){d.body.style.fontSize="16px"},!1)}(750,750);

　

3.设置meta标签（demo）

  <meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi">

 

转载于:https://www.cnblogs.com/zph666/p/9229815.html