Html5Css3自适应布局总结

布局单位px em rem vw vh

绝对单位 px
相对单位
- em 针对于父元素
- rem 针对于根(html)元素
- vh 100%高
- vw 100%宽
补充
- 谷歌浏览器默认字体大小: 16px 最小值12px
- 1em=16px 10px=0.625em 10px=62.5em

自适应布局-网页适应各种屏幕大小

移动端webapp

ui（美工）给的设计图大小是750
web前端375(iphone6的尺寸下开发)

//淘宝font.js 自适应字体
;
(function (win, lib) {
  var doc = win.document;
  var docEl = doc.documentElement;
  var metaEl = doc.querySelector('meta[name="viewport"]');
  var flexibleEl = doc.querySelector('meta[name="flexible"]');
  var dpr = 0;
  var scale = 0;
  var tid;
  var flexible = lib.flexible || (lib.flexible = {});

  if (metaEl) {
    console.warn('将根据已有的meta标签来设置缩放比例');
    var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
    if (match) {
      scale = parseFloat(match[1]);
      dpr = parseInt(1 / scale);
    }
  } else if (flexibleEl) {
    var content = flexibleEl.getAttribute('content');
    if (content) {
      var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
      var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
      if (initialDpr) {
        dpr = parseFloat(initialDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
      if (maximumDpr) {
        dpr = parseFloat(maximumDpr[1]);
        scale = parseFloat((1 / dpr).toFixed(2));
      }
    }
  }
  if (!dpr && !scale) {
    var isAndroid = win.navigator.appVersion.match(/android/gi);
    var isIPhone = win.navigator.appVersion.match(/iphone/gi);
    var devicePixelRatio = win.devicePixelRatio;
    if (isIPhone) {
      // iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
      if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
        dpr = 3;
      } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
        dpr = 2;
      } else {
        dpr = 1;
      }
    } else {
      // 其他设备下，仍旧使用1倍的方案
      dpr = 1;
    }
    scale = 1 / dpr;
  }
  docEl.setAttribute('data-dpr', dpr);
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
      docEl.firstElementChild.appendChild(metaEl);
    } else {
      var wrap = doc.createElement('div');
      wrap.appendChild(metaEl);
      doc.write(wrap.innerHTML);
    }
  }

  function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    if (width / dpr > 540) {
      width = 540 * dpr;
    }
    var rem = width / 10;
    docEl.style.fontSize = rem + 'px';
    flexible.rem = win.rem = rem;
  }
  win.addEventListener('resize', function () {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
  }, false);
  win.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      clearTimeout(tid);
      tid = setTimeout(refreshRem, 300);
    }
  }, false);
  if (doc.readyState === 'complete') {
    doc.body.style.fontSize = 12 * dpr + 'px';
  } else {
    doc.addEventListener('DOMContentLoaded', function (e) {
      doc.body.style.fontSize = 12 * dpr + 'px';
    }, false);
  }

  refreshRem();
  flexible.dpr = win.dpr = dpr;
  flexible.refreshRem = refreshRem;
  flexible.rem2px = function (d) {
    var val = parseFloat(d) * this.rem;
    if (typeof d === 'string' && d.match(/rem$/)) {
      val += 'px';
    }
    return val;
  }
  flexible.px2rem = function (d) {
    var val = parseFloat(d) / this.rem;
    if (typeof d === 'string' && d.match(/px$/)) {
      val += 'rem';
    }
    return val;
  }
})(window, window['lib'] || (window['lib'] = {}));

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./webfont.js"></script>
    <style>
      *{margin:0;padding:0;}
      #box{
        /* 1rem 相当于37.5px */
        width:1rem; 
        height:1rem;
        background:red;
      }
    </style>
    <title>Document</title>
  </head>

  <body>
    <div id="box"></div>
  </body>

</html>

双飞翼布局

3栏布局

左和右是固定100宽度。中间内容自适应 dom优先加载：中间内容。

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="./webfont.js"></script> -->
    <style>
      *{margin:0;padding:0;}
      .main div{
        float:left;
      }
      .content{
        width:100%;
        background:orange;
      }
      .content .item{
        padding-left:100px;
        padding-right: 100px;
      }
      .left{
        width:100px;
        background: red;
        /* 负的左边100% */
        margin-left: -100%;

      }
      .right{
        width:100px;
        background:blue;
        /* 负的右边块的宽度 */
        margin-left: -100px;
      }

    </style>
    <title>Document</title>
  </head>

  <body>
    <div class="main">
      <div class="content">
       <div class="item">中</div>
      </div>
      <div class="left">左</div>
      
      <div class="right">右</div>
    </div>
  </body>

