资讯专栏INFORMATION COLUMN

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

felix0913 / 1358人阅读

摘要:使用伪类和实现

使用伪类: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

相关文章

  • 关于移动 1px 像素问题

    摘要:移动端变粗的原因移动端的总会有一句这句话定义了本页面的的宽度为设备宽度初始缩放值和最大缩放值都为并禁止了用户缩放通俗的讲是浏览器上可用来显示页面的区域这个区域是可能比屏幕大的,的设置和屏幕物理分辨率是按比例而不是相同的移动端对象有个 移动端1px变粗的原因 移动端html的header总会有一句这句话定义了本页面的viewport的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了...

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

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

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

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

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

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

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

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

    yibinnn 评论0 收藏0

发表评论

0条评论

felix0913

|高级讲师

TA的文章

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