资讯专栏INFORMATION COLUMN

移动端1px线的实现

jaysun / 404人阅读

摘要:那么如何在移动端展示时分割线的高度小于呢常用方案通常的做法如下兼容问题定义完这个样式,在手机上看看,幸运的你可能会看到想要的效果已经展示了,然而这个存在兼容性问题,有的手机上线条没有展示,有的手机上会出现滑动屏幕时线条时有时无。

起因

现在移动端大部分设备都配备了retina屏幕,在做移动端适配时通常会将viewport设置为device-width值,这样一来1px就等于1物理像素*屏幕缩放值,iPhone6s上1px就等于2个物理像素。那么如何在移动端展示时分割线的高度小于1px呢?

常用方案

通常的做法如下:

.box {
    position: relative;
}
.line_bottom{
    height: 1px;
    width:100%;
    background-color: #b7daf0;
    position:absolute;
    transform: scaleY(0.3);
    -webkit-transform: scaleY(0.3);
}
兼容问题

定义完这个样式,在手机上看看,幸运的你可能会看到想要的效果已经展示了,然而这个存在兼容性问题,有的手机上线条没有展示,有的手机上会出现滑动屏幕时线条时有时无。此时还需要在父元素加上以下属性:

transform:perspective(500)

加上这个就可以完美兼容了,至于为什么~等我想到再补充

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

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

相关文章

  • 再谈移动适配和点5像素的由来

    摘要:再谈移动端适配百分比解决方案的缺点在我们的项目中大量的使用百分比来解决页面在宽度上的自适应,其实在高度上并没有很好的自适应。 前言 这篇文章的内容如题目一样,主要分为两个部分, 谈谈业内主流的移动端适配解决方案 点5像素的由来和实现方法 建议在读这篇文章的时候先读下这篇文章《高清屏概念解析与检测设备像素比的方法_20161005》,因为这些文章涉及的很多概念在这篇文章中都会提到。 ...

    lordharrd 评论0 收藏0
  • 一个方案 - 适配所有移动网页

    摘要:做过移动端网页的都知道,在一些高要求的移动网页上解决的屏幕适配问题上花了不少功夫,但有时候还是不尽满意,各种设备上显示还有稍微有一点差距的。 做过移动端网页的都知道,在一些高要求的移动网页上解决Iphone5、6、6p的屏幕适配问题上花了不少功夫,但有时候还是不尽满意,各种设备上显示还有稍微有一点差距的。 我曾今也尝试了很多办法,也参考了别人加的思路,有的用js,有的用媒体查询,有的用...

    Jingbin_ 评论0 收藏0
  • JavaScript “跑马灯”抽奖活动代码解析与优化(一)

    摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...

    isaced 评论0 收藏0
  • JavaScript “跑马灯”抽奖活动代码解析与优化(一)

    摘要:最近的项目中做了一个跑马灯的抽奖特效插件。这里主要是来写写自己的优化过程。所以写代码的时候一定要注意一些小细节哈。。。在以后,其返回的元素顺序等同于在中出现的先后顺序。尽管是一个数组。这时从加入执行队列到加入执行队列中间时间间隔是。 最近的项目中做了一个跑马灯的抽奖特效插件。上篇文章已经分享过html和css 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在...

    MRZYD 评论0 收藏0

发表评论

0条评论

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