【移动端1px细线问题】的更多相关文章

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

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

移动端1px细线解决方案--利用transform缩放方式

移动端1px会显示为2px; 解决方式很多,这里介绍比较常用的一种方式--css的transform属性缩放 1. 上边框 相当于 border-top <div class="bordert1px"></div> css /*top*/ .bordert1px { position: relative; } .bordert1px:before { content: " "; position: absolute; left:; top:;…

移动端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细线问题

1可以用伪类实现 .con{position: relative;.con:before { content: " "; position: absolute; left: 0; top: 0; right: 0; height: 1px; border-top: 1px solid #d9d9d9; color: #d9d9d9; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scal…

移动端高清适配方案（解决图片模糊问题、1px细线问题）

本文介绍了移动端适配的3种方法,以及移动端图片模糊问题和1px细线问题的解决方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. >>>>物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的像素只是一个抽象的单位,在不同的设备或不同的环境中,CSS中的1px所代表的物理像素是不同的.在PC端,CSS的1px一般对应着电脑屏幕的1个物理像素,但…

移动端1px边框

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

手机端1px细线公共类

手机端1px细线公共类 .borderBottom1px{ position: relative; } .borderBottom1px:after{ content: ""; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid #e3e3e3; -webkit-transform:scaleY(.5); -webkit-transform-origin:0 0; } 手机端1px细线公共…

移动端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边框最好的方法

在移动端开发时,经常会遇到在视网膜屏幕中元素边框变粗的问题.本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法. 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display(视网膜屏幕)的概念,在 iPhone4 使用的视网膜屏幕中,把 2x2 个像素当 1 个物理像素使用,即使用 2x2 个像素显示原来 1 个物理像素显示的内容,从而让 UI 显示更精致清晰,这 2x2 个像素叫做逻辑像素.像这种像素比(像素比(即dpr)＝ 物理像素 / 逻辑像素)…

移动端实1px细线方法

前言 在移动端中,宽度100%,1px的线看起来要比pc端中宽度100%,1px的线粗, 那是因为css中的1px并不等于移动设备(物理像素)的1px.物理像素显示是1个像素代表2个像素,所以出现为2px 所以我们在移动端中为了让1px的线“看起来”苗条些,会采用一些手段. 解决办法 实现1px的线 方法一:transform 在移动端中,我们对宽度100%,1px的线进行改造,将其宽度设为200%,高度不变,之后使用transform对其缩放50%. .line{ width:200% ; h…

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

移动端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的解决办法之styled

做项目的时候总结了一个styled中解决移动端项目1px像素线的问题,封装了一个函数,大家可以直接使用,很方便. 1 import styled from 'styled-components' const border = ({ component=null, width='1px', style='solid', color='#ccc', radius=0 }) => { return styled(component) ` position: relative; border-width…

移动端1px边框实现

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

移动端1px边框问题

用于手机端受dpr的影响,实际开发中,PC端和移动端展示的效果不太一样,往往在PC端显示的是1px,移动端常常是偏粗一些. 解决办法: 主要是用到伪类及缩放.在需要画边框的元素上,设置一个伪类,它的伪类相对于这个元素是一个绝对定位,通过伪类画一个1px边框,然后把它定位到元素的下面,就变成一个下边框. border-1px($color) position: relative &:after display: block position: absolute left: 0 bottom: 0…

移动端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线适配问题-------适配各种编译CSS工具 stylus sass styled-componet实现方法

其实在stylus与sass中实现移动端1像素线各个手机设备的适配问题的原理是一样的, 首先我还是先介绍一下原理和所依赖的方法 原理:其实他们都是通过css3的媒体查询来实现的 步骤思路: 1.给目标元素进行相对定位 2.给目标元素添加伪元素 ::after/before  并进行绝对定位 3.判断DPI   1DPI   100%   --------------使用媒体查询 2DPI   200% 3DPI   300% 4.通过css3中的transform scale等比缩放 下面是具体…

移动端 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的问题，设备像素比devicePixelRatio的应用

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

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的边框

我们知道,在移动端存在物理像素(physical pixel)和设备独立像素(density-independent pixel)的概念.物理像素也称为设备像素,它是显示设备中一个最微小的物理部件,每个像素可以根据操作系统设置自己的颜色和亮度.设备独立像素也称为密度无关像素,可以认为是计算机坐标系统中的一个点,这个点代表一个可以由程序使用的虚拟像素(比如CSS像素),然后由相关系统转换为物理像素.根据物理像素和设备独立像素也衍生出了设备像素比(device pixel ratio)的概念,简称为…

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代…

移动端1px的适配问题

先看个概念: window.devicePixelRatio = 物理像素 / dips(独立像素) window.devicePixelRatio是设备的物理像素和独立像素的比例,可以叫设备像素比. 非视网膜屏幕的iphone上设备像素比是1,而retina屏幕的iphone,一般像素比是2或者3. 大部分的浏览器目前还在运行在设备像素比是1的系统上,当移动到retina类似设备上时候,就会遇到问题. css pixels:是可以被硬件和软件调节的单位.一般浏览器的设备像素比是1,所以一个cs…

css实现1px 像素线条_解决移动端1px线条的显示方式

使用CSS 绘制出 1px 的边框,在移动端上渲染的效果会出现不同,部分手机发现1px 线条变胖了,这篇文章整理2种方式实现1px 像素线条. 1.利用box-shadow + transform <style> span.onepixel{ width: 300px;position: relative;top:50px; } span.onepixel::after { content: ''; width: 300px; position: absolute; bottom: ; lef…

移动端1px像素解决方式,从1px像素问题剖析像素及viewport

在移动端web开发过程中,如果你对边框设置border:1px,会发现,边框在某些手机机型上面显示的1px比实际感觉会变粗,这也就是1像素问题.如下图是对桌面浏览器和移动端border设置1px的比较.那么是什么导致这种原因的呢? 一.1px像素产生原因 首先,我们先对物理像素,设备独立像素,设备像素比等概念进行了解. 1.设备像素(device pixels) 设备中能控制显示的最小单位.能单独显示颜色的最小单位或点,称作像素点或像点. 屏幕尺寸及其屏幕分辨率 屏幕尺寸是以英寸为单位(1英寸=…

关于移动端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"…

移动端1px 边框完整方案（四个方向）

使用stylus(预处理) 需要一个函数接收两个参数 第一个需要在哪个方向出现边框 第二个边框颜色 $border1px(face,$color) 根据传入的方向属性,调整其他参数 l  左右方向 t  垂直方向 w 上下出现边框则为width反之为height(边框在方向上的长度) b 上出现边框则为bottom x 为哪个方向上的缩放 具体对应关系如下 face==top && (l=left t=top b=bottom w=width x=scaleY) face==bottom…

CSS3 移动端 1PX 线变成0.5PX

.line1 {position:relative} .line1:after {content:'';position:absolute;bottom:0;left:0;width:100%;height:1px;border-bottom:1px solid #e0e0e0;-webkit-transform:scaleY(.5);transform:scaleY(.5);}…

移动端1px问题

.component-confirm__buttons { border-top: 1px solid #eceef0; box-shadow: 0 1px 1px #fff; } 造成边框变粗的原因 其实这个原因很简单,因为css中的1px并不等于移动设备的1px,这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是…