移动web 1像素边框 瞧瞧大公司是怎么做的

前言

移动端web项目越来越多,要求也越来越高,好多设计师都发现了,你们前端实现的边线为什么是糊的,根本不是1像素,好吧,我只能找参考,要么征服设计,要么征服自己。

关于为什么设置的是1px,而显示出来却不是呢,这里我就不多做介绍了;
放出几个链接, 设备像素比devicePixelRatio简单介绍,还有 移动端高清、多屏适配方案 以及 iPhone 6 屏幕揭秘,相信大家看完这几个自己也就能想出解决的办法了。


哪些项目实现了

一般遇到问题,都是找一下成熟项目他们公司的代码看看,自己也翻看了好多关于移动端的知识点,特别推荐博客白色橡树腾讯移动知识库,有很多移动相关的知识,那我们先来找几个参考看看吧。

京东 首页边线几乎都为1像素边框

携程

大众点评

糯米团

翻看几个项目中发现,并不是所有的边线都是1像素,但是这些足够我们来参考了,如果电脑上的截图区分不出来,我们可以在自己的手机上查看对比一下,应该跟自己浏览器里导航栏或者工具条的1像素是一样的,而会出现模糊不清晰的状况。

实现方法

border-image 图片 实现

这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 《使用border-image实现类似iOS7的1px底边》,缺点是,你需要制作图片,圆角的时候会出现模糊。

.border-image-1px {
    border-width: 1px 0px;
    -webkit-border-image: url("data:image/png;base64,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") 2 0 stretch;
}

background-image 渐变实现

除啦用图片,难道纯粹的css就不能实现吗?我的确不想使用图片,感觉制作起来很麻烦,其实百度糯米团首页就是这么做的但是这种方法有个缺点,就是不能实现圆角

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

viewport+rem实现

这篇文章的解决方案是使用viewport+rem+js来实现的 链接走起 《移动端1像素边框问题的解决方案》,里边还引入了张鑫旭大神的文章 《设备像素比devicePixelRatio简单介绍》,优点是可以直接设置1px就行了,剩下的就交给js了,而且圆角什么的都没问题。

<span style="font-size:18px;"><html>  

    <head>
        <title>1px question</title>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" id="WebViewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <style>
            html {
                font-size: 1px;
            }
            * {
                padding: 0;
                margin: 0;
            }  

            .bds_b {
                border-bottom: 1px solid #ccc;
            }  

            .a,
            .b {
                margin-top: 1rem;
                padding: 1rem;
                font-size: 1.4rem;
            }  

            .a {
                width: 30rem;
            }  

            .b {
                background: #f5f5f5;
                width: 20rem;
            }
        </style>
        <script>  

            var viewport = document.querySelector("meta[name=viewport]");
            //下面是根据设备像素设置viewport
            if (window.devicePixelRatio == 1) {
                viewport.setAttribute(‘content‘, ‘width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no‘);
            }
            if (window.devicePixelRatio == 2) {
                viewport.setAttribute(‘content‘, ‘width=device-width,initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no‘);
            }
            if (window.devicePixelRatio == 3) {
                viewport.setAttribute(‘content‘, ‘width=device-width,initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no‘);
            }
            var docEl = document.documentElement;
            var fontsize = 10 * (docEl.clientWidth / 320) + ‘px‘;
            docEl.style.fontSize = fontsize;  

        </script>
    </head>  

    <body>
        <div class="bds_b a">下面的底边宽度是虚拟1像素的</div>
        <div class="b">上面的边框宽度是虚拟1像素的</div>
    </body>  

</html></span>  

box-shadow 实现

利用阴影我们也可以实现,那么我们来看看阴影,优点是圆角不是问题,缺点是颜色不好控制。

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

transform: scale(0.5) 实现 推荐相当灵活

其实我们刚才列举了那么多例子,无非就是把1px缩放都0.5px的状态下,而0.5px并不是所有都支持,再根据媒体查询设置不同的缩放比例就可以了,那么我们就开始玩儿缩放吧。

1.用height:1px的div,然后根据媒体查询设置transform: scaleY(0.5);

div{
    height:1px;
    background:#000;
    -webkit-transform: scaleY(0.5);
    -webkit-transform-origin:0 0;
    overflow: hidden;
}

2.用::after::befor,设置border-bottom:1px solid #000,然后在缩放-webkit-transform: scaleY(0.5);可以实现两根边线的需求

div::after{
    content:‘‘;width:100%;
    border-bottom:1px solid #000;
    transform: scaleY(0.5);}

3.用::after设置border:1px solid #000; width:200%; height:200%,然后再缩放scaleY(0.5); 优点可以实现圆角京东就是这么实现的,缺点是按钮添加active比较麻烦。

.div::after {
    content: ‘‘;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    -webkit-transform: scale(0.5,0.5);
    transform: scale(0.5,0.5);
    -webkit-transform-origin: top left;
}

原文地址:https://www.cnblogs.com/homehtml/p/12582221.html

时间: 2024-10-29 19:06:39

移动web 1像素边框 瞧瞧大公司是怎么做的的相关文章

移动web 1像素边框

