移动web开发适配秘籍Rem #3

CruxF · 2018-03-01T14:28:37Z

前言

该文章通过慕课网教程《移动web开发适配秘籍Rem》编写而成，大体上的内容与课程一致。

移动端开发有如下的特点

跑在手机端的web页面（H5页面）；
跨平台；
基于webview；
告别IE拥抱webkit；
更高的适配和性能要求。

常见移动web适配方法

（1）PC端

960px/1000px居中；
盒子模型，定宽，定高；
display:inline-block。

（2）移动web

定高，宽度百分比；
flex；
Media Query(俗称媒体查询，和flex组合被称为响应式布局)。

Media Query详解

（1）基本语法
@media 媒体类型 and (媒体特性){
/css样式/
}
媒体类型：screen，print。。。
媒体特性：maxwidth，max-height，min-width，min-height。。。
（2）基本案例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>MediaQuery</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100%;
        background-color: red;
      }
      .inner:nth-child(1) {
        background-color: red;
      }
      .inner:nth-child(2) {
        background-color: blue;
      }
      .inner:nth-child(3) {
        background-color: yellow;
      }
      .inner:nth-child(4) {
        background-color: green;
      }
      @media screen and (max-width: 320px) {
        .inner {
          height: 100px;
          width: 25%;
          float: left;
        }
      }
      @media screen and (min-width: 321px) {
        .inner {
          height: 100px;
          width: 100%;
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </body>
</html>

rem原理与简介

（1）rem是一种字体单位，值根据html根元素大小而定，同样可以作为宽度，高度等单位；
（2）适配原理是将px替换成rem，动态修改html的font-size适配；
（3）兼容IOS6以上和Android2.1以上，基本覆盖所有流行的手机系统。
（4）rem原理代码分析

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>Rem</title>
    <style>
      html {
        font-size: 17px;
      }
      .box {
        height: 10rem;
        width: 10rem;
        background-color: red;
      }
      .text {
        color: #fff;
        font-size: 16px;
      }
      /*
       1rem = 17px = html的font-size(默认为16px)
       10rem = 170px
       * */
    </style>
  </head>
  <body>
    <div class="box">
      <p class="text">hello rem</p>
    </div>
  </body>
</html>

动态修改HTML中fontsize

方式一：使用media

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
      @media only screen and (min-width: 360px) and (max-width: 860px) {
        html {
          font-size: 300px;
        }
        div {
          color: red;
        }
      }
      @media only screen and (min-width: 860px) {
        html {
          font-size: 200px;
        }
        div {
          color: green;
        }
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
  </body>
</html>

方式二：采用JavaScript的方式

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
      }
      div {
        height: 4rem;
        width: 100%;
        background-color: black;
        font-size: 1rem;
        color: white;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div>hello rem</div>
    <script>
      // 获取视窗的宽度
      let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
      console.log(htmlWidth)
      // 获取视窗对象
      let htmlDom = document.getElementsByTagName('html')[0]
      console.log(htmlDom)
      // 设置html的font-size
      htmlDom.style.fontSize = htmlWidth / 10 + 'px'
    </script>
  </body>
</html>

rem进阶

（1）rem基准值的计算：1rem = html的font-size
（2）rem数值计算与构建：
（3）rem与scss结合使用：

@function px2rem($px) {
  $rem: 37.5px;
  @return ($px/$rem) + rem;
}
.demo {
  width: px2rem(75px);
  height: px2rem(37.5px);
}

// 编译后的结果
.demo {
  width: 2rem;
  heigth: 1rem;
}

（4）rem适配实战：采用rem高仿网易新闻H5版新闻列表页

步骤一：首先得安装好node和webpack，相关教程请上网自行百度，安装成功的结果是输入node -v、npm -v和webpack -v能够出现相应的版本号；
步骤二：命令行进入项目的目录，然后执行npm init，在项目中创建一个package.json文件；
步骤三：将课程中package.json文件里面中dependciess这部分代码copy进去；

"dependencies": {
    "css-loader": "^0.28.9",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.20.2",
    "url-loader": "^0.6.2"
}

注意： 由于我是全局安装webpack，因此在dependencies中少了一处配置。

步骤四：运行命令npm install
步骤五：创建一个webpack.config.js文件，并进行配置，参考配置
步骤六：跟着课程一点一点敲代码
最终课程效果

项目实战适配的原理分析

首先使用css预编译语言写好样式代码

@function px2rem($px) {
  // iphone6的宽度除以10
  $rem: 37.5px;
  @return ($px / $rem)+rem;
}

html {
  background-color: #f8f8f8;
}

.header {
  height: px2rem(40px);
  width: 100%;
  background-color: #6170b1;
  padding-left: px2rem(32px);
  box-sizing: border-box;
  .header-item {
    list-style-type: none;
    float: left;
    color: #D1DFB7;
    font-size: px2rem(16px);
    margin-right: px2rem(20px);
    line-height: px2rem(40px);
    &:nth-child(2) {
      color: #fff;
      font-size: px2rem(17px);
    }
  }
}

接着将该样式require进一个js文件中，动态更改html的font-size

require("./index.scss");
// 获得屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
// 获得html的dom
let htmlDOM = document.getElementsByTagName('html')[0];
// 设置html的fontsize
htmlDOM.style.fontSize = htmlWidth / 10 + 'px';

可能需要用到的其他知识

移动端H5解惑—页面适配
 Sass初入门
 webpack和node简单安装使用

The text was updated successfully, but these errors were encountered:

zszq · 2018-05-23T07:59:58Z

刚学这个找到你这里了觉得你写得不错能不能给个源码参考下呢

CruxF · 2018-05-24T05:50:24Z

@Smile-Lei 多谢赏识，源代码请点击这里，在那个WebMolie文件夹下面。老实说，这篇我过后看了一下，发现十分水，最好再来看看我整理的另一篇移动web基础知识整理

zszq · 2018-05-25T15:13:28Z

@CruxF 好的，谢谢！

Aemple · 2018-09-27T15:20:08Z

来个qq或者微信交流一下

CruxF changed the title ~~移动web开发与适配~~ 移动web开发适配秘籍Rem Mar 1, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

移动web开发适配秘籍Rem #3

移动web开发适配秘籍Rem #3

CruxF commented Mar 1, 2018 •

edited

Loading

zszq commented May 23, 2018

CruxF commented May 24, 2018

zszq commented May 25, 2018

Aemple commented Sep 27, 2018

移动web开发适配秘籍Rem #3

移动web开发适配秘籍Rem #3

Comments

CruxF commented Mar 1, 2018 • edited Loading

前言

移动端开发有如下的特点

常见移动web适配方法

Media Query详解

rem原理与简介

动态修改HTML中fontsize

rem进阶

项目实战适配的原理分析

可能需要用到的其他知识

zszq commented May 23, 2018

CruxF commented May 24, 2018

zszq commented May 25, 2018

Aemple commented Sep 27, 2018

CruxF commented Mar 1, 2018 •

edited

Loading