1px的实现 - 相关文章

移动端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以…

[Cordova] 手机网页里的1px

[Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素.而是会依照尺寸.分辨率等等数值,计算出一个倍率值,在屏幕上做等比的显示.也就是说,HTML页面里的1px,在不同的手机上,可能会以两个屏幕像素.或是三个屏幕像素来做显示. 相关的技术细节可以参考下列资料: 移动端尺寸基础知识 - 可乐橙的私房demo Chrome开发者工具,对于手机网页1px的支…

iOS去除导航栏和tabbar的1px横线

1.在自己定义的导航栏中或者设计稿中经常需要去除导航栏的1px横线,主要是颜色太不协调了去除之前的图片要去除这1px的横线,首先应该知道它是什么,在Xcode的界面调试中可以看到,它其实是UIImageView来的找到横线是什么了··· 其实这是navigationBar的shadowImage,所以只要设置它为空即可,但是设置它为空之前应该先设置它的背景也为空,全部代码如下: [self.navigationController.navigationBar setBackgroundIm…

css中的1px并不总等于设备的1px（高分辨率不等低分辨等）

在css中我们一般使用px作为单位,在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素,这可能会造成我们的一个错觉,那就是css中的像素就是设备的物理像素.但实际情况却并非如此,css中的像素只是一个抽象的单位,在不同的设备或不同的环境中,css中的1px所代表的设备物理像素是不同的.在为桌面浏览器设计的网页中,我们无需对这个津津计较,但在移动设备上,必须弄明白这点.在早先的移动设备中,屏幕像素密度都比较低,如iphone3,它的分辨率为320x480,在iphone3上,一个c…

移动端1px

移动端不同尺寸设备dpi不同,会造成1px线条不同程度的缩放,可利用媒体查询device-pixel-ratio,进行不同情况匹配: @media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5){//dpi:1.5 .border-1px:after{ -webkit-transform:scaleY(0.7); transform:scaleY(0.7) } } @media(-webkit-min-device…

Retina屏实现1px边框

问题描述通常我们实现边框的方法都是设置1px的边框,但是在retina屏上因为设备像素比的不同,边框在移动设备上的表现也不相同,例如在devicePixelRatio = 2的retina屏下会显示成2px.这对于拥有像素眼的设计同事来说是无法忍受的,他们会一眼看出这边框粗了很多(真可怕,不过经历这次问题之后,感觉自己也练成了像素眼),并且在用户体验上略差,所以现在要解决的问题就是在retina屏幕下实现1px的边框. 解决方案查找了一些资料,也对比了很多方案,个人认为这个是css的问题,所…

关于移动端1px边框问题

<div class="z_nei_list"> <div class="z_name_left font-size3">身份证号:</div> <div class="z_name_input font-size3"> <input id="strIdentity" maxlength="18" value="" type=&quo…

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"…

IE6如何定义1px左右高度的容器？

<!doctype html><html> <head> <meta charset="UTF-8"> <meta name="Author" content="胡超"> <title>super胡</title> <style> div{ background:red; height:1px; /*1种.zoom:0.08;缩小0.08倍*/ /*2…

Canvas 2D绘制抗锯齿的1px线条

当绘制1像素的线条时,发现多条线明显存在着粗细不均的问题,线条带有明显的锯齿. 事实上,Canvas的绘制线条指令都存在这个状况,如lineTo,arcTo,strokeRect. 解决方案是将Canvas平移半个像素即可: var ctx = document.getElementById("canvas").getContext("2d"); ctx.translate(0.5, 0.5); 这意味着,在绘制线条时,如果Canvas上下文中对应的坐标值为整数,那…

移动端1px细线的处理

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>利用transform实现1px的细线</title> <style type="text/css"> .line{ position: relative; margin-top: 20px; border:none; } .…

移动端边框1px的实现

查看京东的移动端1px实现原理,用的是:after和css3的scale(0.5)缩放. border-right fr:after{ height:100%; content:' '; width:1px; border-right:1px solid #f0f0f0; position:absolute; top:0; right:-1px; transform:scaleX(0.5); -webkit-transform:scaleX(0.5); z-index:10; } border-…

css笔记--web端小于1px设计的处理方法

HTML代码 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>last-child</title> <style> body{ color:#333; } li.test-last-child:after{ display: block; content: ''; height: 10px;…

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…

1px

Retina屏的移动设备如何实现真正1px的线? <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no&…

Retina 屏移动设备 1px解决方案

做移动端H5页面开发时都会遇到这样的问题,用 CSS 定义 1px 的实线边框,在 window.devicePixelRatio=2 的屏幕上会显示成 2px,在 window.devicePixelRatio=3 的屏幕上会显示成 3px,明明希望是极细的线条,到 Retina 屏上却变得粗大丑陋.这是因为 CSS 中的 px 单位定义的是逻辑像素值,而实际显示的效果会以物理像素呈现,Retina 屏幕的物理像素值和逻辑像素值不同就造成了这种差异. 如果想让 HTML5 页面像 Nativ…

解决IE6下DIV无法实现1px高度问题

2.多加一个line-height:1px的属性,不过得在DIV里多加一个 ,也就是空格,以下为引用的内容: <styletypestyletype="text/css"> .a{ width:200px; height:1px;line-height:1px; background:red; } </style> <DIVclassDIVclass="a"> </DIV> 这个方法我测试通过．很好用．如果你要做指定长…

mobile web retina 下 1px 边框解决方案

本文实际上想说的是ios8下 1px解决方案. 1px的边框在devicePixelRatio = 2的retina屏下会显示成2px,在iphone 6 plug 下,更显示成3px.由其影响美感. 还好,时代总是进步的.也许很多人都不知道, 现在IOS8下,已经支持0.5px了.. 那么意味着,在devicePixelRatio = 2下,我们可以使用如下的css代码: 但是在ios7以下,android等其他系统里,0.5px会被显示为0px,即该解决方案需要写hack兼容老旧系统. 三种…

移动端下网页border：1px显示

解决这个问题之前首先要了解移动前端开发viewport的概念,自己写了一篇很粗糙viewport详解的文章对它有了一个很简单的理解.这里推荐一篇很详细的博文<<移动前端开发之viewport的深入理解>> 步入正题直接上代码解决border:1px的解决办法 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="view…

IE6下不能定义1px高度的容器和IE6 双边距

(1)触发的条件---定义一个div,将容器的高度设置成1px (2) 编码得到的结果---在IE6浏览器中,容器的高度不是1px 而是18px (3)出现问题的原因---是因为IE6浏览器下默认的行高 (4)解决的方法---添加属性 line-height:1px overflow:hidden; (可有可无的属性 zoom:1;) 关于IE6双倍边距bug解决 (1)触发的条件: 父元素中的子元素设置了float属性同时,在某个方向上的浮动又添加了相应的ma…

使用border-image实现类似iOS7的1px底边

使用border-image实现类似iOS7的1px底边 iOS7已经发布有一段时间,扁平化设计风格有很多值得称赞的地方,其中有很多设计细节都是值得研究的. 首先,来看下面iOS设置的截图中的border: 从上面的截图可以看到iOS7的设计是非常精细的,border是一根非常细的线.这篇文章将说明如何使用border-image实现iOS7的border效果. 在看下面的内容之前,需要先了解devicePixelRatio和border-image,不熟悉的同学请自行脑补: 设备像素比devi…

retina屏实现border边框1px

.border { position: relative; width: 300px; height: 200px; } .border:after { border: 1px solid #ff3300; display: block; content: ''; position: absolute; top:; right:; bottom:; left:; -webkit-transform-origin: 0 0; -webkit-transform: scale(1); pointer…

移动端 Retina屏各大主流网站1px的解决方案

Retina屏的移动设备如何实现真正1px的线? 在retina屏下面,如果你写了这样的meta <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 你将永远无法写出1px宽度的东西,除此之外,inline的SVG等元素,也会按照逻辑像素来渲染,整个页面的清晰度会打折: 先看看 “诸子百家 ” 是如何实…

html5 Canvas画图3：1px线条模糊问题

点击查看原文地址: html5 Canvas画图3:1px线条模糊问题本文属于<html5 Canvas画图系列教程> 接上一篇canvas画线条教程上次我们讲到,canvas有时候会出现1像素的线条模糊不清且好像更宽的情况,如下图: 这样的线条显然不是我们想要的. 这篇文章的目的就是弄清楚里面的原理,以及解决它. 大家都知道屏幕上最小的显示尺寸就是1像素,虽然小于1像素的东西可能显示不出来,但计算机可不管,他会试着画一下. 其实像素终究来说也是一个单位,假如我们把画布放大到足够大,足以看…

table边框1px

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

IE/Chrome背景图片居中1px偏移解决方法

最近在支持行业运营的一个推广页面,遇到了非常规的页面banner图居中的问题,为了解决此问题,做了简单的测试,做了一个小结,为经常做大促页面的兄弟姐妹们提供参考解决方案. 首先来看看现象.最经典的页面如下图从图中可以看到本页面为经典的顶部大图通栏,尺寸为1210px,但是为了兼顾所有分辨率,所以作为背景图片居中处理.内容区域为常用的经典栅格布局990px,设置margin:0 auto;大概的伪代码结构如下: XHTML 1 2 3 4 <div id=”content”> <…

1px 究竟是多大

一.引言 1px 究竟是多大?这应该是一道很不错的面试题.且看: 1.iphone6s 的分辨率是1920px * 1080px 2.iphone6s 全屏截图文件的尺寸是1242px * 2208px 3.iphone6s 的宽度是414px 4.iphone6s 不加 viewport 的情况下,window.innerWidth = 980px 5.iphone6s 加 viewport 且 scale 都为1的情况下,window.innerWidth = 414px 6.iphone6…

webapp 1px显示两倍的问题

公司最近换新首页,按照设计师的要求<大家都在逛>的分割线要1个像素. .span-3{ width:33.3333%; &:not(:first-child){ &:before{ content: " "; display: block; width: 1rem/16*1; height: 100%; background-color: rgb(224,224,224);//#e0e0e0; float: left; } } img{ max-width:…

【1px的实现】的更多相关文章