基于视网膜屏幕的1像素边框显示方法、存储介质与流程

本发明涉及web显示技术领域，尤其涉及一种基于视网膜屏幕的1像素边框显示方法、存储介质。

背景技术：

在retina(视网膜)屏幕的移动端设备中(包括ios和安卓)，使用css(层叠样式表)设置1像素的边框会比正常的ui粗很多。这是因为不同的手机有不同的像素密度，导致css中的1像素并不等于移动端设备的1像素。

传统解决1像素边框问题的方法及其优缺点如下：

a、通过js检测浏览器是否支持0.5px(像素)的边框，如果支持则对dom(文档对象模型)加上0.5像素的样式。该方法可以设置单条、多条边框，灵活改变边框颜色，但无法兼容安卓和ios8以下的设备。

b、提供一张1像素的图片，然后通过css(border-image或者background-image)设置给dom元素。该方法可以设置单条、多条边框，但无法修改颜色、无法设置圆角。

c、使用css3的渐变能力，设置1像素的渐变，其中50％使用颜色，50％使用透明，然后将样式赋值给dom元素。该方法可以设置单条、多条边框，灵活改变边框颜色，但无法实现圆角、存在兼容性问题，且实现复杂。

d、使用css对阴影的处理能力(box-shadow)模拟边框。该方法可以设置单条、多条边框，但边框有阴影，颜色会变浅。

e、使用viewport+rem的方式，不直接设置像素，改用rem作为单位。该方法可以设置单条、多条边框，灵活改变边框颜色，但老项目修改成本太大，只适用于新项目。

技术实现要素：

本发明所要解决的技术问题是：提供一种基于视网膜屏幕的1像素边框显示方法、存储介质，能够很好的解决移动端设备中显示1像素边框的问题，同时可兼容所有视网膜屏幕的移动端设备。

为了解决上述技术问题，本发明采用的技术方案为：一种基于视网膜屏幕的1像素边框显示方法，包括：

创建基础类，调用所述基础类的文档对象模型元素将被设置相对定位；

将所述基础类中边框属性设为空；

在所述基础类中创建伪类；

对所述伪类设置绝对定位，生成块级框；

将所述块级框的宽度或高度设置为1像素；

设置所述块级框的具体位置；

对所述块级框进行水平或垂直拉伸；

设置所述块级框的基点，并根据所述基点，对所述块级框进行缩放；

若当前设备为视网膜屏幕，则将所述基础类应用在预设的文档对象模型上。

本发明还涉及一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的步骤。

本发明的有益效果在于：通过将基础类中的边框属性设为空，以去掉基础类中的边框，使得文档对象模型调用该基础类时，不会显示原来的边框，避免同时出现两个边框；本发明可很好的解决移动端设备中显示1像素边框的问题，解决了传统方案的诸多缺点，并兼顾了所有优点，可以设置单条、多条边框，可以灵活改变边框颜色，可以灵活设置圆角，实现简单，兼容性高。

附图说明

图1为本发明的基于视网膜屏幕的1像素边框显示方法的流程图；

图2为本发明实施例一的方法流程图；

图3为本发明实施例二的左边框的效果示意图；

图4为本发明实施例二的右边框的效果示意图；

图5为本发明实施例二的顶部边框的效果示意图；

图6为本发明实施例二的底部边框的效果示意图。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图详予说明。

本发明最关键的构思在于：将元素原先的边框去掉，然后利用伪类重做边框，并利用transform(变换)属性缩小一半。

css(层叠样式表)中的属性与其对应的描述如下所述：

position：把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。

right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。

top：定义了定位元素的上外边距边界与其包含块上边界之间的偏移。

bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。

transform-origin：用来设置元素的运动的基点(参照点)。默认点是元素的中心点。其属性值可以是百分比、em、px等具体的值，也可以是top、right、bottom、left和center这样的关键词。其中，left、center、right是x轴方向(水平方向)取值，对应的百分值为left＝0％，center＝50％，right＝100％；而top、center、bottom是y轴方向(垂直方向)的取值，对应的百分值为top＝0％，center＝50％，bottom＝100％；如果只取一个值，表示另一个方向的值为默认值。

