移动端布局-实例

1.rem布局案例 (demo） 

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

/*媒体查询*/ @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)

?

1 2 3 4 5

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