您的位置：首页 > 移动开发

[移动端]rem适配

2016-08-16 10:22 549 查看

原理：给html根节点设置一个基础font-size值，然后页面的所有元素布局均相对于该font-size值采用rem单位设定。font-size的取值通过js计算。

但字体不用rem单位，原因如下：

1.设计师要求：任何手机屏幕上字体大小都要统一

2.显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是

16px

和

24px

，所以我们不希望出现
13px
和
15px
这样的奇葩尺寸。

3.有一种叫做点阵字体的存在（什么是点阵字体），也叫作位图字体，位图我们都知道，跟矢量图是有区别的，就是放大会模糊，所以点阵字体也是放大会模糊的，如果根据rem设置字体大小，字体会自由缩放，可能就会导致点阵字体模糊，所以需要设定使用几种固定大小的字体。(不过，在正常情况下，系统自带的字体都是矢量字体，所以使用rem为单位是没有问题的，除非你的网页需要用到特殊的点阵字体。)

一.雪碧图

.icon {
width: 1.4rem;
height: 1.4rem;
　　　　　　　　　　　　　　background: none;
　　　　　　　　　　　　　　position: relative;
　　　　　　　　　　　　　　overflow: hidden;
　　　　　　　　　　　　　　background-position: 0 -1.4rem;
}
.icon:after {
content: '';
display: block;
width: 10000%;
height: 10000%;
position: absolute;
left: 0;
top: 0;
background-image: url(sprite.png);
background-repeat: no-repeat;
background-size: 140rem;
-webkit-transform-origin: 0 0;
-webkit-transform: scale(.01);
transform-origin: 0 0;
transform: scale(.01);
　　　　　　　　　　　　　　background-position: 0 -140rem;

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航