避免移动端下边框部分2px

        .border-1px {
            position: relative;
        }

        .border-1px:after {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-top: 1px solid rgba(7, 17, 27, .1);
            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-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            .border-1px ::after {
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        }
时间: 2024-11-03 03:45:45

避免移动端下边框部分2px的相关文章

移动端 1px边框 问题

https://segmentfault.com/a/1190000015736900 https://blog.csdn.net/yexudengzhidao/article/details/98480173 本文介绍了解决移动端1px边框问题的5种方法.当然了,在这之前先整理了与这些方法相关的知识:物理像素.设备独立像素.设备像素比和viewport. 物理像素.设备独立像素和设备像素比 在CSS中我们一般使用px作为单位,需要注意的是,CSS样式里面的px和物理像素并不是相等的.CSS中的

解决移动端1px边框问题的几种方法

1.边框粗细原因 在移动端下设置border为1px,在某些设备上看比1px粗. 这些由于不同的手机有不同的像素密度.在window对象中有一个devicePixelRatio属性,他可以反应css中的像素与设备的像素比. devicePixelRatio的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素. 2.解决办法 a.使用border-image实现 根据需求选择图片,然后根据css的border-image属性设置.代

使用position:relative制作下边框下的小三角

在制作tab选项卡的时候,有时会有下边框,且下边框下另一个头向下的小三角,这全然能够用css来实现,而不必使用背景图片. 由于使用背景图片时会有一个问题,选项卡内容字数不同.导致使用背景图片时无法控制它始终在中间显示. <ul class="technical_list"> <li class="active-tab">入门指南<div class="triangle"></div></li&

设置View只显示透明下边框、透明背景框、阴影背景框的方法

实现的效果如下: 下面的代码是实现一个带边框的xml,很常见 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/transparent" /> <str

layer-list实现只有左、右和下边框的圆角矩形

项目中需要实现如下效果的布局 也就是一个左右下角带圆角,上方不带圆角的白色背景矩形,而且只有左.右和下边框,颜色为浅灰色. 当然,切一个.9图片作为背景也能实现,但是能用代码实现的还是尽量用代码实现,因为图片过多一个消耗内存,另一个还增加apk大小. 这种效果可以通过layer-lsit来实现,在drawable文件夹下面建一个xml文件,具体代码如下: 1 <?xml version="1.0" encoding="utf-8"?> 2 <lay

仅显示INPUT下边框

最近在倒腾前端的页面,在某次的需求中我想要这样的一个效果——仅显示INPUT输入框的下边框,和我想象的编写方式不一致,每个标签都有其对应的默认样式,不同的浏览器也有其不同的渲染方式,当然这些知识现在我还没有完全掌握,所以,下面简单记录一下我采用的一种简单实现方式以备后用. 1:渐进式实现的代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>仅显示INPU

android 实现一个布局或者view 有上边框 下边框或者 做边框 有边框 或者单一边框的实现

代码中都有详细的解释,这里就不多说了,在使用的时候直接设置为background就行了 <?xml version="1.0" encoding="utf-8"?> <!-- 目的:给一个布局上下有边框,左右没有边框 --> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <!-- 先定义一个填充内容区域的颜

移动端下弹框禁止背景滑动

移动端下弹框禁止背景滑动 茴字写法有很多种,找到最适合的才是好的. 以下下方法在一屛之内是可行的 body;html 设置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 弹出时 $('html, body,.page').addClass('overflow-hidden'); // 隐藏时 $('html, body,.page').removeClass('overflow-hidden'); 问题

JS实现移动端下拉刷新更多分页请求功能方法2.0

本次2.0升级版为js实现移动端加载更多下拉刷新更多分页请求功能方法(数据一次请求,前端分页,适用于数据流量较少,数据量压力小的页面)同时新增loading组件,turnToTop组件. 本文原创非转载,如需转载请注明出处:http://www.cnblogs.com/A-QBlog/p/7068959.html 废话不多说,直接上代码: 1 ;(function (w, $) { 2 3 var loadmore = { 4 /*单页加载更多 通用方法 5 * 6 * @param callb