移动端Web页面适配方案

移动端越来越被大众所接收,各个移动端设备,分辨率大小不一致,为了适应各种移动端设备,完美呈现应有的布局效果,目前也有好几种移动端适配的技术方案,今天我总结一下其中我常用的两种。

适配方式

移动端适配主要有两大不同的方向:

  • 响应式布局:它是根据屏幕大小自动的调整布局位置(非单纯的缩放),实现适配。
  • 自适应布局:它是根据屏幕大小自动的缩放大小,实现适配。

媒体查询(Meida Queries)

在CSS中使用 Meida Queries:

1
2
3
@media screen and (max-width: 600px) { 
true/*当屏幕尺寸小于600px时的CSS样式*/
}

在引用css的时候加上media属性:

1
<link rel="stylesheet" href="mobile.css" media="(max-width:768px)"> <!--当页面框小于768px时引用-->

media query的好处在于可以做到设备像素比的判断,方法简单,成本低,特别是对移动和PC维护同一套代码的时候。

但缺点也很明显:代码量比较大,基本就是体力活,维护不方便。为了兼顾大屏幕或高清设备,会造成其他设备资源浪费,特别是加载图片资源。为了兼顾移动端和PC端各自响应式的展示效果,难免会损失各自特有的交互方式。

动态REM

什么是 rem

rem 单位代表根元素的 font-size 大小,例如 <html>元素的 font-size16px,那么 1rem 就等于 16px

rem 适配

先看下面这个例子:

1
2
3
4
5
6
7
html {    
font-size:20px;
}
div {
width: 10rem; /* width=200px */
height:10rem; /* height=200px */
}

先给html设置font-size20px,那么1rem就是20px,然后给div设置宽高为10rem,这时div的宽高就是20px*10=200px

根据根元素的font-size值来改变自身的值,由此我们应该可以联想到我们可以给html设定不同的值,从而达到我们css样式中的适配效果。

rem 值计算

由于我们所写出的页面是要在不同的屏幕大小设备上运行的,所以我们在写样式的时候必须要先以一个确定的屏幕来作为参考,这个就由我们拿到的视觉稿来定:假如现在我们拿到的设计稿宽度是 640px

1
rem = window.innerWidth  / 10

这样计算出来的rem基准值就是64,这里为什么要除以10呢,是因为不想让htmlfont-size太大,那么不除以100呢,因为640除以100就小于12了,有些浏览器最小字体是不能小于12px的。这样1rem就等于64px,如果要设置一个宽度320pxdiv,单位换成rem的话就是320/64 = 5rem了。

如果利用 rem 来设置 css 的值,一般要通过一层计算才行,这在我们写 css 中,其实算比较繁琐的一步操作了。

完全可以利用scss来解决这个问题,例如我们可以写一个 scssfunction px2rem即:

1
2
3
4
@function px2rem($px){
$rem : 64px; /* 设计稿宽度是640px */
@return ($px/$rem) + rem;
}

这样,当我们写具体数值的时候就可以写成:

1
width: px2rem(320px);

生成的css文件就是:

1
width: 5rem;	/* 320/64=5rem */

动态调整 rem

接下来我就可以通过不同的屏幕去动态设置htmlfont-size

1
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';

这样一来,对于设计稿上任何一个尺寸换成rem后,在任何屏幕分辨率下对应的尺寸占屏幕宽度的百分比相同。所以这种布局可以百分比还原设计图。如过想随着窗口大小变化自动调整,还可以绑定页面的resize事件来达到变化时更新 html 的 font-size 。