爬坑:多端适配的疑虑

多显示器适配,一直以来都是一个比较复杂的问题,我很难在一篇文章中把所有的点总结全面,但通过这篇文章我希望大家在自己的工程中能够拓宽思路选择适合于自己工程的适配方案。我的工程中适配的机型大概是PC,ipad,大多数正常的手机屏幕,并没有精确的分辨率适配方案,只是力求在各个屏幕上不会乱七八糟,以期望尽可能良好的用户体验。于是在这样的需求下,我在以下几个方面对我的前端页面适配进行规划。(如果有更完备的多端适配方案希望大佬能给出,在这里先感谢赐教)

一、全局:在大布局中使用自适应方案

二、图片,小组件:使用合适的宽高单位

三、局部:对无法正常显示在小屏幕上的部分进行小部分改写

问题:在具体环境中如何配合使用这几个方案

分析:

一、全局

(1)使用ui库自带的Layout,栅格布局方案

例如iView和Element中都有类似于

1
2
3
4
5
6
7
<Row>

​ <Col span="12">col-12</Col>

​ <Col span="12">col-12</Col>

</Row>

的方案,在使用UI库时,布局可以这样使用

(2)对于原生的组件使用flex,grid布局等等。这里之前我有过总结就不再详细解释。

以上两种方案都是可以在最大程度上满足你在不同分辨率屏幕上看到一个差不多样子的基本布局的。但这样远远不够。

二、图片,小组件

在图片和部分样式组件上,基本布局会让它们一定程度上变形,要保持原始比例和合适的清晰度,最好的方式当然是不同分辨率有不同的图,但那未必太浪费资源。使用百分比的宽度和高度可以做到一定程度的自适应效果,但是在细节上并不十分完美(因为它是基于具有相同属性的父元素的长度值,父元素改变会使元素不断变化)。巧妙使用图片和组件的宽高单位,可以使组件在不同分辨率下依据它的视窗根组件,依据网页的架构改变不同大小。

三、局部

在做多端适配的时候很容易碰到大屏元素很多,小屏呈现影响功能的问题。常用方案是移动端写一套,PC写一套,大多数不会去做多端适配所有屏幕,毕竟两端的受众,使用习惯之类的也有一些区别。

抛开直接分成两个端去做,像我这样的小工程,因为局部问题写两份有点浪费的,就可以考虑部分改写。就像css解决方案中的媒体查询一样。虽然在构造过程中有代码重复的嫌疑,但是有些地方仍能实现需求。

遇坑:

**图片在小分辨率屏幕上位置错乱。**

**博客管理平台涉及编辑和删除的表单在小分辨率屏幕显得太小,无法正常删除和编辑。**

最终解决呈现:

1.图片在小分辨率屏幕上位置错乱。

使用高度宽度单位:vh

这里总结几个常见的长度单位以及它的用法:

(1)绝对长度

px,cm,mm

换算规则:1mm == 0.1cm == 3.78px

pt: 1px = 0.75pt (常用于字体)

(2)相对字体长度

em:取决于目标元素字体尺寸

rem:取决于文档根元素(通常为:root)的字体尺寸。

ex:

(3)相对视窗长度

vw,vh:

vw: 1vw等于可视区宽度的百分之一。相对于根元素。

vh:vh是相对于可视区的高度。

2.博客管理平台涉及编辑和删除的表单在小分辨率屏幕显得太小,无法正常删除和编辑。

当屏幕处于小分辨率屏幕时在左右结构的表单中加一个标签,点击标签可隐藏或显示文章内容,显示文章内容时不显示操作表单,反之亦然。

大分辨率时该标签作用用于隐藏表单。