1、困扰我们的问题
在这之前做webApp开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 1136标准,所以高度一般取个大概值,各种图标的宽高也是取平衡值写死,然后部分样式通过媒体查询来设置,例如背景图的多倍图、基础字体大小、图标宽高等。
这样做会存在好多弊端
- 做出来的页面在各种手机端看起来的物理大小(高度)是一样的,所以在大屏手机会觉得页面稍小,小屏手机页面稍大
- 如果要使高度能更好的适应各种手机屏幕,需要写太多的媒体查询样式,效率低下
- 全屏背景图片跟页面元素需要耦合时,元素位置的确定尤为困难(可能需要通过百分比去确定元素的横向位置,但始终会有误差)
2、解决问题的方案
(1)方案的简单介绍: 基于rem
注意:页面元素的布局尺寸全都以设计稿为基准等比例设置。
给html
根节点设置一个基础font-size
值,然后页面的所有元素布局均相对于该font-size值采用rem
单位设定。那么基础的font-size值该如何取呢?
假如通过媒体查询设置font-size,只能解决一部分的情况,而且并不能完成适配,因为手机屏幕宽度类型实在太多了,所以font-size的取值要通过js计算,取当前viewport的deviceWidth
与设计稿的宽
的 比例
值,例如:我们的设计稿尺寸都是640px
的,iphone5的deviceWidth
是320px
,那么计算出来的font-size值就是 320 / 640 = 0.5,因为得出的font-size太小,不方便计算,且有的浏览器可能不兼容太小字号,所以将font-size放大100倍,所以最终计算出来的font-size为 320 / 640 * 100 = 50(px); 当然,这个值是根据设计稿来计算的,所以根据计算规则,下面列出几种常见设计稿相应的font-size值:
deviceWidth = 320,font-size = 320 / 6.4 = 50px
deviceWidth = 375,font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414,font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500,font-size = 500 / 6.4 = 78.125px
可在script
标签加上如下代码:
(function () { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWidth; html.style.fontSize = windowWidth / 6.4 + 'px'; // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px'; }, false); })();// 这个6.4就是根据设计稿的横向宽度来确定的,假如你的设计稿是750// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';
至此,font-size的基础值就确定好了,而且知道该font-size值是手机deviceWidth跟设计稿的比例值 的 100倍(重点)
(2)那么页面元素该如何设置宽高、边距
例如:一个设计稿宽高为140px的图标,左边距为50px,那么它的css应该这样写:
.icon { width: 1.4rem; /* 像素换算rem:140px / 100 = 1.4rem */ height: 1.4rem; margin: 0 0 0 .5rem;}
因为html的font-size是放大了100倍,所以计算rem时,要用设计稿的实际像素除以100,140px / 100 = 1.4rem; 最后实际的像素大小就会由deviceWidth跟设计稿的横向宽 的 比例 自动计算出来。
(3)其他元素的字体大小该如何设置
@media screen and (max-width: 320px) { body{font-size: 14px;}}@media screen and (min-width: 321px) and (max-width: 413px) { body{font-size: 16px;}}@media screen and (min-width: 414px) and (max-width: 639px) { body{font-size: 17px;}}@media screen and (min-width: 640px) { body{font-size: 18px;}}
为什么不用rem呢?因为有一种叫做点阵字体的存在,也叫作位图字体,位图我们都知道,跟矢量图是有区别的,就是放大会模糊,所以点阵字体也是放大会模糊的,如果根据rem设置字体大小,字体会自由缩放,可能就会导致点阵字体模糊,所以需要设定使用几种固定大小的字体。不过,在正常情况下,系统自带的字体都是矢量字体,所以使用rem为单位是没有问题的,除非你的网页需要用到特殊的点阵字体;