移動端經常使用佈局方法

時間 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 。