retina屏下的1px线的实现

作者 | chokcoco

来源 | https://chokcoco.github.io

retina屏下的1px线的实现，适用于 dpr：2 的情况。

法一：使用渐变实现，使用两种颜色填充 1px 宽内容
法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放
法三：base64 编码实现
法四：base64 编码嵌入SVG实现

HTML代码如下：

<head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="msapplication-tap-highlight" content="no" /><title>retina屏下的1px线的实现</title></head>

<body><div class="border_normal">正常使用1px border效果（本DEMO请在移动端环境下查看）</div><div class="border_gradient">法一：使用渐变实现，使用两种颜色填充 1px 宽内容 </div><div class="border_scale">法二：使用缩放实现，对 1px 高度线条进行0.5倍缩放</div><div class="border_base64">法三：base64 编码实现</div><div class="border_svg">法四：base64 编码嵌入SVG实现</div></body>

SCSS代码如下：

body {// overflow: hidden;}

div {width: 100vw;height: 80px;margin: 30px auto;background-color: rgba(0, 0, 0, 0.1);text-align: center;padding-top: 20px;font-size: 16px;box-sizing: border-box;}

/*border-top:1px*/.border_normal,.border_gradient,.border_scale,.border_boxshadow,.border_base64,.border_svg{border-top: 1px solid #999;}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {.border_gradient {background-image: linear-gradient(to top, transparent 50%, #999 50%);background-size: 100% 1px;background-repeat: no-repeat;background-position: top center;border-top: 0 none;padding-top: 1px;}

.border_scale {position: relative;padding-top: 1px;border-top: 0 none;}.border_scale:before {content: "";position: absolute;top: 0;left: 0;width: 200%;border-top: 1px solid #999;transform: scale(0.5);transform-origin: 0 0;box-sizing: border-box;}.border_base64 {padding-top: 1px;border-top: 0 none;background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAQSURBVBhXY5g5c+Z/BhAAABRcAsvqBShzAAAAAElFTkSuQmCC);background-position: 0 0;background-repeat: repeat-x;background-size: 1px 1px;}

.border_svg {border-top: 0 none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#999' x='0' y='0.5' width='100%' height='0.5' /></svg>");    background-position:0 0;background-repeat:no-repeat;}

}

retina屏下的1px线的实现相关推荐

关于canvas在retina屏下绘制文字或图像模糊的解决方案
一.问题描述最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案.有兴趣的同学 ...
[转]retina屏下支持0.5px边框的情况
2014-12-31更新: 截至到IOS8.1,safari仍不支持@supports 待safari支持@supports, 就可以利用0.5px了! 2014-7-25更新: 1. 修正dpr = ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
emiya-canvas.js 解决ios下拍照倾斜与canvas高清屏下绘图模糊问题 1
场景解决在移动端拍照,用 canvas 绘图出现图片逆时针旋转 90 度的问题. canvas 在高清屏与retina屏下绘图模糊的问题. 如下图: 就用我老婆来做模特了~ 下图是拍照过后渲染在画布 ...
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
手机1像素线粗_关于移动端开发 1px 线的一些理解和解决办法
(给前端大全加星标,提升前端技能) 作者: 大转转FE/李兴瑞 1px线变粗的原因在做移动端项目时,常常是根据设计图设置元素节点的大小和样式,但是有时候根据设计图写出来的样式还是不如人意,虽然表面上 ...
鸿蒙os 芯片制程,华为Mate50将如期发布，屏下镜头＋鸿蒙OS，再见iPhone12
华为旗下有两个高端产品线,一个是mate一个就是P系列,这两款产品发布会一般相隔半年左右,按理说华为P50也该上日程了,可因为芯片缺货问题耽搁了,预计将会在7月份发布.安按照华为往常的新机发布节奏去看 ...
荣耀Magic2 发布：滑盖全面屏、前后6摄、屏下指纹、麒麟980
乾明发自凹非寺量子位报道 | 公众号 QbitAI 昨天,荣耀在北京发布了新一代的旗舰机荣耀Magic 2. 和小米MIX3发布会一样,场地也是露天的,不过在晚上. 发布新机的时候,现场看发 ...
华为mate50os鸿蒙,华为Mate50将如期发布，屏下镜头＋鸿蒙OS，再见iPhone12
华为旗下有两个高端产品线,一个是mate一个就是P系列,这两款产品发布会一般相隔半年左右,按理说华为P50也该上日程了,可因为芯片缺货问题耽搁了,预计将会在7月份发布.安按照华为往常的新机发布节奏去看 ...
除了屏下无孔全面屏，红魔7系列还有这些黑科技
在移动电子竞技比赛变得越发火热的当下,游戏手机市场也随之有了极大的增长. 2月17日,努比亚旗下游戏手机品牌红魔召开了行业内首场虚拟发布会,并发布了最新的红魔7系列游戏手机,如同以往的红魔游戏手机一样 ...

retina屏下的1px线的实现

retina屏下的1px线的实现相关推荐

最新文章

热门文章