H5移動前端完美佈局之－margin百分比的使用

時間 2019-11-11

原文原文鏈接

一，背景css

在移動端頁面開發咱們常常會遇到一件尷尬的事咱們所開發出來的頁面跟設計師所給的頁面差異很大再加上移動設備屏幕的大小不一出來的效果更是良莠不齊

html

然後....前端

固然現實狀況沒有這麼糟糕...但由於前端頁面是是最直接的展現給用戶的若是跟差別太大這個頁面實際上是失敗的而設計師也會不斷的找你調視覺，因此咱們就要最大限度的實現設計做爲設計師和用戶的橋樑完美的展示頁面...css3

二，使用百分比web

在移動頁面的佈局上，咱們必需要考慮的是移動設備分辨率多樣性，使用傳統的px來定義一個塊兒級元素是不理想的，由於你要爲全部分辨率的手機都作適配是一件極其繁瑣的事，雖然css3的媒體查詢能夠實現，但我我的認爲媒體查詢只適合跨平臺的兼容，好比手機，ipad，pc 這三種設備同時實現一個頁面並達到響應效果的時候，百分比的使用能夠解決這個問題，由於他是相對的相對於設備的寬度來使頁面在不一樣分辨率的手機上達到完美的響應，接下來咱們慢慢聊如何使用百分比chrome

三，百分比＋margin 實現百分百響應app

在移動端開發的時候咱們的頁面初始化的時候都會寫上這樣一行代碼iphone

html,body{width:100%; position:relative;}

將html,body元素的寬度設置爲100%，目的是將頁面100%撐開達到與設備寬度一致,由於百分比都是相對於父級而言的，將根節點的元素設置爲100%，其子元素的寬度都會相對於父級來設置。佈局

接下來咱們研究一下margin和百分比的配合使用ui

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <meta name="apple-touch-fullscreen" content="YES" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <link rel="stylesheet" type="text/css" href="../css/reset.css">
     <style type="text/css">
       html,body{ width: 100%; position:relative;}
      .all{ width: 100%;}
      .header{ width: 100%; background: #ff6666; height: 40px; margin-top: 20%;}
    </style>
  </head>
  <body>
      
      <div class="all">
        <header class="header"></header>
      </div>

  </body>
</html>