标签：name 宽高 x11 bsp 比较 use 位置 设计 代码
摘要：在进行移动端界面的书写的时候，如果把宽度高度或者字体大小全部写死的话，那么在所有手机上看到的大小都一样，存在的问题就是同样大小的字体，或者一个盒子模型，
在大屏幕手机上看起来会有点偏小。比如iphone6PLUS。如果是做成适配的话，就很好的解决了这个问题，大屏幕显示的内容大一点，小屏幕显示的小一点。
所以今天做一个移动端页面适配的小小总结
1、在不同分辨率的手机上，页面看起来是自适应的。整体效果看起来比较和谐。不会说大屏幕上看起来特别小。小屏幕上看起来特别大
2、主要是关注字体，宽高，间距，图片大小等。
3、所提供的设计图一般是手机分辨率的两倍，才能方便做适配。
4、使用rem做单位，而不是传统的px
步骤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;} |
标签：name 宽高 x11 bsp 比较 use 位置 设计 代码
原文地址：http://www.cnblogs.com/dp168/p/5997499.html
