前言：

相信大多数前端开发者都做过页面适配吧。你们是通过什么手段和方法去适配页面的呢？是通过rem？还是通过第三方工具库呢？近期我也在做适配页面的工作，无意中发现一种适配思想还比较实用，现在特地分享给大家：

适配思想：

我的适配思路是把整个页面看作一张图片，只要宽高比例相同，无论屏幕大小，里面布局和一些字体都不会改变。只会根据屏幕的大小去把整体的页面画布去放大缩小。下面看一下我是怎么实现的把

首先我是通过css3的一个新特性transform来实现的，下面我来给大家介绍一下transform：

CSS3新添加的Transform可以改变元素在可视化区域的坐标(这种改变不会引起文档的重排,只有重排),以及形状,还有些3D形变.结合 Animation(这里以后会有个链接的) 能实现酷炫的动画

rotate支持一个参数,一个角度值 0-360deg

scale支持两个参数(x,y),如果没有填y的话,则取x的值;1为正常,<1为缩放,>1为放大;

注意：scale提供两个子方法,scaleX,scaleY,用来分别设置x或y的缩放;

skew支持两个参数(x,y),参数类型为角度(deg),如果不填y的话,则默认为0(与缩放不同);

注：如果仅设x或y,可直接使用两个子方法,skewX与skewY;

translate接收两个参数(x,y)为平移的距离,如不填y值,则默认为0,支持所有CSS内有效的长度单位(使用translate用来移动元素不会触发重排,只有重绘);

注：同样有两个子方法,translateX,translateY;

首先我们想要那一块标签或者div适配我们严格给定一个设计稿的宽高尺寸。然后我们再去计算一下放大或者缩小的倍数

这时候要注意了，因为每块屏幕不一样，所以这个缩放的数值不是个固定的值，所以是个变量。这时候我们就要进入页面的时候计算出来这个缩放值

这时候就做好了这个适配页面工作，是不是很简单。动手做起来试试看吧

放一个适配案例效果