transform：用于变形、改变。在css3中transform主要包括以下几种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。本发明中主要涉及缩放scale，scale(x,y)表示使元素水平方向和垂直方向同时缩放(也就是x轴和y轴同时缩放)；scalex(x)表示元素仅水平方向缩放(x轴缩放)；scaley(y)表示元素仅垂直方向缩放(y轴缩放)，其中，x、y表示缩放基数。

其中，通过使用position属性，可以选择4种不同类型的定位，这会影响元素框生成的方式。position属性值的含义如下所述：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed：元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。

请参阅图1，一种基于视网膜屏幕的1像素边框显示方法，包括：

创建基础类，调用所述基础类的文档对象模型元素将被设置相对定位；

将所述基础类中边框属性设为空；

在所述基础类中创建伪类；

对所述伪类设置绝对定位，生成块级框；

将所述块级框的宽度或高度设置为1像素；

设置所述块级框的具体位置；

对所述块级框进行水平或垂直拉伸；

设置所述块级框的基点，并根据所述基点，对所述块级框进行缩放；

若当前设备为视网膜屏幕，则将所述基础类应用在预设的文档对象模型上。

从上述描述可知，本发明的有益效果在于：能够很好的解决移动端设备中显示1像素边框的问题，同时可兼容所有视网膜屏幕的移动端设备。

进一步地，所述将所述块级框的宽度或高度设置为1像素具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度设为1像素；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度设为1像素。

进一步地，所述设置所述块级框的具体位置具体为：

若所述基础类为对应左边框的基础类，则将所述块级框左外边距边界与所述基础类左边界之间的偏移设为0；

若所述基础类为对应右边框的基础类，则将所述块级框右外边距边界与所述基础类右边界之间的偏移设为0；

若所述基础类为对应顶部边框的基础类，则将所述块级框上外边距边界与所述基础类上边界之间的偏移设为0；

若所述基础类为对应底部边框的基础类，则将所述块级框下外边距边界与所述基础类下边界之间的偏移设为0。

由上述描述可知，使得最后dom元素显示边框时，左边框显示在屏幕左边，右边框显示在屏幕右边，顶部边框显示在屏幕上边，底部边框显示在屏幕下边。

进一步地，所述对所述块级框进行水平或垂直拉伸具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框上外边距边界与所述基础类上边界之间的偏移以及所述块级框下外边距边界与所述基础类下边界之间的偏移均设为0；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框左外边距边界与所述基础类左边界之间的偏移以及所述块级框右外边距边界与所述基础类右边界之间的偏移均设为0。

由上述描述可知，当对应左边框或右边框时，通过将块级框与上下边界的距离均设为0，以实现垂直方向的拉伸；当对应顶部边框或底部边框时，通过将块级框与左右边界的距离均设为0，以实现水平方向的拉伸。

进一步地，所述设置所述块级框的基点具体为：

若所述基础类为对应左边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为0％的位置；

若所述基础类为对应右边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为100％的位置；

若所述基础类为对应顶部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为0％的位置；

若所述基础类为对应底部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为100％的位置。

进一步地，所述对所述块级框进行缩放具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度沿水平方向缩放0.5倍；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度沿垂直方向缩放0.5倍。

由上述描述可知，通过对块级框缩小一半，使其真正成为1像素边框。

进一步地，还包括：

设置所述块级框的颜色。

由上述描述可知，可以灵活改变边框颜色。

进一步地，还包括：

为所述块级框设置圆角。

由上述描述可知，可以灵活设置圆角。

本发明还提出一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如上所述的步骤。

实施例一

请参照图2，本发明的实施例一为：一种基于视网膜屏幕的1像素边框显示方法，可应用于所有视网膜屏幕的移动端设备，包括如下步骤：

s1：创建基础类，所述基础类可对调用其的对象模型元素设置相对定位；具体地，将所述基础类中的position属性的属性值设为relative。

进一步地，本实施例中，一个基础类对应边框中的一条边，因此，在该步骤可创建四个基础类，分别对应左边框、右边框、顶部边框和底部边框。

s2：将所述基础类中边框属性设为空，即去掉基础类中原先的边框；具体地，将所述基础类中的border属性的属性值设为none。

