CSS 1px

习惯开发PC网页的我在2016年初踏入移动开发领域 遇到各种“奇奇怪怪”的坑,例如1PX问题。一下列举一些常用的不常用的“解决”方法

1.通过修改meta

现代手机大多数都是1/2的像素比,可以直接修改meta为:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
例如淘宝首页:https://m.taobao.com/?sprefer=sypc00#index

但是如果你的页面文字很多的话你会发现一个问题,文字会比平常的字体细很多,甚至影响到用户的体验,不适用大多数网页

举个栗子,淘宝内页使用的是:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">


2.通过js获取像素比来修改meta,如果网站用到的框架有这个功能的话可以一试,如果是个人为实现的话,不建议,实在繁琐,受影响的东西太多

3.修改meta强制让视口安装某个宽度来渲染,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px,如果width太小,大屏幕下会出现模糊

<meta name="viewport" content="width=320, initial-scale=1" target-densitydpi='device-dpi'/>


4.使用伪类来实现:

li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
    -webkit-transform-origin: 0 0;
            transform-origin: 0 0;
}

记得给他的父类添加position:relative;

如果你使用less类似的css预处理语言就更简单了可以这样写:

.border-top(){
  position:relative;
  &:after{
     content: '';
      position: absolute;
      left: 0;
      top:0;
      background: #000;
      width: 100%;
      height: 1px;
      transform: scaleY(0.5);
  }
  
}

在需要的时候调用.border-top()就可以了,其他边框类似


四条边框的实现:

.ui-border-radius:before {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #e0e0e0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    padding: 1px;
    -webkit-box-sizing: border-box;
    border-radius: 8px;
    pointer-events: none;
}

把宽高设置和他的父级的2倍再缩小就可以

5.媒体查询锦上添花

@media screen and (-webkit-min-device-pixel-ratio: 2)
.ui-border-radius:before {
    content: "";
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #e0e0e0;
    -webkit-transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    padding: 1px;
    -webkit-box-sizing: border-box;
    border-radius: 8px;
    pointer-events: none;
}


最后补充一下对viewport的理解:

“移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陆康永

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值