web-rem布局-rem适配方案2

index.html:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
    <!-- 引入我们的flexible.js文件 -->
    <script src="js/flexible.js"></script>
    <title>rem适配方案2</title>
</head>

<body>
    <div class="search-content">
        <a href="#" class="classify"></a>
        <div class="search">
            <form action="">
                <input type="search" value="这是rem适配方案2">
            </form>
        </div>
        <a href="#" class="login">登录</a>
    </div>
</body>

</html>

index.css:

body {
    min-width: 320px;
    /* 默认是把屏幕划分成十等份，如果不设最大宽度body内文字会在最左侧，设置最大宽度可以达到一个版心居中的效果 */
    max-width: 750px;
    /* flexible给我们划分了十等份 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
}

a {
    text-decoration: none;
    font-size: .3333rem;
}

/* 这个插件默认的HTML文字大小cssroot 是16px */
/* 如果屏幕超过750px 那么就按照750px设计稿来走 不会让页面超过750px */
@media screen and (min-width: 750px) {
    html {
        font-size: 75px !important;
    }
}

/* search-content */
.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    height: 1.173333rem;
    background-color: #FFC001;
}

.classify {
    width: .5867rem;
    height: .9333rem;
    background-color: pink;
    margin: .1467rem .3333rem .1333rem;
    background: url(../images/classify.png) no-repeat;
    background-size: .5867rem .9333rem;
}

.search {
    flex: 1;
}

.search input {
    outline: none;
    border: 0;
    width: 100%;
    height: .88rem;
    font-size: .3333rem;
    background-color: #fff2cc;
    margin-top: .1333rem;
    border-radius: .44rem;
    color: #757575;
    padding-left: .7333rem;

}

.login {
    width: 1rem;
    height: .9333rem;
    margin: .1333rem;
    color: #fff;
    text-align: center;
    line-height: .9333rem;
    font-size: .3333rem;
}

flexible.js:

(function flexible (window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize () {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    }
    else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();

  // set 1rem = viewWidth / 10
  function setRemUnit () {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function (e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

web-rem布局-rem适配方案2

猜你喜欢