移动端经常使用布局方法

时间 2019-11-08

标签移动经常使用布局方法栏目无线繁體版

原文原文链接

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

一、经过设置viewport缩放来实现chrome

二、经过rem相对单位来实现浏览器

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

大体说一下实现思路：布局

一、经过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进行调试的时候会出现纵向滚动条异位的现象，但在真机测试中不存在这种问题，暂时能够忽略。scala

下面是一个完整的经过缩放实现的布局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{
    width:320px;
  }
 .header{width:320px;background-color: #94ffa5;height:40px;}
 .content{width:320px;overflow:hidden}
 .content div{padding-top:20px;padding-bottom:20px;text-align:center;width:160px;float: left}
 .footer{width: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>

二、经过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{width:32rem;font-size:14px;}
 .header{width:32rem;height:40px;background-color: #94ffa5}
 .content{overflow:hidden;width:30rem;margin: auto;text-align: center;background-color: antiquewhite}
 .content > div{width: 50%;float: left}
 .footer{width: 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 。