移動端REM佈局模板(阿里高清方案)

時間 2019-12-01

標籤移動 rem 佈局模板阿里高清方案欄目無線简体版

原文原文鏈接

移動端REM佈局模板(阿里高清方案)，蠻好的，轉自:html

http://www.jianshu.com/p/985d26b40199

.web

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=0">
    
    <style>
* {
  box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
}

*, *:before, *:after {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  border: 0 none;
  font-size: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  
  /* 在X5新內核Blink中，在排版頁面的時候，會主動對字體進行放大，會檢測頁面中的主字體，當某一塊字體在咱們的斷定規則中，認爲字號較小，而且是頁面中的主要字體，就會採起主動放大的操做。然而這不是咱們想要的，能夠採起給最大高度解決 */
  max-height: 100000px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

em, strong {
  font-style: normal;
}

ul, ol, li {
  list-style: none;
}

body {
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","\5FAE\8F6F\96C5\9ED1",Arial,sans-serif;
    line-height: 1.5;
    color: #333;
    background-color: #f2f2f2;
    font-size: 0.24rem;
}

a {
  text-decoration: none;
}
.box {
  position: relative;
  max-width: 10rem;
  margin: 0 auto;
}
.navRoot {
  position: fixed;
  z-index: 50;
  bottom: 0;
  left:0;
  width: 100%;
  height: 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  border-top: 0.01rem solid #ccc;
  background:#f2f2f2;
}

.navLink {
  font-size: 0.42rem;
    -webkit-box-flex: 1;
    -ms-flex: auto;
    flex: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    line-height: 1;
    color: #666;
}
.navLink.active {
  color: #1abc9c
}
.navLinkIco {
  display: block;
  margin-bottom: 0.1rem;
}

.navLinkText {
  display: block;
  line-height: 1;
  font-size: 0.24rem;
}

.img-responsive {
  width: 100%;
}
    </style>

</head>

<body>
  
  <!-- 阿里高清方案 -->  
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]);
    flex(100, 1);</script>

<!-- 字形圖標 -->
<script src="https://use.fontawesome.com/f47f4563cb.js"></script>


<div class="box">
  <img src="http://temp.im/640x260/444/fff" class="img-responsive">
  <ul style="font-size:0.3rem; padding: 0.2rem">
    <li style="font-size:0.4rem"><a href="http://www.jianshu.com/p/985d26b40199">rem佈局（進階版）的一些說明</a></li>
    <li>1，你們先把這個頁面在不一樣設備模式下瀏覽下，感覺下。</li>
    <li>2，通常來講咱們的手機端效果圖是640px或750px。對於上圖這類須要等屏寬的圖片，只需讓其寬度設爲 100% 便可。</li>
    <li>3， 好比你在效果圖上量取的某個按鈕元素長 55px, 寬37px ，那你直接能夠這樣寫樣式：.myBtn {
   width: 0.55rem;
   height: 0.37rem;
}</li>
    <li>4，該佈局方案要求凡是涉及尺寸的，單位都是rem，好比，height width margin paddint top border-radius 等等。你只須要按照效果圖上標註的尺寸佈局便可。</li>
    <li>5,此方案也是默認 1rem = 100px，因此你佈局的時候，徹底能夠按照設計師給你的效果圖寫各類尺寸啦。毫不是每一個地方都要用rem，rem只適用於固定尺寸！</li>
    <li>6,特殊注意：字號font-size，邊框大小、圓角邊框的大小，這些最好仍是用px來寫。</li>
  </ul>
  <div class="navRoot">
    <a href="#" class="navLink active">
      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
      <span class="navLinkText">首頁</span>
    </a>
    <a href="#" class="navLink">
      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
      <span class="navLinkText">好店</span>
    </a>
    <a href="#" class="navLink">
      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
      <span class="navLinkText">簡單</span>
    </a>
    <a href="#" class="navLink">
      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
      <span class="navLinkText">複雜</span>
    </a>
    <a href="#" class="navLink">
      <i class="fa fa-home navLinkIco" aria-hidden="true"></i>
      <span class="navLinkText">異步</span>
    </a>
  </div>
</div>
  
</body>

</html>