移动端(手机)1像素边框实现方法

最新推荐文章于 2023-02-08 11:03:54 发布
最新推荐文章于 2023-02-08 11:03:54 发布
阅读量834 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38229202/article/details/69665192
版权
移动端下边框实现 
mixin.styl文件如下
border-1px($color)
   position: relative
   &:after
     display: block
     position: absolute
     left: 0
     bottom: 0
     width: 100%
     border-top: 1px solid $color
     content: ' '

@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)
 .border-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform:scaleY(0.7)

@media(-webkit-min-device-device-pixel-ratio:2),(min-device-device-pixel-ratio:2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform:scaleY(0.5)

<div class="tab border-1px"></div> // .border-1px
<style lang="stylus" rel="stylesheet/stylus">
@import './common/stylus/mixin.styl'
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7,17,27,0.1))  // border-1px($color)
</style>
移动端上边框实现

mixin.styl文件如下

  
  

   
   
    
    

     
     border-1px
     
     (
     
     $color
     
     )
    
    

    
    

     
        
     
     position
     
     : 
     
     relative
    
    

    
    

     
        
     
     &
     
     :
     
     before
    
    

    
    

     
          
     
     display
     
     : 
     
     block
    
    

    
    

     
          
     
     position
     
     : 
     
     absolute
    
    

    
    

     
          
     
     left
     
     : 
     
     0
    
    

    
    

     
          
     
     bottom
     
     : 
     
     0
    
    

    
    

     
          
     
     width
     
     : 
     
     100
     
     %
    
    

    
    

     
          
     
     border-top
     
     : 
     
     1
     
     px solid 
     
     $color
    
    

    
    

     
          
     
     content
     
     : 
     
     ' '
    
    

   
   

  
  

  
  

   
   
   
   
@media(-webkit-min-device-pixel-ratio:1.5),(min-device-pixel-ratio:1.5)

  
  

  
  

   
   
    
    

     
      .
     
     border-1px
    
    

    
    

     
         &
     
     ::
     
     before
    
    

    
    

     
           
     
     -webkit-transform
     
     : 
     
     scaleY
     
     (
     
     0.7
     
     )
    
    

    
    

     
           
     
     transform
     
     :
     
     scaleY
     
     (
     
     0.7
     
     )
    
    


    
    

     
     @media
     
     (
     
     -webkit-min-device-device-pixel-ratio
     
     :
     
     2
     
     ),(
     
     min-device-device-pixel-ratio
     
     :
     
     2
     
     )
    
    

    
    

     
       .
     
     border-1px
    
    

    
    

     
         &
     
     ::
     
     beforer
    
    

    
    

     
           
     
     -webkit-transform
     
     : 
     
     scaleY
     
     (
     
     0.5
     
     )
    
    

    
    

     
           
     
     transform
     
     :
     
     scaleY
     
     (
     
     0.5
     
     )
    
    

    
    

     
     

    
    

  
  

  
  

   
   
   
   

    
    
<div class="tab border-1px"></div> // .border-1px

   
   

   
   

    
    
<style lang="stylus" rel="stylesheet/stylus">

    
    
@import './common/stylus/mixin.styl'
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7,17,27,0.1))  // border-1px($color)

    
    
</style>