s3：在所述基础类中创建伪类；所述伪类可为before伪类，也可为after伪类。

s4：对所述伪类设置绝对定位，生成块级框；具体地，即将所述伪类中的position属性的属性值设为absolute。

s5：将所述块级框的宽度或高度设置为1像素。即若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度设为1像素；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度设为1像素。

具体地，通过设置所述块级框的width、height属性，将所述块级框的宽度或高度设置为1像素。即若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的width属性的属性值设为1像素；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的height属性的属性值设为1像素。

s6：设置所述块级框的具体位置。即若所述基础类为对应左边框的基础类，则将所述块级框左外边距边界与所述基础类左边界之间的偏移设为0；若所述基础类为对应右边框的基础类，则将所述块级框右外边距边界与所述基础类右边界之间的偏移设为0；若所述基础类为对应顶部边框的基础类，则将所述块级框上外边距边界与所述基础类上边界之间的偏移设为0；若所述基础类为对应底部边框的基础类，则将所述块级框下外边距边界与所述基础类下边界之间的偏移设为0。

具体地，通过设置所述块级框的left、right、top或bottom属性，设置所述块级框的具体位置。即若所述基础类为对应左边框的基础类，则将所述块级框的left属性的属性值设为0；若所述基础类为对应右边框的基础类，则将所述块级框的right属性的属性值设为0；若所述基础类为对应顶部边框的基础类，则将所述块级框的top属性的属性值设为0；若所述基础类为对应底部边框的基础类，则将所述块级框的bottom属性的属性值设为0。

s7：对所述块级框进行水平或垂直拉伸，具体地，若所述基础类为对应左边框的基础类或对应右边框的基础类，则对所述块级框进行垂直拉伸，即将所述块级框上外边距边界与所述基础类上边界之间的偏移以及所述块级框下外边距边界与所述基础类下边界之间的偏移均设为0；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则对所述块级框进行水平拉伸，即将所述块级框左外边距边界与所述基础类左边界之间的偏移以及所述块级框右外边距边界与所述基础类右边界之间的偏移均设为0。

具体地，通过设置所述块级框的left和right、或top和bottom属性，对所述块级框进行水平或垂直拉伸。即若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的top属性和bottom属性的属性值均设为0；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的left属性和right属性的属性值均设为0。

通过该拉伸方法，可以在不知道块级框的高度或宽度下进行拉伸，提高通用性。

s8：设置所述块级框的基点。即若所述基础类为对应左边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为0％的位置；若所述基础类为对应右边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为100％的位置；若所述基础类为对应顶部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为0％的位置；若所述基础类为对应底部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为100％的位置。

具体地，通过设置所述块级框的transform-origin属性，设置所述块级框的基点。即若所述基础类为对应左边框的基础类，则将所述块级框的transform-origin属性的属性值设为left；若所述基础类为对应右边框的基础类，则将所述块级框的transform-origin属性的属性值设为right；若所述基础类为对应顶部边框的基础类，则将所述块级框的transform-origin属性的属性值设为top；若所述基础类为对应底部边框的基础类，则将所述块级框的transform-origin属性的属性值设为bottom。

s9：根据所述基点，对所述块级框进行缩放。即若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度沿水平方向缩放0.5倍；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度沿垂直方向缩放0.5倍。

具体地，通过设置所述块级框的transform属性，对所述块级框进行缩放。即若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的transform属性设为scalex(0.5)；若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的transform属性设为scaley(0.5)。

s10：设置所述块级框的颜色，具体地，可通过设置所述块级框的background-color属性，设置所述块级框的颜色。进一步地，根据需求，可对所述块级框进行圆角设置。

s11：判断当前设备是否为视网膜屏幕，若是，则执行步骤s12。

s12：将所述基础类应用在预设的文档对象模型上，即使需要显示边框的文档对象模型元素调用所述基础类。当dom元素调用所述基础类时，即会被设置相对定位，不显示原来基础类中的边框，而是直接显示基础类中的伪类绝对定位后所生成的块级框。

本实施例能够很好的解决移动端设备中显示1像素边框的问题，同时可兼容所有视网膜屏幕的移动端设备。