实现方法 border-image 图片 实现 这篇文章是腾讯github上的解决方案border-image来实现的 链接走起 <使用border-image实现类似iOS7的1px底边>,缺点是,你需要制作图片,圆角的时候会出现模糊. .border-image-1px { border-width: 1px 0px; -webkit-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAE

大公司的专才与小公司的全才

最近的感慨而已. 大公司喜欢要专门型的人才,小公司喜欢要能干很多种活的人才. 大公司的人只要干好一个方面,公司就会在各个方面很好. 小公司的人需要会干各方面的事情,才能在可接受的成本范围内存活,付软工三角形,时间,成本,质量,最多只能取其二. 那么,到底去大公司好还是小公司好呢.. 我觉得吧,去小公司就是去了解整个游戏(项目|公司)运转框架的. 去大公司,能做基础技术岗位最好了,就是那种小公司不会养得起的岗位,比如引擎啦什么的. 最终去哪,还是要衡量钱&舒心了

去大公司还是小公司? 运维人员需要有自己的选择

工作三年多了,一直从事的运维相关的工作,这三年时间对我来说,路没有走好.跳槽太频繁,大公司,外企,小公司都呆过.都说毕业以后第一份正式工作很重要,不要过分看重公司的规模,薪资的高低,现在看来此话确实有些道理.目前我在一家小型手游公司担任运维主管一职,说得好听是运维主管,不好听也只是一个小组长之类的角色,薪资待遇也没有同样具有三年运维相关工作经验的高级运维工程师待遇高.但是我很看重目前这份工作,不是起点,不是终点,但绝对是我运维职业生涯的转折点.大公司长见识,小公司长本事.我在大公司的时候做的都是

在大公司做凤尾,还是在小公司做鸡头?

大家都知道互联网大公司一向以技术强悍而知名,BAT的技术在国内互联网公司里算是比较领先的了,这也是因为大公司的业务繁杂庞大,必须要有足够优秀的技术去支撑. 相对而言,小公司更倾向于选用快速扁平化的技术架构,相对来说技术的沉淀就不会像大公司这么多,所以你会发现大公司里和小公司里,大家的技术思考可能也不太一样. 大公司里通常牛人很多,相对来说小公司里的牛人相对少一点,当然也有很多从大公司过去的牛人.所以这就出现了一个问题,在大公司里,你的技术可能平平无奇,甚至比大多数人都要弱一些,而在小公司里,你可

BAT大公司里怎样开发和部署web前端代码

这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中. 在我的印象中,facebook是这个领域的鼻祖,有兴趣.有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化. 接下来,我想从原理展开讲述,多图,较长,希望能有耐心看完. 让我们返璞归真,从原始的前端开发讲起.上图是一个"可爱"的index.html页面和它的样式文件a.css,用文本编辑器写代码,无需编译,本地预览,确认OK,丢到服

大公司和小公司的web前端岗位,工作内容有哪些不同?

web前端岗位可以做哪些工作? 泛泛来说,会有这么些岗位: 网页制作.网页制作工程师.前端制作工程师.网站重构工程师.前端开发工程师.资深前端开发工程师.前端架构师. 当然,对于不同规模的公司,web前端岗位的设定也是有区别的,下面就来给大家介绍一下,企业是如何根据规模大小设定web前端的岗位的. ▼ 1. 企业规模:10人以下 我们先从几个人的小作坊说起,这种小作坊里面,基本上有一个人负责页面的设计,然后把页面"切"出来,然后有一个专门的人负责套程序.在这样的公司里面,Web前端其实

移动端1像素边框问题与CSS媒体查询

做移动端页面开发时,我们是按照UI设计图上的尺寸来做的. 比如说,UI给的图是750x1344(Iphone6标准),我们在浏览器做适配时,按照375x667来裁切,设计图上30像素的高度,开发时使用的是15px,这是因为Iphone6的设备像素比为2,css中的1px在设备中的像素为2px.当我们需要实现设计图中1px高度的边框时,在css中的1px实际上变成了2px边框,由此产生了1像素边框问题. 1.window.devicePixelRatio设备像素比 定义: window.devic

.NET开发的大型网站列表、各大公司.NET职位精选,C#王者归来

微软股票再创新高,市值超越google,仅次于苹果,简洁.优雅.高效的C#语言,神一样的C#创始人Anders Heilsberg,async/await编译器级异步语法,N年前就有的lambda表达式,.NET Native媲美C++的原生编译性能,新一代.NET全面开源.免费.跨平台,支持Windows.Linux.Mac,老板再也不用担心服务器授权费用了,即将发布的Win10一统物联网.手机.平板.PC用户体验,Unity3D跨平台游戏开发引擎(基于C#),Xamarin跨平台开发原生ap

大公司的PHP面试题

1. 禁用COOKIE 后 SEESION 还能用吗? 2. 抓取远程图片到本地,你会用什么函数? 4. 你觉得在pV10W的时候, 同等配置下,LUNIX 比WIN快多少? 5. 简述pOST 和GET传输的最大容量分别是多少? 6. 用最少的代码写一个求3值最大值的函数. 附部分答案(不保证是正确的解) 1. 不能2 fsockopen 4 (不做优化的情况下一样)5 2MB,1024B6 function($a,$b,$c){return $a>$b? ($a>$c? $a : $c)