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

Posted 2020-08-16

注：本文参考自：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{     width: 75/640*10=1.171875rem;     height: 85/640*10=1.328125rem;     margin: 20px auto;     background: url(‘../images/itemBg.png‘) no-repeat;     // 因为整张雪碧图的宽度为200px,     background-size: 200/640*10rem auto;     等于     background-size: 3.125rem auto;       // 该背景图在雪碧图的位置     background-position: -123/640*10rem -7/640*10rem;     等于     background-position: -1.921875rem -0.109375rem;     display: block; }