前端移动Web第三天：苏宁首页-第二种简洁高效的rem适配方案flexible.js

时间 2020-08-18 标签前端移动 web 第三天苏宁首页第二种简洁高效 rem 适配方案 flexible.js flexible js

简洁高效的rem适配方案flexible.js

手机淘宝团队出的简洁高效移动端适配库
咱们不再须要在写不一样屏幕的媒体查询，由于里面js作了处理
它的原理是把当前设备划分为10等份，可是不一样设备下，比例仍是一致的。
咱们要作的，就是肯定好咱们当前设备的html 文字大小就能够了
好比当前设计稿是 750px，那么咱们只须要把 html 文字大小设置为 75px(750px / 10) 就能够
里面页面元素rem值：页面元素的px 值 / 75
剩余的，让flexible.js来去算javascript

github地址：https://github.com/amfe/lib-flexiblecss

使用适配方案2制做苏宁移动端首页

1. 技术选型

方案：咱们采起单独制做移动页面方案
技术：布局采起rem适配布局2（flexible.js + rem）
设计图：本设计图采用 750px 设计尺寸html

2. 搭建相关文件夹结构

3. 设置视口标签以及引入初始化样式还有js文件

<meta name="viewport" content="width=device-width, user-scalable=no, 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">

咱们页面须要引入这个js文件：java

在 index.html 中 引入 flexible.js 这个文件
<script src=“js/flexible.js”> </script>

4. body样式

body {
	min-width: 320px;
	width:10rem;
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial,Helvetica;
	background: #F2F2F2;
}

VSCode px 转换rem 插件 cssrem

注意：这个插件默认html字体大小为 16px，能够手动更改大小。

在这里便可显示是否更改完成：
git

而后重启 VScode 软件，便可使用这个插件！！！

如下为源代码（未写完）：github

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, 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">

    <!-- 页面须要引入 JS文件 ,平均分红十等分-->
    <script src="js/index.js"></script>

    <title>Document</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>

(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))

body {
    min-width: 320px;
    max-width: 750px;
    /* flexible 给咱们划分了 10 */
    width: 10rem;
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}
a {
    text-decoration: none;
    font-size: .333333rem;
}
/* 若是咱们的屏幕超过了 750px 那么咱们就按照设计稿来走 不会让咱们页面超过750px */
@media screen and (min-width: 750px) {
    html {
        /* 加 最高 权重。就能够更改： */
        font-size: 75px !important;
    }
}

.search-content {
    display: flex;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    width: 10rem;
    height: 1.173333rem;
    background-color: #FFC001;
}
.classify {
    width: .586667rem;
    height: .933333rem;
    background: url(../images/classify.png) no-repeat;
    margin: .146667rem .333333rem .133333rem;
    background-size: .586667rem .933333rem;
}
.search {
    flex: 1;
}
.search input {
    outline: none;
    border: 0;
    width: 100%;
    height: .88rem;
    font-size: .333333rem;
    background-color: #FFF2CC;
    margin-top: .133333rem;
    border-radius: .44rem;
    padding-left: .733333rem;
    color: #757575;
}
.login {
    width: 1rem;
    height: .933333rem;
    margin: .133333rem;
    color: #fff;
    text-align: center;
    line-height: .933333rem;
    font-size: .333333rem;
}