实施例二

本实施例为实施例一的一具体应用场景。

创建四个基础类，其中，第一基础类对应左边框，第二基础类对应右边框，第三基础类对应顶部边框，第四基础类对应底部边框。本实施例中伪类采用after伪类。

第一基础类的代码如下：

当dom元素调用第一基础类时，效果图如图3所示。

第二基础类的代码如下：

当dom元素调用第二基础类时，效果图如图4所示。

第三基础类的代码如下：

当dom元素调用第三基础类时，效果图如图5所示。

第四基础类的代码如下：

当dom元素调用第四基础类时，效果图如图6所示。

实施例三

本实施例是对应上述实施例的一种计算机可读存储介质，其上存储有计算机程序，所述程序被处理器执行时实现如下步骤：

创建基础类，调用所述基础类的文档对象模型元素将被设置相对定位；

将所述基础类中边框属性设为空；

在所述基础类中创建伪类；

对所述伪类设置绝对定位，生成块级框；

将所述块级框的宽度或高度设置为1像素；

设置所述块级框的具体位置；

对所述块级框进行水平或垂直拉伸；

设置所述块级框的基点，并根据所述基点，对所述块级框进行缩放；

若当前设备为视网膜屏幕，则将所述基础类应用在预设的文档对象模型上。

进一步地，所述将所述块级框的宽度或高度设置为1像素具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度设为1像素；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度设为1像素。

进一步地，所述设置所述块级框的具体位置具体为：

若所述基础类为对应左边框的基础类，则将所述块级框左外边距边界与所述基础类左边界之间的偏移设为0；

若所述基础类为对应右边框的基础类，则将所述块级框右外边距边界与所述基础类右边界之间的偏移设为0；

若所述基础类为对应顶部边框的基础类，则将所述块级框上外边距边界与所述基础类上边界之间的偏移设为0；

若所述基础类为对应底部边框的基础类，则将所述块级框下外边距边界与所述基础类下边界之间的偏移设为0。

进一步地，所述对所述块级框进行水平或垂直拉伸具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框上外边距边界与所述基础类上边界之间的偏移以及所述块级框下外边距边界与所述基础类下边界之间的偏移均设为0；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框左外边距边界与所述基础类左边界之间的偏移以及所述块级框右外边距边界与所述基础类右边界之间的偏移均设为0。

进一步地，所述设置所述块级框的基点具体为：

若所述基础类为对应左边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为0％的位置；

若所述基础类为对应右边框的基础类，则将所述块级框的基点设为所述块级框水平方向上偏移量为100％的位置；

若所述基础类为对应顶部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为0％的位置；

若所述基础类为对应底部边框的基础类，则将所述块级框的基点设为所述块级框垂直方向上偏移量为100％的位置。

进一步地，所述对所述块级框进行缩放具体为：

若所述基础类为对应左边框的基础类或对应右边框的基础类，则将所述块级框的宽度沿水平方向缩放0.5倍；

若所述基础类为对应顶部边框的基础类或底部边框的基础类，则将所述块级框的高度沿垂直方向缩放0.5倍。

进一步地，还包括：

设置所述块级框的颜色。

进一步地，还包括：

为所述块级框设置圆角。

综上所述，本发明提供的一种基于视网膜屏幕的1像素边框显示方法、存储介质，通过将基础类中的边框属性设为空，以去掉基础类中的边框，使得文档对象模型调用该基础类时，不会显示原来的边框，避免同时出现两个边框；根据对应的边框不同，设置块级框的具体位置，使得最后dom元素显示边框时，可显示在对应的位置；当对应左边框或右边框时，通过将块级框与上下边界的距离均设为0，以实现垂直方向的拉伸；当对应顶部边框或底部边框时，通过将块级框与左右边界的距离均设为0，以实现水平方向的拉伸；通过对块级框缩小一半，使其真正成为1像素边框。本发明可很好的解决移动端设备中显示1像素边框的问题，解决了传统方案的诸多缺点，并兼顾了所有优点，可以设置单条、多条边框，可以灵活改变边框颜色，可以灵活设置圆角，实现简单，兼容性高。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。