qq_38229202
关注
移动端1个像素边框线sass实现
weixin_42230222的博客
06-08 234
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
解决移动端1px边框最好的方法(推荐)
01-19
在移动端开发时，经常会遇到在视网膜屏幕中元素边框变粗的问题。本文将带你探讨边框变粗问题的产生原因及介绍目前市面上最好的解决方法。 1px 边框问题的由来 苹果 iPhone4 首次提出了 Retina Display（视网膜屏幕）...
移动端1像素边框解决方案
aoxi9939的博客
04-11 477
移动端css里面写了1px, 实际看起来比1px粗，因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度 在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比 //devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是 //devicePixelRatio = 物...
stylus解决移动端1像素边框的问题
weixin_30369041的博客
11-02 115
首先 我是借用了yo框架的border和他的媒体查询组合 这两个分别是在yo>lib>core>classes>_border.scss(用来获取yo框架封装的border) yo>lib>core>variables.scss(用来获取媒体查询的规则) 然后根据stylus语法修改拿到的border...
css 解决手机端1像素边框问题
霍霍的博客
10-10 385
手机端：1像素边框解决方案 /** * @include border(0 0 0 1px, solid, red, 4px); * @module 背景与边框 * @description 为元素添加边框（包括1px边框） * @method border * @version 2.0.0 * @param {String} $border-width 指定边框厚度（单位为px），默认值：1px，取值与`border-width`属性一致，不同方向代表边框位置 <2.0.0>
解决手机1像素问题
sunjunyue的博客
10-17 970
<div class="tab"> <div class="tab-item"> <router-link to="/">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评价</router-link> </div>
移动端1像素边框问题
Twinkle的博客
09-12 334
css @charset "utf-8"; .border, .border-top, .border-right, .border-bottom, .border-left, .border-topbottom, .border-rightleft, .border-topleft, .border-rightbottom, .border-topright, .bord...
解决移动端1像素边框
12-14
解决移动端存在的一像素边框问题，可以完美的展示在web端上，通用的方式调用即可
移动端1像素问题
01-23
在一些高清二倍屏的移动端设备中，如果你设置1px的边框，实际上是指1px的css样式大小，而在二倍屏移动设备中显示的是2px的物理像素，所以我们需要引入下面的border.css来解决移动端1px边框问题
解决移动端1px边框问题的几种方法(5种)
01-19
本文介绍了解决移动端1px边框问题的5种方法。当然了，在这之前先整理了与这些方法相关的知识：物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
手机1像素线粗_最常用的移动端1像素边框解决方法
weixin_30551437的博客
01-13 186
为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解。因为css中的1px并不等于移动设备的1px，这些由于不同的手机有不同的像素密度。在window对象中有一个devicePixelRatio属性，他可以反应css中的像素与设备的像素比。devicePixelRatio的官方的定义为：设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 ...
移动端1像素边框问题处理代码学习
SilenceJude的博客
08-22 379
慕课网饿了么项目骨架搭建时，关于1像素边框处理代码如下： App.vue里面： &lt;style lang='stylus' rel='stylesheet/stylus'&gt; @import './common/stylus/mixin.styl' .tab display: flex width: 100% height: 40px lin...
webpack-vue全家桶之实现border-1px
海悦童谣的博客
08-09 1116
app.vue 引入@import “./common/stylus/mixin.styl”border-1px(rgba(7, 17, 27, 0.1))mixin.styl border-1px($color) position: relative &:after display: block position: absolute left: 0 bo
移动端1像素边框处理
霍霍的博客
12-15 218
移动端1像素边框处理
移动端1像素解决方案
最新发布
m0_65545080的博客
02-08 493
remjs
移动端（手机）实现1像素下边框的方法
sinat_37328421的博客
04-24 2895
由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点 所以 border: 1px 在移动端会渲染为 2px 的边框 虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的 “一像素问题”。 关于设备像素比的知识，想必做过移动端开发的都有接触，这里就不介绍
移动端(手机)1像素边框真正实现
sunshine的博客
11-25 4507
iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决，可以看这里哦
移动端1像素边框问题的解决方案
热门推荐
孤鸿寄语
06-03 2万+
自从乔帮主提出retina屏以来。可练就了不少前端兄弟的像素眼，有强迫症的伙伴们日子可就煎熬了。为了画出真正的1像素边框，前端猿们也是受尽各浏览器的虐待了。 关于什么是移动端1像素问题，先上两张图，大家就明白了。 实现1PX边框的方法有很多，各有优缺点，比如通过背景图片实现、通过transform: scale(0.5)实现。本次实现的是通过VIEWPORT+rem实现的，优点
移动端实现一像素边框的各种方法
qq_39025670的博客
04-18 497
1.参考了下MUI的实现效果，编写了以下适合自己的解决方案代码 /* 一像素边框 */ .border-bottom, .border-top, .border-left, .border-right, .border-top-add, .border-left-add{ position: relative; } .border-bottom::after, .border-top::...
移动端Html5 1px边框精细处理方法解析
以下是几种解决移动端1px边框问题的方法： 1. 理解问题的本质： 当你在CSS中直接设置`border: 1px solid #cccccc;`时，由于屏幕像素密度差异，1px可能在不同的设备上呈现不同的视觉效果。在高分辨率设备上，1px...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值