巧用less + rem + flex + 宽高比技术,适配手机端定屏项目

git 示例代码

demo示例

按照rem适配屏幕

首先是按照屏幕宽度,用rem方式适配做尺寸标准,这种方式基本上可以解决手机端宽度、高度定而无法设置尺寸的问题。操作方法分两步:

  • 1.通过js获取屏幕宽度,然后转成rem。
  • 2.在less设置变量,然后作为宽高单位。

但是rem方式适配,说白了是以屏幕宽度做比例去适配,所以有一个很大的问题,就是对屏幕高度无感。在正常流式布局里没有问题,但涉及到定屏页面, 这个问题就非常明显,因为宽度一样的两个屏幕,高度不同时,显示出来的页面没有差别,这肯定是不靠谱

通过flex自动分布

这部分肯定是要按照具体业务设计的,但是整体思路可以定下来。

  • 1.把头部和底部的固定高度甩出来。页面中的内容都不会顶着头部或者底部,所以我们提前把这部分高度拿出来。
  • 2.中间content部分,用定位把top和bottom值设置到规定好的位置,作为主视区
  • 3.content添加flex属性,并设置display: flex;flex-direction: column;justify-content: space-around;这时候将content内的数据分条目,等分出来

这时候,我们按照宽度进行适配,然后对垂直方向,画出了自己的主视区,并且在主视区内对内部item进行了自动分配,使数据等分布局。但是还是存在 一些特殊情况,比如iponex的尺寸,宽高比是在特殊,需要额外调整

根据不同宽高比设置额外样式

这里在js中算出宽高比,然后在不同页面的根容器中添加额外的class,lg/lgger,然后在css中用lg类做额外配置。在手机端,虽然浏览器版本比较高, 但是性能肯定是比电脑端要低很多,能用css控制的时候,尽量少用js这是一个原则。

用rem的计算问题

用rem适配,虽然可以解决大部分问题,但是在手机端,我发现一个很难处理的问题。因为rem是计算出来的,如果我用rem作为单位去画一个圆点,虽然pc中 是圆的, 但是在手机端看的时候,却根本不圆。试了半天,搞了那么久居然被一个圆点打败了。。这时候只能返回来用px去处理,然后做一部分适配。

随机浏览