首页 > 代码库 > 淘宝——移动端页面终端适配

淘宝——移动端页面终端适配

注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html

 

阅读目录

  • 适配的要求
  • 适配的方法,3个步骤
  • 适配中背景图片的处理
  • 适配的原理解析

 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型,

在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小一点。

所以今天做一个移动端页面适配的小小总结

 

    

适配的要求

 

1、在不同分辨率的手机上,页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大

2、主要是关注字体,宽高,间距,图片大小等。

3、所提供的设计图一般是手机分辨率的两倍,才能方便做适配。

4、使用rem做单位,而不是传统的px

适配的方法,3个步骤

步骤1

设置viewport,也就是平时写移动端页面都要加上的:

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

 

步骤2、

首先我们在我们的页面引入下面的flexible.js,

这段适配的js代码是拿淘宝的来用的。

适配的js代码的github地址如下:https://github.com/amfe/lib-flexible/blob/master/src/flexible.js。

 

步骤3、

页面上我们的css代码可以这样写,比如设计图给我们的尺寸是750*1000的。某个容器在设计图的宽度是150px*225px,那我们在css里面

宽度:150px/750px/10=150px/75px=2rem;

高度为:225px/75px=3rem;

一句话:布局的时候,各元素的css尺寸=设计稿标注尺寸/设计稿横向分辨率/10;

div{
    width: 2rem;
    height: 3rem;
}

 

通过上面的3个步骤,我们就可以将我们的移动端页面做成适配的了。

 

 css换算方法

不过有一点,一直算来算去挺烦的。所以在写css的时候,最好使用css预处理器,比如sass、less来写,这样就方便很多了。

或者在sublimeText3中安装cssREM插件,正常书写px单位,然后编辑器自动帮你换算成rem.

cssREM插件的安装教程:https://github.com/flashlizi/cssrem

 

注意点:

容器的宽度高度我们用rem为单位,但是字体大小font-size我们还是用px,而不是用rem 

原因:

  flexible.js的作者winter是这样解释的:考虑到字体的点阵信息,一般文字尺寸多会采用 16px 20px 24px等值,若以rem指定文字尺寸,会产生诸如21px,19px这样的值,会导致字形难看,毛刺,甚至黑块,故大部分文字应该以px设置。

  一般标题类文字,可能也有要求随屏幕缩放,且考虑到这类文字一般都比较大,超过30px的话,也可以用rem设置字体。

适配中背景图片的处理

 

1、如何使用background-size

 

因为是使用了rem来做单位,我们在写移动端的背景图的时候,一般使用background-size来控制大小,那要怎么来换算呢?

换算单位如下:

background-size=背景图的大小/该设计图的宽度*10

打个比方:我的背景图是16*18,设计图是按照640的宽度来设计的。那么我的background-size值为

background-size: 16/640*10rem 16/640*10rem   也就是 background-size:0.25rem 0.28125rem;

通过这样控制之后,我们的背景图也做到了适配的效果

 

2、雪碧图的适配!!!!

 

刚开始做适配的时候,有一件事是比较头疼的,那就是雪碧图的适配,主要是background-size和background-position的配置比较烦。那么怎么进行在使用fexible.js的时候适配雪碧图呢,方法如下:

 

假如我有下面这张雪碧图,设计图给我的是按640的分辨率来做的。

 

这张雪碧图的大小为200px*458px

 

技术分享

 

假设现在我们要用的那个勋子的背景图。分为以下几步:

1、测量勋字这张背景图的大小,大小为:75px*85px技术分享

2、测量这个勋字在雪碧图的位置,也就是设置background-position:.经测量,他在雪碧图的位置为 x:-123px,y:-7px

3、对着张雪碧图进行换算:看下面代码:

知道了上面的尺寸,我们就行换算即可,将每个值除以640再乘以10   为什么这么算,可以看看源码

要使用这样雪碧图:

1
2
3
4
5
6
7
8
9
10
<!-- 长宽为: -->
width:  75/640*10=1.171875rem;
height: 85/640*10=1.328125rem;
 
<!-- background-size为 -->
<!--  因为整张雪碧图的宽度为200px, -->
background-size: 200/640*10rem auto;
 
<!-- background-position为: -->
background-position: -123/640*10rem -7/640*10rem;

  

  

html:

1
<i class="item1"></i>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.item1{
    width75/640*10=1.171875rem;
    height85/640*10=1.328125rem;
    margin20px auto;
    backgroundurl(‘../images/itemBg.png‘no-repeat;
    // 因为整张雪碧图的宽度为200px,
    background-size200/640*10rem auto;
    等于
    background-size3.125rem auto;
 
    // 该背景图在雪碧图的位置
    background-position-123/640*10rem -7/640*10rem;
    等于
    background-position-1.921875rem -0.109375rem;
    displayblock;
}

 

淘宝——移动端页面终端适配