精华内容
下载资源
问答
  • 设置下面的样式就可以了 .el-menu{ border-right-width: 0; }  

     

    设置下面的样式就可以了
    .el-menu{
        border-right-width: 0;
    }

     

    展开全文
  • 移动端1px像素问题及解决办法

    万次阅读 多人点赞 2018-06-04 14:31:35
    在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。一、...

            在移动端web开发中,UI设计稿中设置边框为1像素,前端在开发过程中如果出现border:1px,测试会发现在某些机型上,1px会比较粗,即是较经典的移动端1px像素问题。首选先看一下,pc时代和移动端时代对1px的对比。

    一、像素的理解

            像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时,屏幕能显示的画面的过渡更细致,网站看起来更明快。

    1、device pixels

    设备像素:显示屏幕的最小物理单位,每个dp包含自己的颜色、高宽等,不可再细分。设备像素是在设备出厂是设定的,设备一旦造出来就不会变大小和数量。官方在产品说明书上写的1920x1080就是说的物理像素。

    2、dpi

    设备独立像素:dpi(Dots Per Inch,每英寸点数)是一个量度单位,指每一英寸长度中,取样、可显示或输出点的数目。每英寸的像素,类似于密度,即每英寸的像素点数量。

    3、css pixels

    就是CSS和JS所理解的像素单位,它跟设备屏幕的像素没必然关系,比如windows的桌面显示器,当你修改显示器的硬件分辨率,比如把1920的分辨率改成1024分辨率,你会发现网页里的图形和字体变得很大很大的,同样的显示器,原本能显示全部网页,现在只能显示一半宽度,也就是说CSS像素变大了。所以,CSS像素是可以被硬件和软件任意调节的单位。css像素是独立于设备逻辑的,用于逻辑上衡量像素的单位。CSS声明和几乎所有的javascript属性都使用CSS像素。

    //我们通过CSS和javascript代码设置的像素都是逻辑像素
    width:250px;
    font-size:22px;
    

    4、dpr

    设备像素比dpr = 设备像素 / CSS像素(某一方向上)

    可以通过window.devicePixelRatio获取设备的dpr值。一般来说,在桌面的浏览器中,设备像素比(dpr)等于1,一个css像素就是代表的一个物理像素。而在移动端,大多数机型都不是为1,其中iphone的dpr普遍是2和3,那么一个css像素不再是对应一个物理像素,而是2个和3个物理像素。即我们通常在css中设置的width:1px,对应的便是物理像素中的2px。手机机型不同,dpr可能不同。

    以iphone5为例,iphone5的CSS像素为320px*568px,DPR是2,所以其设备像素为640px*1136px

    640(px) / 320(px)  = 2
    1136(px) / 568(px) = 2
    640(px)*1136(px) /  320(px)*568(px) = 4
    

    5、视口viewport

    浏览器上(或者app中的webview)用来显示网页的那部分区域。业内总结出三个子概念。

    布局视口 layout viewport:

    手机一般为了容纳为桌面浏览器设计的网站,默认布局viewport宽度远大于屏幕的宽度,为了让用户看到网站全貌,缩小网站。例如,apple一般将viewport宽度定为980px。主要意义是手机厂商不至于让自家手机变得可笑,在打开大于980宽度的页面的时候可以横向拖动,而不至于挤成一团。可以通过document.documentElement.clientWidth来获取。

    视觉视口 visual viewport:

    屏幕的可视区域,即物理像素尺寸,可以通过window.innerWidth来获取。对于iPhone 6 Plus来说,在加了著名代码前提下,值是414px,不加的话,值是980px,著名代码如果改一改width=device-width, initial-scale=1.5,这时值是276px。所以它是一个可变的值。

    理想视口 ideal viewport:

    最适合移动设备的viewport,ideal viewport的宽度等于移动设备的屏幕宽度

    为了让viewport能够等于ideal viewport,一般我们会添加meta标签。width=device-width,initial-scale=1.0的时候,视觉视口的大小。对于iPhone 6 Plus来说,是固定值414px。所以,理想视口就等于设备宽度。

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <!--width=device-width:宽度为设备宽度-->
    <!--initial-scale:缩放比为1-->
    <!--user-scalable=no:是否允许用户自定义缩放-->

    二、移动端1px解决方案

    1、小数值px

    解决思路:

    <body>
    	<div id="main" style="border: 1px solid #000000;"></div>
    </body>
    <script type="text/javascript">
    if (window.devicePixelRatio && devicePixelRatio >= 2) {
    	var main = document.getElementById('main');
    	main.style.border = '.5px solid #000000';
    }
    </script>

    优点:

            简单,好理解

    缺点:

            兼容性差,目前之余IOS8+才支持,在IOS7及其以下、安卓系统都是显示0px。

    2、border-image

    使用的背景图片


    代码:

    .border-image-1px {
        border-width: 1px 0px;
        -webkit-border-image: url(border.png) 2 0 stretch;
        border-image: url(border.png) 2 0 stretch;
    }
    

    优点:

            图片可以用gif, png, base64多种格式, 以上是上下左右四条边框的写法, 需要单一边框只要定义单一边框的border, 代码比较直观.

    缺点:

            大小、颜色更改不灵活

            放到PS里面看边框,是有点模糊的(因为带有颜色部分是1px,在retina屏幕上拉伸到2px肯定会有点模糊)

    3、background-img渐变

    设置1px的渐变背景,50%有颜色,50%透明

    .border {
        background:
        linear-gradient(180deg, black, black 50%, transparent 50%) top    left  / 100% 1px no-repeat,
        linear-gradient(90deg,  black, black 50%, transparent 50%) top    right / 1px 100% no-repeat,
        linear-gradient(0,      black, black 50%, transparent 50%) bottom right / 100% 1px no-repeat,
        linear-gradient(-90deg, black, black 50%, transparent 50%) bottom left  / 1px 100% no-repeat;
    }
    

    4、CSS3 box-shadow

    .shadow {
            -webkit-box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
    	box-shadow:0 1px 1px -1px rgba(255, 0, 0, 0.5);
    }
    

    模拟效果:没觉得这个方法好用,模拟的效果差强人意,颜色也不好配置,不推荐

    5、viewport和rem结合

    viewport结合rem解决像素比问题

    比如在devicePixelRatio=2设置meta

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

    devicePixelRatio=3设置meta

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

    手淘采用这这种方案使用Flexible实现手淘H5页面的终端适配

    6、:before:after和transform

    原理是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

    单条border样式设置:

    .scale-1px{
         position: relative;
         border:none;
     } 
    .scale-1px:after{
         content: '';
         position: absolute; 
         bottom: 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; 
    }

    四条border样式设置:

    .scale-1px{ 
        position: relative; 
        margin-bottom: 20px; border:none;
    } 
    .scale-1px:after{ 
        content: ''; 
        position: absolute;
        top: 0; 
        left: 0;
        border: 1px solid #000; 
        -webkit-box-sizing: border-box; 
        box-sizing: border-box; 
        width: 200%; 
        height: 200%; 
        -webkit-transform: scale(0.5); 
        transform: scale(0.5); 
        -webkit-transform-origin: left top; 
        transform-origin: left top; 
    }
    
    结合js来代码来判断是否是Retina屏
    if(window.devicePixelRatio && devicePixelRatio >= 2){
    	 document.querySelector('div').className = 'scale-1px';
    }
    

    优点:

            所有场景都能满足

            支持圆角

    缺点:

            对于已经使用伪类的元素,可能需要多层嵌套

    总结

    1、0.5px,相信浏览器肯定是会慢慢支持的;目前而言,如果能用的话,可以hack一下;

    2、阴影,border-img的方案不建议使用

    3、背景图片和缩放可以在项目中配合使用,如单个线条使用缩放,四条框用背景图片模拟,额,如果要圆角的话,无能无力了

    4、建议采用transform和伪类

    参考文献

    像素概念

    https://www.jianshu.com/p/73c3889ffec6

    http://efe.baidu.com/blog/1px-on-retina/

    http://www.fly63.com/article/detial/145

    https://github.com/maxzhang/maxzhang.github.com/issues/4

    http://www.cnblogs.com/2050/p/3877280.html

    https://link.jianshu.com/?t=https://github.com/amfe/article/issues/17






    展开全文
  • 移动端适配1px问题终极方案

    千次阅读 2018-11-13 09:28:22
    解决移动端1px在一些屏幕会变粗的原因 一、起因 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’ 的含义是不一样的. 移动端 html 的 header 总会有一句 &lt;meta name="...

    解决移动端1px在一些屏幕会变粗的原因

    一、起因

    为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’ 的含义是不一样的. 移动端 html 的 header 总会有一句
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    这句话定义了本页面的 viewport 的宽度为设备宽度,初始缩放值和最大缩放值都为1,并禁止了用户缩放. viewport 通俗的讲是浏览器上可用来显示页面的区域, 这个区域是可能比屏幕大的。

    首先,我们了解devicePixelRatio这个东西

    在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比。然而1px在不同的移动设备上都等于这个移动设备的1px,这是因为不同的移动设备有不同的像素密度。有关这个属性,它的官方的定义为:设备物理像素和设备独立像素的比例,也就是

    devicePixelRatio = 物理像素 / 独立像素 1px变粗的原因:
    viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性,
    它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3,
    css里写的1px长度映射到物理像素上就有2px或3px那么长

    二、终极解决方案

    1.用小数来写px值 (不推荐)

    IOS8下已经支持带小数的px值, media query 对应 devicePixelRatio 有个查询值 -webkit-min-device-pixel-ratio, css可以写成这样
    通过-webkit-min-device-pixel-ratio设置。

    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }
    

    如果使用less/sass的话只是加了1句mixin
    缺点: 安卓与低版本IOS不适用, 这个或许是未来的标准写法, 现在不做指望

    2、flexible.js

    这是淘宝移动端采取的方案, github的地址:https://github.com/amfe/lib-flexible. 前面已经说过1px变粗的原因就在于一刀切的设置 viewport 宽度, 如果能把 viewport 宽度设置为实际的设备物理宽度, css 里的 1px 不就等于实际 1px 长了么. flexible.js 就是这样干的.
    <meta name=”viewport”>里面的 scale 值指的是对 ideal viewport 的缩放, flexible.js 检测到 IOS 机型, 会算出 scale = 1/devicePixelRatio, 然后设置viewport

    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    

    devicePixelRatio=2时输出meta如下, 这样viewport与ideal viewport的比是0.5, 也就与设备物理像素一致

    <meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">
    
    3、伪类+transform实现

    对于解决1px边框问题,我个人觉得最完美的解决办法还是伪类+transform比较好。
    原理:是把原先元素的 border 去掉,然后利用 :before 或者 :after 重做 border ,并 transform 的 scale 缩小一半,原先的元素相对定位,新做的 border 绝对定位。

    <!DOCTYPE html> 
    <html> 
     <head> 
     <meta charset="UTF-8"> 
     <title>test</title> 
     </head> 
     <body> 
    <div class="box-shadow-1px scale">box-shadow-1px</div>
    <style>
    .box-shadow-1px {
        height: 200px;
        width: 200px;
        text-align: center;
    }
    .scale{
      position: relative;
      margin-bottom: 20px;
      border:none;
    }
    .scale:after{
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      border: 1px solid #000;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      width: 200%;
      height: 200%;
      -webkit-transform: scale(0.5);
      transform: scale(0.5);
      -webkit-transform-origin: left top;
      transform-origin: left top;
    }
    </style>
     <script> 
    console.log(typeof ('a'+1))
     </script> 
     </body> 
    </html>
    

    参考引用:
    《移动前端开发之viewport的深入理解》

    展开全文
  • 解决CSS移动端1px边框问题

    千次阅读 2016-08-24 09:53:46
    web移动端解决1px边框问题

    移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下:


    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>解决1px边框问题</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
        <style>
            .line {position:relative;}
            .line:after {width:200%;height:200%;position:absolute;top:0;left:0;z-index:0;content:"";-webkit-transform:scale(0.5);-webkit-transform-origin:0 0;transform:scale(0.5);transform-origin:0 0;}
    
            .list {width:100%;margin:auto;list-style:none;padding:0;}
            .list:after {border:1px solid #ccc;border-radius:10px;}
            .item {padding:10px;}
            .item:after {border-bottom:1px solid #ccc;}
            .item:last-child:after {display:none;}
        </style>
    </head>
    <body>
    
    
    <ul class="list line">
        <li class="item line">item001</li>
        <li class="item line">item002</li>
        <li class="item line">item003</li>
        <li class="item line">item004</li>
        <li class="item line">item005</li>
        <li class="item line">item006</li>
        <li class="item line">item007</li>
        <li class="item line">item008</li>
        <li class="item line">item009</li>
        <li class="item line">item010</li>
    </ul>
    
    
    </body>
    </html>


    展开全文
  • 1px像素问题(一):真正原因

    千次阅读 2019-04-01 17:58:58
    关于,前端1px像素的问题,网上已经有很多相关的文章了, 但是,关于这个问题的原因网上没有几个说的是正确的,甚至还大谈dpr。。。 其实,原因很简单: 因为UI给设计图的时候基本上都是给的二倍图甚至三倍图,以...
  • 移动端1px误差的原因以及解决方案

    千次阅读 2018-05-06 19:32:38
    移动端1px问题在面试和工作中会经常遇到,系统地理解它是一个优秀前端的必修课! 为什么移动端css里面写了1px, 实际看起来比1px粗. 其实原因很好理解:这2个’px’的含义是不一样的. 移动端html的header总会有一句 ...
  • 因为1px在手机端是识别不了的,所以可以通过缩放scaleY(0.5)实现把1px的高度缩放到0.5px,可以用于表单元素的下滑线 .parent { position: relative; } .parent::after { /* 绝对定位到父元素最低端,可以通过left...
  • 解决移动端1px边框问题的几种方法

    千次阅读 2019-08-05 11:35:02
    本文介绍了解决移动端1px边框问题的5种方法。当然了,在这之前先整理了与这些方法相关的知识:物理像素、设备独立像素、设备像素比和viewport。 物理像素、设备独立像素和设备像素比 在CSS中我们一般使用px作为单位...
  • CSS中1px分割线处理

    千次阅读 2018-08-13 15:52:52
    1. 1px 边框变粗问题 截图如下(iPhone 6截图): 如果我们把上图与我们手机系统上的 1px 边框进行对比,如下图: 我们会发现,上面两个上下线条,下线条的粗细才是正确的,上线条就显得有点粗了。但是上线条...
  • 两倍屏和三倍屏中的1px处理方法

    千次阅读 2017-07-25 20:24:18
    例如在iPhone6中就是两倍屏在iPhone6 plus中就是三倍屏,在手机页面中1px的线条会呈现2px和3px的效果,这样给用户的体验是非常不好的,所以需要解决这个问题,当然在移动端中border的1px问题还没有好的方法,所以要...
  • 1px=2rpx

    千次阅读 2021-01-11 10:03:35
    1px=2rpx
  • 设置了固定大小的切片工具切图,发现总是少1px,找不出原因 嘿嘿 最后发现居然是 超出 图片 边界了1px
  • 设置border线条小于1px

    千次阅读 2018-08-13 18:03:39
    正常来说,border的最小宽度为1px,这种情况对于移动端来说是一个很大的问题,因为1px在手机显示确实显得有点粗;对于iOS系统它支持浮点数,可以使用rpx作为单位,可设置为1rpx,相当于0.5px,而安卓就不行了,下面说一下安卓...
  • 移动端1px边框实现

    千次阅读 2017-04-18 15:40:25
    Retina屏幕,设备像素比,移动端的边框在这些屏幕上1px 会表现处2px,3px像素的宽度,所以出现各种解决方案,今天只总结一种,以后慢慢补充。。通过伪类 ::after。,原理就是通过transfrom:scaleX scale scaleY这几...
  • html5 canvas 画 1px 的line 的问题

    千次阅读 2014-03-24 13:20:49
    在html5 中 通过 lineto 的方法画1px的细线。除去网上所说的 一个 坐标加0.5的问题以外。 还要注意 canvas 需要通过  width="500" height="500"> 的方式来制定大小。 如果用 css的方法  #myCanvas{ width: 500...
  • HTML5移动端1px边框解决办法

    千次阅读 2020-05-12 14:49:46
    然而,当看代码时,它已经是1px了,为什么它还是那么厚呢? 要理解问题的原因,我们必须首先理解几个概念: (1)物理像素 物理像素是显示器(手机屏幕)上最小的物理显示单元(像素粒子)。在操作系统的调度下,每个...
  • 实现真正的1px的边框 border

    千次阅读 2017-12-10 23:28:22
    实现真正的1px的边框 border问题 解决的问题是1像素的边框在某些移动设备中会显示过粗,主要原因是设备进行了放大,成为了2px; 解决利用媒体查询和min-device-pixel-ratio 实现
  • 1px等于多长?

    千次阅读 2020-06-16 10:08:39
    最近以来一直做前端比较多,但是真问起来,1px 等于多长 ?我还真是有点懵逼。 1px 等于一个css 像素长度。 一个css像素长度 是怎么计算的呢? 我们知道 屏幕上的图像是像素点组成的,那么1px是不是就是等于一个像素...
  • 1rem等于多少px (rem和px怎样转换)

    万次阅读 2020-06-17 14:22:23
    1rem等于html根元素设定的font-size的px值 如果css里面没有设定html的font-size,则默认浏览器以1rem=16px来换算。 假如我们在css里面设定下面的css html{font-size:14px} 那么后面的CSS里面的rem值则是以这个...
  • PX4编译问题总结

    千次阅读 2018-07-10 10:18:49
    PX4在变编译的时候总会碰到很多问题。有些问题根据提示就可以解决,有些问题却有点麻烦。1 找不到python jinja2模块CMake Error at /usr/share/cmake-3.2/Modules/FindPackageHandleStandardArgs.cmake:138 (message...
  • 1dp 等于多少PX

    万次阅读 2017-04-06 14:51:33
    在320x480分辨率,像素密度为160,1dp=1px 在480x800分辨率,像素密度为240,1dp=1.5px 计算公式:1dp*像素密度/160 = 实际像素数 px(像素):屏幕上的点. dp(与密度无关的像素):一种基于屏幕密度的抽象单位.在每...
  • 解决 Vue 渲染echarts图表宽度只显示100px问题 刚刚接触vue不久,在开发过程中遇到不少坑,走了很多弯路,其中一个就是在echarts图表加载渲染时,图表的宽度只能显示100px问题,这篇文章记录解决方案,对于像我一样的初学...
  • 1px:阴影水平偏移值(可取正负值); 2px:阴影垂直偏移值(可取正负值); 3px:阴影模糊值; rgba(0,0,0,0.2)中: 第一个0:R 第二个0:B 第三个0:G 第四个0.2表示透明度为20%。 ...
  • Retina真实还原1px边框的解决方案

    千次阅读 2018-03-16 12:12:46
    业务中碰到了一个厉害的 UI 妹纸, 因为边框的 1px border 会被渲染成 2px(物理像素), 因此看起来会比较粗,问题抓了我很久, , UI 妹纸就说不行! 一定要改!你可以那下面的图干她。说,你看到没有,改毛线啊@!!!射...
  • 飞控型号:cube orange【PX4官方用户指南中关于cube orange的描述】 飞控载板型号:Mini Carrier Board【迷你载板说明文档】 固件安装参考:The Cube User Manual V1.0
  • http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> *{ margin:0px; padding:0px; } #top-right { /*margin-right:-3px;*/ width:60px; height:30px; border:20px ...
  • html 边框变粗 margin -1px

    千次阅读 2016-11-07 08:59:47
    最近刚开始学习web前端,html和css,对于遇到的边框变粗的问题,用margin为负值解决问题发表一些自己的理解 首先我们来看看下面一张图片 ... border:1px solid black;  width: 200px;  line-height:
  • 设计稿750px移动端自适应,100px=1rem

    千次阅读 2018-11-09 16:21:09
    var kk=document.documentElement.clientWidth; if(kk&gt;750){ kk=750 } document.documentElement.style.fontSize=kk/7.5+"px"
  • **前言:**每个开发者在使用echarts制作图形过程中,多多少少都会踩到一些坑,比如图形宽高问题,图形清晰度问题。 今天要说的是当图形宽度设置是100%时,切换tab后变成了100px了,如果已经设置了自适应,那么手动去...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,266,196
精华内容 506,478
关键字:

1px问题