首页 > 其他分享 >2018_10_21_01

2018_10_21_01

时间:2024-10-08 20:26:08浏览次数:10  
标签:10 01 bottom image 1px 2018 background webkit border

1px 边框问题

7 种方法解决移动端 Retina 屏幕 1px 边框问题

在 retina 屏中实现 1px border 效果

下文出自7 种方法解决移动端 Retina 屏幕 1px 边框问题

造成边框变粗的原因

其实这个原因很简单,因为 css 中的 1px 并不等于移动设备的 1px,这些由于不同的手机有不同的像素密度。在 window 对象中有一个 devicePixelRatio 属性,他可以反应 css 中的像素与设备的像素比。

devicePixelRatio 的官方的定义为:设备物理像素和设备独立像素的比例,也就是 devicePixelRatio = 物理像素 / 独立像素。

0.5px 边框

if (window.devicePixelRatio && devicePixelRatio >= 2) {
    var testElem = document.createElement("div");
    testElem.style.border = ".5px solid transparent";
    document.body.appendChild(testElem);
    if (testElem.offsetHeight == 1) {
        document.querySelector("html").classList.add("hairlines");
    }
    document.body.removeChild(testElem);
}
// 脚本应该放在内,如果在里面运行,需要包装 $(document).ready(function() {})
div {
    border: 1px solid #bbb;
}
.hairlines div {
    border-width: 0.5px;
}

使用 border-image 实现

/* 底部边框 */
.border-bottom-1px {
    border-width: 0 0 1px 0;
    -webkit-border-image: url(linenew.png) 0 0 2 0 stretch;
    border-image: url(linenew.png) 0 0 2 0 stretch;
}
/* 上下边框 */
.border-image-1px {
    border-width: 1px 0;
    -webkit-border-image: url(linenew.png) 2 0 stretch;
    border-image: url(linenew.png) 2 0 stretch;
}
/* 使用Media Query做兼容 */
.border-image-1px {
    border-bottom: 1px solid #666;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    .border-image-1px {
        border-bottom: none;
        border-width: 0 0 1px 0;
        -webkit-border-image: url(../img/linenew.png) 0 0 2 0 stretch;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

使用 background-image 实现

.background-image-1px {
    background: url(../img/line.png) repeat-x left bottom;
    -webkit-background-size: 100% 1px;
    background-size: 100% 1px;
}

多背景渐变实现

.background-gradient-1px {
    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;
}
/* 或者 */
.background-gradient-1px {
    background: -webkit-gradient(
            linear,
            left top,
            left bottom,
            color-stop(0.5, transparent),
            color-stop(0.5, #c8c7cc),
            to(#c8c7cc)
        ) left bottom repeat-x;
    background-size: 100% 1px;
}

使用 box-shadow 模拟边框

.box-shadow-1px {
    box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

viewport + rem 实现

同时通过设置对应 viewport 的 rem 基准值,这种方式就可以像以前一样轻松愉快的写 1px 了。在 devicePixelRatio = 2 时,输出 viewport:

在devicePixelRatio = 3 时,输出viewport:
```html

这种兼容方案相对比较完美,适合新的项目,老的项目修改成本过大。对于这种方案,可以看看《使用 Flexible 实现手淘 H5 页面的终端适配》

伪类 + transform 实现

单条 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;
}

四条 boder 样式设置:

.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;
}
if (window.devicePixelRatio && devicePixelRatio >= 2) {
    document.querySelector("ul").className = "scale-1px";
}

标签:10,01,bottom,image,1px,2018,background,webkit,border
From: https://www.cnblogs.com/honghaitao/p/18452417

相关文章

  • 2018_11_02_02
    原理数据类型window.onload=()=>{vartest1='abcdef';vartest2=123;vartest3=true;vartest4={};vartest5=[];vartest6;vartest7={abcdef:123};vartest8=['abcdef',123];functiontest9(){r......
  • 2018_11_02_03
    匿名函数和闭包在计算机科学中,闭包是函数的非局部变量(自由变量)的引用环境。包含自由变量的函数与为所有这些自由变量提供了变量绑定的环境一起,被称为闭包。以下内容为学习笔记,来自李炎恢老师的课堂纪要。1.匿名函数普通函数functionbox(){//函数名是boxreturn'Lee......
  • 2018_11_02_01
    战舰游戏展示基于vue开发,具体代码请看vue写法<js-2018_11_02_01-index/>原生js代码<divclass="continuar"><tablecellpadding="0"cellspacing="0"id='tab'>tr*7>td*7</table><divclass="e......
  • 2018_10_29_02
    代码收集区分桌面环境与移动平台参考文章:https://segmentfault.com/a/1190000016760627<<<docs/.vuepress/components/js/2018_10_29_01/2018_10_29_01.jselement元素Y轴的scroll事件触发移动平台<<<docs/.vuepress/components/js/2018_10_29_02/html_scroll_mo......
  • 2018_10_28_01
    vscode配置vscode插件AtomOneDarkThemeAutoRenameTagvscode-language-babelChinese(Simplified)LanguagePackforVisualStudioCodeCodeSpellCheckerDockerESLintHopscotch(Official)IntelliJIDEAKeybindingsminapp-vscodePathIntellisensePHPDebu......
  • 2018_10_31_01
    gitcommit提交规范Commitmessage和Changelog编写指南规范你的commitmessage并且根据commit自动生成CHANGELOG.mdCommitmessage的格式主要摘选了基本格式与如何使用<type>(<scope>):<subject>//空一行<body>//空一行<footer>其中,Header是必需的,Bod......
  • 2018_10_22_02
    git~F.A.Q在git的一般使用中,如果发现错误的将不想提交的文件add进入index之后,想回退取消,则可以使用命令:gitresetHEAD<file>...,同时gitadd完毕之后,git也会做相应的提示,比如:引用#Changestobecommitted:#(use"gitresetHEAD<file>..."tounstage)##newfile:Test......
  • 10.8 模拟赛(2023 CSP-S 十连测 #5)
    炼石计划10月28日CSP-S十连测#5【补题】-比赛-梦熊联盟(mna.wang)复盘T1秒了。30min。T2题目越短越难。但是链的是经典题目,写了。小样例太水,大样例太大,不方便猜结论。于是先写暴力然后自己造样例。模拟了五六组感觉可以按照lca的深度降序排序,然后能选就选。这......
  • 10月8日初看《程序员修炼之道:从小工到专家》结构
    自从学习了代码编程,现在养成了一个做事先分析结构的习惯,看到这本书,从目录看起,每个章节翻阅一下具体来说,书中内容可以大致分为以下几个部分:1注重实效的哲学:探讨了程序员应有的工作态度和思维方式,如如何面对软件的复杂性、如何保持代码的整洁和可维护性等。2注重实效的途径:介绍了......
  • XYD1005CSPS
    T1传送门[最短路,二分答案]Description无向连通图,求出一个最小的\(x\),使得每两点之间存在一条路径可以划分成不超过\(k\)段路径,且每段路径长度不超过\(x\),只能从节点处切割,不能从边中间划分。\(n\le100\),无重边自环。Solution\(n\)非常小,又要考虑每两个点,自然想到全......