手机端1像素边框

css代码:

    .folder li{
        border-bottom: 1px solid #DDDDDD;
        padding: 8px 0 8px 15px;
        color: #7C7C7C;
        cursor: pointer;
        position: relative; /*相对定位*/
    }

    /*使用伪类*/
    .folder  li:before{
        position: absolute; /*绝对定位*/
        top: -1px;
        left: 0;
        content: ‘‘;
        width: 100%;
        height: 1px; /*1px*/
        border-top: 1px solid #DDDDDD;
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5);  /*y轴方向缩小为0.5倍*/
    } 

html代码

    <div id="" class="folder">
        <ul>
            <li>同样是retina屏幕下的问题,根本原因:1px使用2dp渲染</li>
        </ul>
    </div>

效果:

时间: 2024-10-14 06:29:06

手机端1像素边框的相关文章

手机端一像素问题

由于手机dpr(设备像素比)的问题,webapp中经常会出现1像素边框的问题,解决办法如下 //以下代码是使用sylus实现 border-1px($color){ position:relative; &:after{ display:block; position:absolute; left:0; bottom:0; border-top:1px solid $color; content:' '; width:100%; } } //解决办法 @media (-webkit-min-de

关于手机端显示页面一个像素的边框变粗的问题

正常的页面设置了<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1"> 之后 手机端的border细线 及时设置了1px的宽度也会虚化变宽. 如何解决这个问题,最简单的方式是定义border-width: 1px;border-image: url(bg.jpg) 2 repeat;     其中bg.jpg可

移除手机端a标签点击自动出现的边框和背景

手机端a标签会自动补充出现边框或者背景,使得用户知道a标签的点击状态,但样式很不好看 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</title> <meta name

(淘宝无限适配)手机端rem布局详解

一.        首先我们先来看看淘宝不同分辨率下的适配页面 可以看出来,淘宝在不同的分辨率下,页面的尺寸和模块间的间距会发生变化,这是因为淘宝采用了rem,这篇文章会简单介绍淘宝的布局思路以及具体做法,不过在此之前我们先了解一些移动端的知识,以为更好的理解淘宝布局的方案,下面我们来看一些移动端的知识 二.了解一些移动端的知识viewport的<meta>标签用法 其主要用来告诉浏览器如何规范的渲染Web页面,而你则需要告诉它视窗有多大 移动端开发中,通常我们都会采用<meta nam

手机端的viewport属性

Window.devicePixelRatioThis read-only property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. 该值为分辨率之间的比,不是直接比较像素.分辨率是指单位英寸内像素数,类似于PPI.pc端浏览器中dpr的值都为1,所以css中1px的元素在屏幕中占据1物理像素.但在手

用jQuery.touchSwipe插件实现手机端场景滑动切换效果

使用jQuery的touchSwipe插件监听触摸滑动事件,结合css3实现手机端场景滑动切换效果.最好在手机端测试代码,也可以在PC端用鼠标点击模拟滑动. 1.html代码: <div class="container"> <div class="page page0 page_current"> <h1>你好,我是0号屏幕,第一屏,鼠标单击向下/向上拖动</h1> </div> <div clas

rem手机端页面自适应完美解决方案(最新)

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> ! function(e) { function t(a) { if(i[a]) return i[a].exports; var n = i[a] = { exports: {},

移动手机端网页布局 常用的3种方式 总结

手机端网页现在已经发展的非常迅猛,很多公司度需要网页能兼容各种不同尺寸屏幕的手机. 下面我给大家讲讲我常用的3放布局方式: 1:响应式布局. 可以用px作为像素,网页进行平铺.全屏的用100%.高度可以用px写死,宽度可以用百分比.不管网页怎么拉伸,高度不变,宽度会相应的扩大. 2:em/rem  方式布局. 可以设置好html,body的字体大小,然后用不同的尺寸手机访问的时候,我们可以去修改body的字体大小,网页(网页的内容用rem设置宽度.高度)的之内容会自动进行缩放. 代码如: bod

手机端页面rem自适应脚本

什么是rem 参照 web app变革之rem 在我看来,rem就是1rem单位就等于html节点fontsize的像素值.所以改变html节点的fontsize是最为关键的一步.根据手机宽度改变相对大小就可以实现自适应了,就不用什么媒体查询那些的. 我们的设计图往往宽度是640或者其他尺寸的,不过我建议是用这个尺寸,以640为基准,以小到大,实现自适应,下面实现的比例为1rem=40px(640宽度). 为什么这样搞? 这样一套代码就搞定手机端尺寸自适应,不需要媒体查询,而且利用Sass和Le