border 1px 移动端变细

css 移动端1px更细

1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div class="div-block color1"> 1 </div> <div class="div-block color2"> 2 </div> <div class="div-block color3"&

设计图上的标注要有1px的线条,css本来以为直接写个1px就能万事大吉了,手机上怎么看都很粗. 至于具体为什么会这样,百度看了一圈,有点懵懵懂懂,大概就是物理分辨率高于实际网页的像素分辨率的原因吧. 试过了几种办法: 1. 阴影设置RGBA <!DOCTYPE html> <html> <head> <title></title> <meta name="viewport" content="width=de

移动端1px的border

移动端浏览器解决1px的底部border问题 1.使用border:1px solid #e0e0e0. 在不同设备下由于devicePixelRatio不同导致1px实际显示的长度不同.所以在移动端会显示出3px或者2px.所以不能用. 2.使用border-image.这种方法也很好,使用一个1px*1px的图片进行repeat,但是某些app内的webview版本很老,不支持这种css3属性. 3.使用:after伪元素,进行设置border-top,border的宽度设为需要的4倍然后t

移动端 1px 像素边框问题的解决方案（Border.css）

前言关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 解决方案将以下代码放在border.css文件中,然后引入常用className border:整个盒子都有边框 border-top:上边框 border-right:右边框 border-bottom:下边框 border-left:左边框 **使用:<div class="border-top"></div>** border.css[注意] 使用时注意:该class名字只作用于(dis

移动端比1px还小的border

巧用border 在移动端经常出现border,细边框但有的时候产品大大1px甚至乎会觉得不够细那么要如何写出比1px还要小的border下面是代码希望对大家有所帮助 .thinner-border { position: relative; width: 1px; margin:14px 0; height: 20px; } .thinner-border:after { content: ''; position: absolute; width: 500%; height: 500%

border.css(解决移动端1px问题)

由于某些机型分辨率过高,会导致1px变成2-多px像素的问题,引用bordercss解决 @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .border-bottomleft {

移动端1px边框

问题:移动端1px边框,看起来总是2倍的边框大小,为了解决这个问题试用过很多方法,用图片,用js判断dpr等,都不太满意, 最后找到一个还算好用的方法:伪类 + transform 原理是把原先元素的 border 去掉,然后利用:before或者:after重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位单条边框: .hairlines li{position: relative; border:none; } .ha

[半转]1px边框移动端

半转的意思是借鉴参考,搬砖,加了一些自己的想法. 在移动端里,因为存在2倍像素的问题,所以很多时候,移动端上的1px边框并不是意义上的.从下图红色框看到dpr:2.0 ,表示1px等于2倍的物理像素. 网上找了一下,自己总结了一下. 实现方法代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width

移动端视网膜（Retina）屏幕下1px边框线解决方案

原因: 因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRatio=2的retina屏下会显示成2px. 但在IOS8中,已经支持0.5px了,那就意味着, 在devicePixelRatio=2的时候,我们可以使用如下的css: div{ border:1px solid #000; } @media (-webkit-min-device-pixel-ratio: 2) { div{ border:0.5px solid #000; } } 但在ios7以

Retina屏下1px border

layout tltle tags post ios7下移动web开发的几个坑 webapp 1.Retina屏下1px border 由于高清屏的特性,1px是由2×2个像素点来渲染,那么我们样式上的border:1px在Retina屏下会渲染成2px的边框,一般有以下几种方法: 图片阴影缩放移动版开发采用软图片的方法: .border { background-image:linear-gradient(180deg, red, red 50%, transparent 50%), l

7种方法解决移动端Retina屏幕1px边框问题

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

移动端1px问题处理方法

在做移动端开发时,设计师提供的视觉稿一般是750px,当你定义 border-width:1px 时,在iphone6手机上却发现:边框变粗了.. 这是因为,1px是相对于750px的(物理像素),而我们定义的1px是相对于375px的(css像素)“实际上应该是border-width:0.5px”. 解决方法: 1.border-image 图片实现在使用 border-image 时,将border设计为物理1px,如下: .border-image-1px { border-widt

移动端1px边框实现

问题描述:移动端iPhone上的1px边框看起来像2px那么粗.问题分析:不同的手机有不同的像素密度,在window对象中有一个devicePixelRatio属性,它可以反应设备的像素与css中的像素比.即devicePixelRatio=物理像素/独立像素.iPhone使用的是Retine屏,“Retina”是一种显示技术,可以把更多的像素点压缩至一块屏幕里,从而达到更高的分辨率并提高屏幕显示的细腻程度.因为Retine屏的分辨率始终是普通屏幕的2倍,1px的边框在devicePixelRa

7种方法实现移动端Retina屏幕1px边框效果

在Reina(视网膜)屏幕的手机上,使用CSS设置的1px的边框实际会比视觉稿粗很多.在之前的项目中,UI告诉我说我们移动项目中的边框全部都变粗了,UI把他的设计稿跟我的屏幕截图跟我看,居然真的不一样.没有办法,只有在后面的版本中去修改了,但是要改的话,需要知道是为什么.所以查了很多资料,终于搞懂了这个问题,并且总结了几种方法. 造成边框变粗的原因其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixe

移动端的1px边框问题

最近在做一个移动端项目,涉及到1像素问题其实质就是移动端的css里写1px,看起来比1px粗,这就是物理像素和逻辑像素的区别.物理像素和逻辑像素之间存在一个比例关系,在Javascript中可以用window.devicePixelRatio来获取,也可以用媒体查询的-webkit-min-device-pixel-ratio来获取,具体的比例差距由设备决定如何解决这个问题才是重点,下面集中提出解决方案: 1.媒体查询利用设备像素比缩放,设置小数像素 css可以写成这样: .border{b

移动端1px细线解决方案总结

现在的PM和UI总以看app的眼光看html5, html页面要做的专业美观,而且必须很精细. 去年的时候UI就告诉我h5上的边框线太粗,把整站都给拉low了. 当时工期紧就没太在意1px粗细, 好在那个版本没上线就迭代掉了,后面的版本针对这个问题做了些尝试, 这里总结下1px细线的处理方法移动端1px变粗的原因为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 <meta name="

移动端Retina屏边框线1px 显示为2px或3px问题解决方法

我们在开发移动端web项目时经常遇到设置border:1px,但是显示的边框却为2px或是3px粗细,这是因为设备像素比devicePixelRatio为2或3引起的. 1.何为“设备像素比devicePixelRatio” 设备上物理像素和设备独立像素(device-independent pixels (dips))的比例. 公式表示就是:window.devicePixelRatio = 物理像素 / dips dip或dp,(device independen

移动端1px边框伪类宽高计算

移动端1px边框在手机上看显得比较粗,于是我们用伪类结合css3缩放的方法去设置线条,但是如果设置div的一条边,水平线就设置宽度100%,垂直线就设置高度100%,那么如果是div的四条边呢?宽高100%会出现问题,那么如何解决? 请看下面代码: after:{ border: 1px solid #c1c0c0; height: 303%; content: ''; width: 303%; position: absolute; bottom: 0; right: 0; transform

在移动端实现1px的边框

由于分辨率 DPI 的差异,高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染,有的屏幕甚至用到了 3×3 个像素点所以 border: 1px 在移动端会渲染为 2px 的边框与设计图产生差异,并且没有那么美观. 两种解决方法: 一.transform:scale 使用伪类 :after 或者 :before 创建 1px 的边框,然后通过 media 适配不同的设备像素比,然后调整缩放比例,从而实现一像素边框首先用伪类创建边框 .border-bottom{ position:

解决移动端1px的问题，设备像素比devicePixelRatio的应用

本文主要针对移动端1物理像素问题展开解决这个问题先要了解一下概念: CSS像素(CSS Pixel):(通俗说:样式中写的值)就是我们在样式代码中常写的逻辑像素,是一个抽象概念,实际并不存在设备独立像素(Device Independent Pixel):与设备无关的逻辑像素,代表可以通过程序控制使用的虚拟像素,是一个总体概念,包括了CSS像素设备像素(Device Pixel):物理像素,设备能控制显示的最小单位,我们眼睛看到的屏幕上所呈现的像素大小就是这个,我们常说的1920×1080