导航
导航
文章目录
  1. 一、meta标签
  2. 二、手淘的flexible
  3. 三、放弃px拥抱rem
  4. 四、CSS处理器(SASS)
  5. 五、图示
  6. 六、图示代码
  7. 七、开源示例

移动端屏幕适配的解决

2017.03.15 hzzly

随着手机硬件配置的飞速增长、屏幕尺寸的越来越大和网络带宽的逐渐提升，越来越多的PC业务和服务在向移动端转移。然而在这移动端的时代，为了处理各终端屏幕的适配，是否乱了手脚呢？

虽然移动端的页面与PC的页面相比简单了不少，但让我们头痛的事情还是要想尽办法让页面能适配众多不同的终端设备。
在前几个外包项目中，我做的主要都是移动微信端的。期间也遇到了不同屏幕大小的适配问题，所以今天特来分享一下我的解决方法。

项目地址： https://github.com/hzzly/xyy-vue
demo地址： http://hjingren.cn/xyy-vue/
欢迎大家的star啦~

一、meta标签

meta之viewport，其主要用来告诉浏览器如何规范的渲染Web页面，而你则需要告诉它视窗有多大。在开发移动端页面，我们需要在html中设置meta标签如下：

1
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二、手淘的flexible

flexible是一个制作H5适配的开源库，需要在html中引入，可以直接使用阿里CDN：

1
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>

执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说1、2或者3，同时会给html加上对应的font-size的值，比如说37.5px。

三、放弃px拥抱rem

用px写的是绝对单位，这种方法肯定不行。让我们来拥抱rem吧！！！

我们知道 em 的计算是基于父级元素的，在实际使用中给我们的计算带来了很大的不便。所以 rem 的出现解救了我这样不会算术的人，再也不用担心父级元素的 font-size 了，因为它始终是基于根元素（html） 的。
比如默认的 html font-size=16px，那么我想设置12px 的文字就是：12÷16=0.75（rem）

如果对rem还有不懂的可以先看看这个CSS3的REM设置字体大小

刚刚我们引入了手淘的flexible，并给html加了font-size，如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。

四、CSS处理器(SASS)

  1. 使用Sass的同学，可以使用Sass的函数、混合宏这些功能来实现：
1
2
3
@function px2rem($px, $base-font-size: 75px) {
    @return ($px / $base-font-size) * 1rem;
}

这里的这个参数$base-font-size: 75px，可以通过(psd文件的宽度/10)来计算。假如psd宽750，则$base-font-size为75px。

使用：

psd中量多少就写多少

1
2
3
4
5
//比如量取box宽为190，高为190，则代码：
.box {
    width: px2rem(190px);
    height: px2rem(190px);
}
  1. 没用过的可以用sublime的cssrem的插件实现。

五、图示

flexible

六、图示代码

因为这是商业代码，所以就只贴了一部分代码，忘见谅，谢谢
最下面有我开源项目的代码，可以参考，如果对你有帮助的话，给个star。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
//index.html
<!DOCTYPE html>
<html>
<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">
  <title>Demo</title>
  <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
  <link rel="stylesheet" href="index.css">
</head>
<body>
  <div class="home">
    <div class="home-list">
      <div class="list-item">
        <a href="/">
          <div class="item-l">
            <img src="../assets/images/check.png" alt="">
            <span>待审核</span>
          </div>
          <div class="item-r isnew">6</div>
        </a>	
      </div>
      ...
    </div>
  </div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//index.scss
@function px2rem($px, $base-font-size: 75px) {
  @return ($px / $base-font-size) * 1rem;
}
.home-list {
  padding-bottom: px2rem(45px);
  .list-item {
    box-sizing: border-box;
    width: px2rem(690px);
    height: px2rem(190px);
    line-height: px2rem(190px);
    margin: px2rem(45px) auto 0;
    padding: 0 px2rem(50px) 0 px2rem(30px);
    background: #fff;
    border-radius: px2rem(20px);
    a {
      display: flex;
      justify-content: space-between;
      font-size: px2rem(40px);
      img {
        width: px2rem(90px);
        height: px2rem(65px);
        vertical-align: middle;
        margin-right: px2rem(30px);
      }
      span {
        color: #000;
        vertical-align: middle;
      }
      .item-r {
        color: #666666;
          &.isnew {
            color: #ff5500;
          }
        }
      &:link,&:visited,&:hover,&:active {
        text-decoration: none;
      }
    }
  }
}

七、开源示例

如果觉得还行，欢迎star
项目地址： https://github.com/hzzly/xyy-vue

好了，溜了溜了。。。