</html>

效果图

弹性盒布局-direction-wrap-flow

弹性盒布局(可伸缩的盒子)

优势
- 写起来比较简单
- 灵活性代码优雅
缺点
- 不兼容ie和安卓低级版本

使用

容器 (父元素)
- display:flex； //让容器成员是弹性项目
- flex-direction: 决定主轴是什么方向(项目排序方向)
  - row:横向默认值
  - column: 纵向
  - row-reverse: 横向翻转
  - column-reverse: 纵向翻转
- flex-wrap: 让项目换行
  - nowrap: 不换行默认值
  - wrap 换行
- flex-flow: 复合属性 (direction wrap)
- justify-content: 横向盒子摆放
  - flex-start: 靠左
  - flex-end: 靠右
  - center 居中
  - space-between 两端对齐项目两端对齐，项目之间的距离都相等。
  - space-around 每个项目两侧距离相等，两侧距离是项目中间距离的一半。
- align-items: 纵向盒子摆放
  - flex-start：靠上 (默认值)
  - flex-end: 靠下
  - center: 垂直居中
  - baseline: 以项目第一行文字为基准线。
  - stretch 如果容器没有设置高度或者auto则占满整个高度。
容器成员 | 项目 (子元素)
- order: 排序方式,数值越小，越靠前
- flex-grow: 默认值0,等比例放大。(最常用)
- flex-shrink: 默认值1，比例缩小。
- flex-basis: 相当于width
- flex: 复合属性(grow+shrink+basis) 默认值 0 1 auto(后面两个值是可选择)

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="./webfont.js"></script> -->
    <style>
      *{margin:0;padding:0;}
      ul{
        list-style: none;
        display:flex;
        /* 换行 */
        flex-wrap: wrap;
      }
      ul li{
        width:300px;
        height:300px;
        background: red;
        margin:10px;
        text-align:center;
        line-height: 300px;
        font-size: 50px;
        color:#fff;
      }
    </style>
    <title>Document</title>
  </head>

  <body>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>

</html>

弹性盒布局(justify和algin居中)

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="./webfont.js"></script> -->
    <style>
      *{margin:0;padding:0;}
      .container{
        width:1600px;
        height: 700px;
        border:1px solid blue;
        display: flex;
        /* 靠右 */
        /* justify-content:flex-end; */
        /* 居中 */
        justify-content:center;
      }
      .container div{
        margin:10px;
        background:red;
        height:100px;
        width:100px;
        /* flex-grow:1 子元素比例一致 */
        flex-grow: 1;
        
      }
      .container div.item{
        /* 中间的盒子是兄弟盒子的5倍。 */
        flex-grow:5;
        /* 子元素  */
        /* order：默认是0 ,那个子元素小，哪个排在前面 */
        /* order:-1; */
      }
    </style>
    <title>Document</title>
  </head>

  <body>
    <div class="container">
      <div>1</div>
      <div class="item">2</div>
      <div>3</div>
    </div>
  </body>

</html>

圣杯布局

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- <script src="./webfont.js"></script> -->
    <title>圣杯布局</title>
    <style>
      *{margin:0;padding:0;}
      .container{
        display: flex;
        /* 100%高 */
        height: 100vh;
        /* 纵向排序 */
        flex-direction: column;
      }
      header{
        background: #ccc;
        flex-basis: 150px;
      }
      section{
        flex:1;
        background: pink;
        /* 子弹性盒子 */
        display: flex;
      }
      section .left{
        background: red;
        flex-basis: 300px;
      }
      section .center{
        background: blue;
        flex:1;
      }
      section .right{
        background: red;
        flex-basis:300px;
      }
      footer{
        background:green;
        flex-basis: 150px;
      }
    </style>
    
  </head>

  <body>
    <div class="container">
      <header>头部150px</header>
      <section>
        <div class="left">左300px</div>
        <div class="center">中可变</div>
        <div class="right">右300px</div>
      </section>
      <footer>底部150px</footer>
    </div>
  </body>

</html>