移动端rem布局背景图片使用以及sprite雪碧图

时间 2019-11-12

标签移动 rem 布局背景图片使用以及 sprite 雪碧栏目无线繁體版

原文原文链接

如今移动端页面用rem布局已是一大流派了，成熟的框架如淘宝的flexiable.js，墨尘写的更轻量级的hotcss。用rem做单位使得元素可以自适应后，还有一块须要关注的，那就是背景图片。javascript

rem布局

所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小，而后全部的元素尺寸都以rem为单位来写。好比将<html>的字体设为100px，若是须要作一个100*200的元素，css如是写：css

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

那么最终获得的元素宽高就是100*200px了。html

为了可以在不一样尺寸的手机屏幕上自适应，须要用js来判断手机宽度，并动态设置<html>的字体大小，这样基准字体变了，元素的尺寸天然相应变化，达到了自适应的效果。java

此处只介绍基本概念，rem布局方案的其余细节不是本篇的范畴。最先提这个方案的应该是winter寒老湿，有没有人更早使用我就很差考证了。git

双倍设计稿

为了能在视网膜屏下清晰显示，如今的设计稿通常都是基于iPhone5的宽度(320)或者iphone6的宽度(375)，进行双倍。也就是说，设计稿的宽度通常是640或者750.github

这个尺寸也不是绝对的，由于iPhone6 plus的dpr值为3，也有设计稿进行三倍尺寸，这样能在iPhone6 plus上完美显示。固然对于Android设备来讲状况就更复杂了，dpr值什么样的都有，因此双倍设计稿算是一个折中方案，大致上能保证全部设备清晰显示图片。框架

此时，咱们在页面上还要作一件事情，那就是动态设置<meta>中的viewport属性，将scale改为0.5（dpr为2）或者其余值，这样咱们写css的时候，就能够按照原设计稿的尺寸来写了。iphone

咱们切出来的图片是双倍大小，可是页面上的元素已经被动态缩小了，若是要作背景图片的话，得想办法让图片跟着缩小才行。布局

cover与contain

CSS3为background-size属性增长了两个值：cover与contain。这个两个值容许咱们指定背景图片的自适应方式。它俩有什么区别呢？字体

从语言上描述，cover是拉伸图片使之充满元素，元素确定是被铺满的，可是图片有可能显示不全。contain则是拉伸图片使图片彻底显示在元素内，图片确定能显示全，可是元素可能不会被铺满。

上面说的“可能”的状况，发生在元素尺寸和图片尺寸宽高比例不一致的时候。

下面经过例子来演示一下这二者的用法。好比咱们以iPhone5为例，此时dpr为2，页面scale为0.5，基准字体大小为100px。设计稿上有一张90*200px的图片。那么css应该这么写：

#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: contain;
    background-repeat: no-repeat;
}

效果以下：

当元素与背景图片的大小同样，或者是宽高比例一致时，contain和cover的填充效果是同样的，由于二者在拉伸后总能使图片“刚好”彻底充满元素。

可是有时候元素的宽高比例是不肯定的，好比有一张宽度为100%，高度为200px的图片。此时contain和cover的区别就显示出来了。以下图：

能够看到contain的时候，元素右侧有空白没有填满。而cover的时候，元素虽然填满了，可是有一部分图片已经拉伸到元素外部看不到了。这就是二者的区别，实际应用的时候要根据具体状况来定。

background-size取具体值

你们知道background-size能够取具体的值以及百分比，那么咱们直接把背景图片大小设置为跟元素大小同样不就完了吗？还费什么劲搞什么自适应。

固然是能够的。好比咱们把上面的css改为这样：

#mm{
    width: 0.9rem;
    height: 2rem;
    background-image: url(mm.jpg);
    background-size: 0.9rem 2rem;
    background-repeat: no-repeat;
}

彻底能够实现一样的效果。

只是我本人在写css的时候很不喜欢写具体值，通常是能自适应就自适应。这样若是后期要改动元素的大小，只要改一处就行，因此我更喜欢用contain或cover。

sprite图片的处理

为了合并图片请求咱们常常会用到sprite技术。在rem布局方案下，使用contain或cover来缩放背景图片就没法奏效了。由于元素的背景实际上是sprite图片的局部，contain和cover只能对整张图片进行缩放，没办法控制到局部的大小。

好比有以下一张200*50的sprite图。

在使用contain缩放后是这样的

因此在处理sprite图片时，咱们只能给background-size取具体值。那么这个值取多少呢？其实只要写咱们切出来的图片的实际尺寸就行。

好比咱们的元素为50*50px，sprite图片为200*50px，那css应该以下：

#cpt{
    width: 0.5rem;
    height: 0.5rem;
    background-image: url(cpt.png);
    background-size: 2rem 0.5rem;
}

而后修改background-position咱们就能够取到sprite上的其余图片了。background-position也取具体值，也是按照切出来的图的尺寸就行。

好比我这张图片是一个帧动画的4个帧，每一帧的背景图片应该以下：

#cpt.status1{
    background-position: 0 0;
}
#cpt.status2{
    background-position: -0.5rem 0;
}
#cpt.status3{
    background-position: -1rem 0;
}
#cpt.status4{
    background-position: -1.5rem 0;
}

利用这个尺寸，咱们来作个小动画试试。

原文：http://www.cnblogs.com/lvdabao/p/rem-background.html