移动端常用布局方法

目前，主流高性能移动端网页页面布局方案有两种（基于宽度320px，按设计图实现方式）

1、通过设置viewport缩放来实现

2、通过rem相对单位来实现

viewport,rem基础知识，可参见：

大致说一下实现思路：

1、通过viewport进行移动端适配：

(1) 按照宽度320px实现基本网页布局及样式

(2) 动态设置viewport属性，做适当缩放

eg:通过window.screen.width获取屏幕宽度，如果当前设备屏幕宽度为320px,则缩放比例为320/320=1，
动态设置viewport content initial-scale=1.0,如果屏幕宽度为375，则缩放比例为375/320=1.2

(function(){
  var vt=document.getElementById("viewport");
  vt.getAttribute("content");
  var scale=window.screen.width/320;
  vt.setAttribute("content","width=320,initial-scale="+scale+",user-
  scalable=no");
 })()

在chrome进行调试的时候会出现纵向滚动条异位的现象，但在真机测试中不存在这种问题，暂时可以忽略。

下面是一个完整的通过缩放实现的布局demo

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" id="viewport" content="">
   <title>移动端基于320px缩放适配</title>
</head>

<script>
  (function(){
  var vt=document.getElementById("viewport");
  vt.getAttribute("content");
  var scale=window.screen.width/320;
  vt.setAttribute("content","width=320,initial-scale="+scale+",user-scalable=no");
  })()
</script>

 <style>
  html,body{padding: 0px;margin: 0px;}
  body{
    320px;
  }
 .header{320px;background-color: #94ffa5;height:40px;}
 .content{320px;overflow:hidden}
 .content div{padding-top:20px;padding-bottom:20px;text-align:center;160px;float: left}
 .footer{320px;background-color: rosybrown;height:40px;}
 </style>

 <body>
   <div class="header"></div>
   <div class="content">
     <div>
       <p>content1</p>
       <p>content1</p>
       <p>content1</p>
       <p>content1</p>
       <p>content1</p>
    </div>
    <div>
       <p>content2</p>
       <p>content2</p>
       <p>content2</p>
       <p>content2</p>
       <p>content2</p>
    </div>
  </div>
  <div class="footer"></div>
  </body>
 </html>

2、通过rem相对单位实现移动端适配

大概的思路就是在html根节点定义font-size的值，及设置1rem的宽度，这个宽度也是基于320px基础进行缩放的，如果设备宽度是320px时,设置1rem=10px,对于body 32rem=32 10=320px;那么当屏幕宽度为375px是，则1rem=12px,body宽度就相应为32rem=32 12=375px。根节点单位可以通过js来进行初始化

(function(){
   var screenwidth=window.screen.width;
   rootrem=screenwidth/320*10;
   document.getElementsByTagName("html")[0].style.fontSize=rootrem+"px";
})()

也可以通过媒体查询进行设置,不过媒体查询在设定阈值时可能不大好做。

下面是一个完整的通过rem来实现的布局DEMO

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
   <title>rem实现移动端适配,基于320px设计</title>
 </head>

 <script>
//   在不同终端root 1rem,也可以用媒体查询来做
(function(){
    var screenwidth=window.screen.width;
    rootrem=screenwidth/320*10;
    document.getElementsByTagName("html")[0].style.fontSize=rootrem+"px";
})()
</script>

<style>
html,body{padding:0px;margin:0px;}
/*设置body宽度为屏幕宽度,并重新设置字体大小*/
 body{32rem;font-size:14px;}
 .header{32rem;height:40px;background-color: #94ffa5}
 .content{overflow:hidden;30rem;margin: auto;text-align: center;background-color: antiquewhite}
 .content > div{ 50%;float: left}
 .footer{ 32rem;height:40px;background-color:royalblue}
</style>

<body>
  <div class="header"></div>
   <div class="content">
    <div>
      <p>content1</p>
      <p>content1</p>
      <p>content1</p>
      <p>content1</p>
      <p>content1</p>
    </div>
    <div>
      <p>content2</p>
      <p>content2</p>
      <p>content2</p>
      <p>content2</p>
      <p>content2</p>
    </div>
   </div>
   <div class="footer"></div>
 </body>
</html>

chrome调试过程中会出现一个问题，因为chrome浏览器设置了最小font-size=12px,当设置小于12px时不起作用，可以选择其他的调试工具代替，如firforx User Agent Switcher 。