[发明专利]基于视网膜屏幕的1像素边框显示方法、存储介质

说明书

本发明公开了一种基于视网膜屏幕的1像素边框显示方法、存储介质，方法包括：创建基础类，调用所述基础类的文档对象模型元素将被设置相对定位；将所述基础类中边框属性设为空；在所述基础类中创建伪类；对所述伪类设置绝对定位，生成块级框；将所述块级框的宽度或高度设置为1像素；设置所述块级框的具体位置；对所述块级框进行水平或垂直拉伸；设置所述块级框的基点，并根据所述基点，对所述块级框进行缩放；若当前设备为视网膜屏幕，则将所述基础类应用在预设的文档对象模型上。本发明能够很好的解决移动端设备中显示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像素；

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

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

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

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

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