资讯专栏INFORMATION COLUMN

关于移动端1px的解决方法

felix0913 / 1557人阅读

摘要:使用伪类和实现

使用伪类:after,:before和transform:scale()实现

border-box{
    position:relative;
}
.border-box:after{
        content:"";
        position:absolute;
        bottom:0;
        left:0;
        width:100%;
        border-top:1px solid #ffffd;
     }
@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-box:after{
       
        transform:scaleY(0.5);
        -webkit-transform:scaleY(0.5);
     }
 } 
@media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){
    .border-box:after{
       
        transform:scaleY(0.3);
        -webkit-transform:scaleY(0.3);
     }
 }  

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/117512.html

相关文章

  • 一次搞清楚移动适配这几个坑爹单位慨念

    摘要:真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...

    objc94 评论0 收藏0
  • 一次搞清楚移动适配这几个坑爹单位慨念

    摘要:真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...

    elva 评论0 收藏0
  • 关于移动适配,你必须要知道

    摘要:需要注意,上面的尺寸都是屏幕对角线的长度英寸缩写为在荷兰语中的本意是大拇指,一英寸就是指甲底部普通人拇指的宽度。由于手机尺寸为手机对角线的长度,我们通常使用如下的方法计算的为,那它每英寸约含有个物理像素点。导读 移动端适配,是我们在开发中经常会遇到的,这里面可能会遇到非常多的问题: 1px问题 UI图完美适配方案 iPhoneX适配方案 横屏适配 高清屏图片模糊问题 ... ...

    yibinnn 评论0 收藏0

发表评论

0条评论

felix0913

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<