美文网首页
移动端实现1px边框

移动端实现1px边框

作者: 桃花谷主V | 来源:发表于2017-12-31 15:47 被阅读0次

实现方式:伪元素 + 缩放
1,用伪元素在给需要设置边框的元素对应的地方画出PC端的1px边框;
sass语法:文件mixin.scss


image.png

2,根据设备的dpr设置伪元素缩放;
sass语法:文件base.scss


image.png

3,创建index.sccs,并在文件中导入mixin.scss 和base.scss。


image.png

4,在使用边框的组件中引入index.scss文件


image.png

将border-1px类名(用来缩放);
将border-1px()混合(用来设置伪元素)设置给要设置边框的元素:@include border-1px(rgba(7,17,27,0.1));

相关文章

  • 前端遇到的那些技术难点及性能优化之css篇

    移动端兼容 css篇 移动端的 1px 问题描述:1px 的边框。在高清屏下,移动端的 1px 会很粗。 产生原因...

  • 移动端一像素边框

    如何实现在移动端中显示一像素的边框 实现方案一:0.5像素 标准边框语法div{ border: 1px sol...

  • 移动端适配及1px边框问题

    1、移动端适配 2、1px边框问题

  • 常用css总结

    垂直居中 伪类 + transform 实现移动端 Retina 屏幕 1px 边框 flex常用布局盒结构 关于...

  • 移动端实现1px

    在移动端网页开发中,ui设计稿的边框设为1px,用css实现出来,我们会发现有些机型显示的边框实际比1px粗一些,...

  • 移动端实现1px边框

    实现方式:伪元素 + 缩放1,用伪元素在给需要设置边框的元素对应的地方画出PC端的1px边框;sass语法:文件m...

  • 移动端一像素border实现

    在移动端开发中,我们拿到设计师给的移动端图,通常像素大小实现都是图尺寸的一半,那图中1px边框呢,我们实际写0.5...

  • 移动端1px边框的实现

    移动端1px的边框是非常常见的效果,在各种app或者网页上大量用到,比如微信和qq的联系人列表等.然而,当我们用c...

  • 1px

    CSS中1px分割线处理移动web开发之像素和DPR详解7种方法解决移动端Retina屏幕1px边框问题IOS基础...

  • 移动端1像素边框问题

    移动端1像素边框问题: 设置一个div的底部边框为 1px solid #000; 实际表现却是边框线是模糊的,或...

网友评论

      本文标题:移动端实现1px边框

      本文链接:https://www.haomeiwen.com/subject/bucagxtx.html