RETINA 屏幕1px 边框实现

retina 屏幕1px 边框会显示的比较宽，解决办法是，使用scale 缩放0.5倍实现，并且需要是在after 伪元素中实现缩放，不影响原有元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title><style>.container1 {border: 1px dashed red;margin-top: 10px;}.container2 {position: relative;margin-top: 10px;}.container2:after {content: "";position: absolute;bottom: 0px;left: 0px;right: 0px;border-bottom: dashed red 1px;-webkit-transform: scaleY(.5);}</style>
</head>
<body><div class="container1">WSKTN
</div>
<div class="container2">WSKTN
</div>
</body>
</html>

另外还可以通过线性渐变，50％的半透明，来实现半px的线条

   .container3 {margin-top: 10px;height: 1px;background: white -webkit-linear-gradient(bottom  , red, red 50%, transparent 50%, transparent 100%) left bottom no-repeat}

RETINA 屏幕1px 边框实现相关推荐

7种方法实现移动端Retina屏幕1px边框效果
在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样 ...
7种方法解决移动端Retina屏幕1px边框问题
造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应cs ...
background图片不显示_一种解决Retina屏幕1px边框显示问题的方案
一.背景介绍: Retina是一种新型高分辨率的显示标准,是把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度:同时CSS样式表中px单位是一个相对值,并不是绝对值,实际在R ...
移动端Retina屏幕1px边框问题
问题:移动端开发过程中border出现问题原因:css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反 ...
解决移动端Retina屏幕1px边框问题
1.0.5px边框 6.viewport+REM
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案
移动端采用Flexible将PX转换REM适配及开发中Retina屏1px边框的两种解决方案说明:两个方案均基于Webpack构建. 方案一: 搭建环境及相关配置 webpack 3,需要loade ...
mobile web retina 下 1px 边框解决方案
http://www.tuicool.com/articles/ZRv6bun 再谈mobile web retina 下 1px 边框解决方案时间 2015-01-03 12:03:31 Hug ...
移动端视网膜（Retina）屏幕下1px边框线的解决方法
本文主要介绍几种移动端视网膜(Retina)屏幕下1px边框线的解决方法. 1.通过viewport + rem的方式来兼容. 目前这种兼容方案相对比较完美,适合新项目(老项目改用REM单位成本会比 ...
前端开发之retina屏幕
像素 && ppi 首先先说一下pixel(picture element),显示图像的最小单位,有多个带色彩的像素点组成的整体就是一张图像.然后再说一下ppi(pixel per i ...
动态rem与1px边框问题的理解
当我们在项目开发中,拿到设计师的设计图,满怀欣喜的准备按照设计图将页面实现出来的时候,我们通常会遇到这个问题: 如何将页面的内容按照在不同手机屏幕浏览的情况下,比例都是不变的呢?这个时候我们就需要使用 ...

RETINA 屏幕1px 边框实现

RETINA 屏幕1px 边框实现相关推荐

最新文章

热门文章