移动端一物理像素边框的设置

  

.border-1{
    position: relative;
}
.border-1:after{
    content: ‘ ‘;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    border-top: 1px solid rgba(7, 17, 21, 0.1);
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
    .border-1:after{
        -webkit-transform: scaleY(0.7);
        transform: scaleY(0.7);
    }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
    .border-1:after{
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);

    }
}

  

时间: 2024-10-08 07:46:32

移动端一物理像素边框的设置的相关文章

原 浅谈移动端开发--物理像素和逻辑像素

1.物理像素 设备像素,在同一个设备上,它的物理像素是固定的,这是厂商在出厂时就设置好了的,即一个设备的分辨率是固定的. 2.逻辑像素 CSS像素,viewport中的一个小方格,CSS样式代码中使用的是逻辑像素.如果在一个设备中,物理像素与逻辑像素相等,将不会产生任何问题.但是,在iphone 4中,物理像素是640px*960px,而逻辑像素数为320*480px.因此,需要使用大约4个物理像素来显示一个CSS像素. 3.像素比 物理像素与逻辑像素之间的比例.当像素比为1:1时,使用1个物理

移动端开发--物理像素和逻辑像素

虽说在在web app开发中,只需要掌握页面布局,页面适配,能够将页面完美在各种设备上展现.但是,为什么要这样做?这样做原理是什么?这么优点是什么?深究下去,大家不一定很清晰. 那么,咱们一起学习下~ 一.2种像素 设备像素 设备像素是指设备中使用的物理像素,又称硬件像素 css像素 css像素是指css样式到吗中使用的逻辑像素.如果在一个设备中,硬件像素数与css像素数相等,将不会产生任何问题.但是,由于视网膜设备的出现,这两者之间的差异变得越来越大.硬件像素数与css像素数成为两种截然不同的

移动端1像素边框

通常我们会有伪类和定位来解决1像素的问题,但是使用伪类也是有问题的,但是你可以换一种方式实现1像素边框的问题,box-shadow 1. 实现下边框 box-shadow: inset 0 -1px 0 0 #000; 2. 实现右边框 box-shadow: inset -1px 0 0 0 #000; 3. 实现左边框 box-shadow: inset 1px 0 0 0 #000; 4. 实现上边框 box-shadow: inset 0 1px 0 0 #000; 使用阴影设置1像素边

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

【H5开发基础】移动端1像素边框问题的解决方案

自从乔帮主提出retina屏以来.可练就了不少前端兄弟的像素眼,有强迫症的伙伴们日子可就煎熬了.为了画出真正的1像素边框,前端猿们也是受尽各浏览器的虐待了. 关于什么是移动端1像素边框问题,先上两张图,大家就明白了. 图1 图2 实现1PX边框的方法有很多,各有优缺点,比如通过背景图片实现.通过transform: scale(0.5)实现.本次实现的是通过VIEWPORT+rem实现的,优点是可以自适应已知的各类手机屏幕,且不存在其它方法存在的变颜色困难.圆角阴影失效问题.缺点嘛,这方法适全新

CSS中的px与物理像素、逻辑像素、1px边框问题

一直不太清楚CSS中的1px与逻辑像素.物理像素是个什么关系(作为一名前端感觉很惭愧 -_-!),今天终于花时间彻底弄清楚了,其实弄清楚之后就觉得事情很简单,但也只有在弄清楚之后,才会觉得简单(语出<禅与摩托车维修艺术>,哈哈哈哈). 两种像素 物理像素:设备屏幕实际拥有的像素点.比如iPhone 6的屏幕在宽度方向有750个像素点,高度方向有1334个像素点,所以iPhone 6 总共有750*1334个物理像素. 逻辑像素:也叫"设备独立像素"(Device Indep

移动端0.5像素0.5像素边框0.5像素圆角边框

0.5像素线条: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes&quo

移动端,h5页面1px 1像素边框过粗解决方案

//h5有个小bug 1像素边框过粗,其实有个解决方案,就是利用伪元素:after,结合css3中的scale在y轴方向缩放0.5就行了 //父元素 //删除border-bottom,添加position:relative,伪元素定位用. - border-bottom:1px solid yellow: + position:relative; //为父元素添加:after伪类 :after { content: ''; height: 1rpx; background: $colorE3;

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

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