移动端怎么处理1px问题

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

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

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

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

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

移动端border：1px问题解决方案

了解设备像素和css像素的因该知道,通常我们在写移动端时,是按照设计稿标注的像素除以设备的DPR来写真实的像素, 比如在iPhone6上,我们写的20px字体世界上在视觉效应上有20px; 所以当我们写1px边框时,在手机上看起来会变粗变为2px: 对此有如下解决方案: .border-1px(@color){ position:relative; &::after{ display: block; position: absolute; left:; bottom:; border-top:1

移动端设备中1px适配

方式1:伪类+transform实现,主要用transform中的scale缩放,缩放默认中心点是以x,y轴的50%处,因此需要用transform-origin调整中心点 html代码: <div class="box"> <ul> <li class="b-b">1</li> <li class="borders">2</li> </ul> </div&

[半转]1px边框移动端

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

移动端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像素解决方式,从1px像素问题剖析像素及viewport

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

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

Css-移动端适配总结

前言工作以后,大部分的业务工作都是基于移动端H5的,开发过程中学习了很多东西,遇到过许多问题,诸如rem\em\css px\device px等,本文纯属个人的归纳总结,如有问题,请指出亲喷~ PC端本文主要是讲解移动端的响应式布局, 但是在真正进入之前, 先了解一些概念. device px(设备像素)和 css px(css像素) 通常在PC端上面,我们并不需要考虑设备像素和css像素之间的差别,以目前的pc来看,1个设备像素通常等于1个css像素.可以使用screen.width/h

移动端适配--flexible.js

引言: H5适配一直是一个比较普遍的问题,很多文章都会讲,最近开发了一个H5的项目使用了一下淘宝的 flexible.js,写一篇文章自己总结一下. 一.背景介绍: Flexible.js是淘宝公开的一种移动端适配方案,用来解决H5开发中的各个机型适配问题,是一种比较成熟的适配方案. 二.使用方法: 在html头部引入flexible.js,最好放在最头部,重构时使用rem替代px像素即可,flexible会做好所有适配.换算关系为1rem对应1/10设计尺寸,如ipone6设计尺寸为750px

移动端项目中 @2x 图和 @3x 图的使用

移动端开发过程中,因为手机的dpr(设备像素比不同),我们需要根据dpr来修改图标的大小: 1.通过mixin,动态修改图标的背景图片.通过@media (媒体查询),判断设备的dpr. @mixin bg-image($url) { background-image: url($url + "@2x.png"); @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) { background-im

HTML标签的应用（新手）

雪碧图(精灵图): sprite compass-合并(尽量宽高相同) 兼容性: 1.resct重置技术:normalize技术 2.加前缀:-webkit- -moz- -0- -ms- 3.<!DOCTYPE>解析模式 4.css hack 不同浏览器显示不同的页面内容 5.条件注释<LTE...><GTE...> 6.导入包(引入) ------------------------------ 1.模糊度:opality(0-1) filter(0-100) --

移动webAPP前端开发技巧汇总2

一.关于单位的使用可能在传统的PC端来说,1px=1px的比例.而在移动端却不是这样,1px = ?. 因为出现了一个像素密度这样个东西,就不能在移动端使用“PX”这个单位.可能在你的大屏手机是1px等于1点几个像素,可能在小屏手机却刚好.就好比网页的兼容性一样,浏览器的内核不同,解析当然会有所不同! 正好,CSS3又给你出现了一个新的单位“rem”.当然出现了这样的问题,首先我们就会去问问神奇的“百度”.大多数网友给出的答案是:“给html根元素的字体大小设置font-size:62.5%,

Web前端年后跳槽面试复习指南

<pliga' 1,="" 'onum'="" 'kern'="" 1;="" margin:="" 0px="" 1.75em;="" text-rendering:="" geometricprecision;="" color:="" rgb(58,="" 65,="

CSS 基础拾遗（核心知识、常见需求）

本篇文章围绕了 CSS 的核心知识点和项目中常见的需求来展开.虽然行文偏长,但较基础,适合初级中级前端阅读,阅读的时候请适当跳过已经掌握的部分. 这篇文章断断续续写了比较久,也参考了许多优秀的文章,但或许文章里还是存在不好或不对的地方,请多多指教,可以评论里直接提出来哈. 核心概念和知识点语法 CSS 的核心功能是将 CSS 属性设定为特定的值.一个属性与值的键值对被称为声明(declaration). color: red; 复制代码而如果将一个或者多个声明用 {} 包裹起来后,那就组成了

移动端1px边框

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

移动端视网膜（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以

移动端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的实现

查看京东的移动端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-

移动端怎么处理1px问题

热门专题