xml地图|网站地图|网站标签 [设为首页] [加入收藏]
的解决方案,消失的边界线问题
分类:web前端

再谈 Retina 下 1px 的解决方案

2017/07/25 · CSS · 1px

初藳出处: 大漠   

在网络络有关于1px边框的减轻方案已经有很五种了,自从使用Flexible库之后,再也从没纠葛有关于1px有关的难点。由于近期在思虑新的位移端适配方案,也正是割舍Flexible库,笔者必须要思索重新管理1px的方案。为此为笔者本人也重撸了部分1px的减轻方案,整理出来,希望对有亟待的同室有帮带。

什么样编写轻量级 CSS 框架

2017/08/08 · CSS · CSS

正文笔者: 伯乐在线 - 叙帝利 。未经笔者许可,制止转发!
迎接加入伯乐在线 专栏撰稿者。

图片 1

Github:

Demo: 

风趣的CSS标题(7):消失的边界线难题

2016/10/14 · CSS · 1 评论 · 的解决方案,消失的边界线问题。CSS

本文小编: 伯乐在线 - chokcoco 。未经小编许可,制止转发!
应接出席伯乐在线 专辑小编。

的解决方案,消失的边界线问题。Flexible方案

Flexible方案已不是什么秘密的方案了,依据JavaScript来动态修改meta的解决方案,消失的边界线问题。标签中viewport中的initial-scale的值,然后依据dpr修改html中的font-size值,再使用rem来拍卖。有关于那方面包车型客车详尽使用能够翻阅前期收拾的篇章《使用Flexible落成手淘H5页面包车型大巴顶点适配》。

而是话说回来,这么些方案这段时间只管理了iOS的dpr2的处境,其余的都未曾管理,也便是说不扶持Android和drp=3的状态。对于追求左右逢源的同学来讲,那是不能选用的。

有难题,总是有解决方案的,有同学做过地方的详尽索求。那么随着其思路也重新撸了一遍。先回到Fleible中,其贯彻原理,我们都知道的。让viewport放大为device-widthdpr倍数,然后减弱1/dpr倍显示。

对于viewport的解决方案,消失的边界线问题。的总结理论上是这么的:

viewportwidth没设置的话,私下认可是980px,这上头的详实介绍可以阅读《Configuring the Viewport》一文;但倘使设置了initial-scaleviewport=device-width/scale;同一时间还设置了widthinitial-scale,则会取min-width,即选用那三个超级小的值。详细的牵线能够翻阅《Preliminary meta viewport research》一文。

接下去看看各样设备下的情状。首先利用JavaScript总结出scale的值:

var scale = 1 / window.devicePixelRation;

1
var scale = 1 / window.devicePixelRation;

head中的meta标签设备:

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

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

iPhone5viewportwidth=640px,得到的meta值:

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

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

顺应我们预料所需的结果。

iPhone6 Plus也是一应俱全的:

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

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

再来看几个Android的装置。比如米3,它的dpr=3viewportwidth=1080,获得的值也是大家盼望的:

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

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

在米2中,它的dpr=2的解决方案,消失的边界线问题。,viewportwidth=720,效果也是OK的。

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

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

看样子此间时,大家或然都会感到完美,无需郁结啥,事实上在米2和米3中,见到的都以安装暗中同意的浏览器、UC和Chrome浏览器的结果。回过头来再看WebView,那就出难点了。当Webview为360时,线依然也是粗的,这里测量试验,发掘user-scalable=no会使viewport的值等于device-width。那么大家越来越去掉user-scalable=no要么设置user-scalable=yes

<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/> <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

1
2
  <meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>
  <meta name="viewport" content="initial-scale=0.3333333333,maximum-scale=0.3333333333,minimum-scale=0.3333333333"/>

这么设置,在iOS、米3的Webview下都能猎取预期效果,不过在米第22中学的Webview依然反常,页面会被放大。难点是出在于米2的Webview的viewportwidth=490px,是由暗中认可的980px缩放0.5后的值。而米2的device-width=360,所以就能够忍俊不禁撑开放不下的意况。

米2的Webview怎么做? 想起还大概有个被webkit在二零一二年10月撇下的性质target-densitydpi=device-dpi,此属性是事先Android对viewport标签的强大,arget-densitydpi的值有: device-dpi, high-dpi, medium-dpi, low-dpi多少个。对于Samsung2的Webview才现身的主题素材估算只好非标准的品质来hack试试,densitydpi=device-dpi会让页面遵照设备本身的dpi来渲染。

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

1
  <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

测量试验别的都健康,就酷派2的Webview会现身略微边框不常冒出模模糊糊,原来是这时页面包车型地铁viewport=980,densitydpi=device-dpi以设备实际的dpi显示后,scale的倍数变为360/980,这种景况压缩下去恐怕就这么残了~~

想方法让金立2的缩放比为BlackBerry的dprviewport什么样能形成2*360=720呢,试试user-scalable=no再一次加回去试试,终于,华为2的Webview下冒出了苗条的线条。

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

1
  <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no"/>

测量试验了下对HUAWEI类别、三星(Samsung)层层、一加等主流机型的熏陶,符合规律!

别欢悦的太早,在大天朝下,不独有有那一个器材。还会有VIVO之类的无绳电电话机,他们的dpr=3,他们的viewport=980px,减弱为本来的1/3后,效果就不是大家所要的了。除此而外,还会有点设施,它的dpr很变态,比如VIVO的Android4.1.2,它的dpr=1.5,而其viewport也等于980,减弱为本来的1/1.5 = 2 / 3,宽度就成为了980 * 2 / 3 = 653.333,获得的功效也是敬谢不敏静心的。当然还应该有大器晚成部分大家所不知底的器具呢?那个足以经过Device Metrics网址来查阅出设备相关的参数:

图片 2

那也是当初Fleible吐弃诊疗Android的由来。

但总的来讲,其根本原因是同等的,viewport的暗中认可宽度还是是980initial-scale等的装置不能够改观viewport的准则总计。看来那几个肥猪瘤机型上只可以经过width来改换了。情理之中,设置如下就能够

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

1
  <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

更上一层楼测量试验开采绝大部分Android机器用上边包车型地铁vieport设置也截然能够达成1px的实事求是效果。但是新webkit下生龙活虎度移除了对target-densitydpi=device-dpi的支撑。所以主流Android依旧用标准的装置上述initscale=scale,因而末了的方案是主流的装置安装viewport

<meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

1
  <meta name="viewport" content="densitydpi=device-dpi,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5"/>

设置以上viewport要么无法改进默许980为宽度的viewport的非主流设备(如酷派,云os等),设置如下:

<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

1
  <meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,user-scalable=no"/>

故而,最后的落到实处代码如下:

metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale); //不通过参加具体设备的白名单,通过此特征检测 docEl.clientWidth == 980 //initial-scale=1无法省,因为地点安装为别的的scale了,要求重新恢复设置回来 if(docEl.clientWidth == 980) { metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1'); }

1
2
3
4
5
6
metaEl.setAttribute('content', 'target-densitydpi=device-dpi,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale);
//不通过加入具体设备的白名单,通过此特征检测 docEl.clientWidth == 980
//initial-scale=1不能省,因为上面设置为其他的scale了,需要重置回来
if(docEl.clientWidth == 980) {
    metaEl.setAttribute('content', 'target-densitydpi=device-dpi,width=device-width,user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1');
}

减削的代码能够点击这里下载。那么些也足以说是Flexible的晋升版本吧(别的感兴趣的可以看看npm上的postcss-adaptive)。但亦不是自己所供给的方案,作者的末段方案是本末颠倒Flexible。

借使您对地点的方案不是很满足,你可以依附那篇文章《Mobile Web: Logical Pixel vs Physical Pixel》提供的解决方案,整理出相符本人的方案。原理和前边介绍的同大器晚成。

iPhone系列的viewport

<meta name="viewport" content="width=device-width initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

1
  <meta name="viewport" content="width=device-width initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

Android系列的viewport:

<meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

1
  <meta name="viewport" content="width=device-width target-densityDpi=device-dpi initial-scale=0.5 maximum-scale=0.5 user-scalable=no"/>

大器晚成致为了实现上述的需要,通过JavaScript来管理:

if (window.devicePixelRatio === 1) { if (window.innerWidth === 2 * screen.width || window.innerWidth === 2 * screen.height) { el = document.getElementById('viewport'); el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi ' + 'initial-scale=1 maximum-scale=1 user-scalable=no'); document.head.appendChild(el); width = window.innerWidth; height = window.innerHeight; if (width === 2 * screen.width) { width /= 2; height /= 2; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if (window.devicePixelRatio === 1) {
    if (window.innerWidth === 2 * screen.width ||
        window.innerWidth === 2 * screen.height) {
        el = document.getElementById('viewport');
        el.setAttribute('content', 'width=device-width target-densityDpi=device-dpi ' +
            'initial-scale=1 maximum-scale=1 user-scalable=no');
        document.head.appendChild(el);
        width = window.innerWidth;
        height = window.innerHeight;
        if (width === 2 * screen.width) {
            width /= 2;
            height /= 2;
        }
    }
}

是否以为他们那一个周边。感兴趣不仿试试。

前言

那篇作品作者早已掂量了八个月之久,大概说拖拉了这么久吧。想说的事物重重,却又一言难尽。近些日子轻量级框架如雨后春笋,不胜枚举。小编想每种人都应该总结计算专业中的常见须求,编写黄金年代套相符自个儿的 CSS 框架。在事先的稿子中,我关系了面向对象的 CSS(比方BEM、OOCSS、SMACSS,详见 )。这是风流倜傥种沉思,并不涉及具体的 CSS 难点,首就算类命名的政策!今后如故有广大人对于前端框架的认知还栖息在表面,感觉Bootstrap 是后端职员专项使用,前端没必要等等。笔者不精通这种说法从何而来,笔者最最早也恶感使用框架,或者和成千上万人的主见同样,畏惧新知识、恐慌难以精晓、境遇难题的时候不能够杀绝等等。最重要的少数是累累人感到框架的体制是永远的,校正起来太劳苦,还不比本身依据布署图写起来方便。

7、消失的边界线难点

看看下图,日常会在后生可畏都部队分导航栏中见到,须要每行中最后一列的左臂框消失,怎样在具有浏览器中最便利温婉的得以落成?

图片 3

只即便无需包容 IE8- ,那么使用 CSS3 新扩展的接收器无疑是黄金年代种好法子。

JavaScript

// 使用伪类接纳器,选择第 3n 个成分去掉边框 li:nth-child(3n){ border-right:none; }

1
2
3
4
// 使用伪类选择器,选择第 3n 个元素去掉边框
li:nth-child(3n){
  border-right:none;
}

自然,若是个数鲜明也相当少,给必要去掉侧边框的成分直接抬高一个一定的 class 也就达成。可能,使用 table 即使繁缛一点,可是也能兑现。

不过那样都比非常的矮贵。

此地有个小技能,正是经过抬高反向边框何况扩展二个负的 margin 来实现。

第生龙活虎,假定大家的 ul 结构如下:

XHTML

<div class="ul-container"> <ul> <li>测试</li> <li>消失</li> <li>边界线</li> <li>右侧</li> <li>边界线</li> <li>消失</li> <li>测试</li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
11
<div class="ul-container">
    <ul>
        <li>测试</li>
        <li>消失</li>
        <li>边界线</li>
        <li>右侧</li>
        <li>边界线</li>
        <li>消失</li>
        <li>测试</li>
    </ul>
</div>

如图中所示,假定每行排列 3 个 li ,每个 li 宽 100px ,大家的 ul 和 ul-container 宽度都设为 300px 。

最保护的是,每一个 li 设置一个左方框并非侧边框:

CSS

.ul-container, ul{ width:300px; } li{ float:left; width:99px; border-left:1px solid #999; }

1
2
3
4
5
6
7
8
9
10
.ul-container,
ul{
  width:300px;
}
li{
  float:left;
  width:99px;
  border-left:1px solid #999;
}

我们会获得如下那样的结果:

图片 4

接下去,我们将容器 ul-container 设置为 overflow:hidden ,并且将 ul 左移一个像素 margin-left:-1px

这样 ul 中首先列的有着边框都归因于左移了后生可畏像素并且被 overflow:hidden 而未有了,变成了下三个 li 的右边框望着像侧面框相像,其实只是个障眼法:

CSS

.ul-container{   overflow:hidden; } ul{   margin-left:-1px; }

1
2
3
4
5
6
.ul-container{
  overflow:hidden;
}
ul{
  margin-left:-1px;
}

意义图就好像大器晚成开端图示所示:

图片 5

Demo戳我

See the Pen borderDisappear by Chokcoco (@Chokcoco) on CodePen.

这种做法能够适应不同 li 个数差别行数的全数景况,因为每一种新加上的 li ,都会生成一个侧面框与上多个 li 成分分开,只是在视觉上看起来疑似上多个 li 成分的侧边框。

 

不无难题汇总在自己的 Github ,发到博客希望获得越多的调换。

到此本文截至,如若还或许有何难题照旧提出,能够多多交换,原创著作,文笔有限,吴下阿蒙,文中若有不正之处,万望告知。

打赏帮衬本身写出越来越多好文章,感谢!

打赏小编

.5px方案

二零一五年的WWDC大会中,Ted O’Conor在共享“设计响应的Web体验” 大旨时提到有关Retina Hairlines后生可畏词,也便是Retina超细的线:

在Retina屏上只是呈现1大要像素的边框,开垦者应该怎么管理呢?

实质上其想发挥的是iOS8下1px边框的缓和方案。1px的边框在devicePixelRatio = 2的Retina屏下会展现成2px,在OPPO6 Plus下依然会来得成3px

幸好,时期总是进步的,在iOS8下,苹果体系都早就援救0.5px了,那么意味着在devicePixelRatio = 2时,大家能够凭仗媒体询问来管理:

.border { border: 1px solid black; } @media (-webkit-min-device-pixel-ratio: 2) { .border { border-width: 0.5px } }

1
2
3
4
5
6
7
8
9
.border {
    border: 1px solid black;
}
 
@media (-webkit-min-device-pixel-ratio: 2) {
    .border {
        border-width: 0.5px
    }
}

但在iOS7以下和Android等别的系统里,0.5px将会被出示为0px,那么大家就必要想出方法解决,说其实一点就是找到哈克。

先是大家得以通过JavaScript来判别UA,假设是iOS8+,则输出类名hairlines,为了防范重绘,把这段代码增加在``之前:

if (/iP(hone|od|ad)/.test(navigator.userAgent)) { var v = (navigator.appVersion).match(/OS (d+)_(d+)_?(d+)?/), version = parseInt(v[1], 10); if(version >= 8){ document.documentElement.classList.add('hairlines') } }

1
2
3
4
5
6
7
if (/iP(hone|od|ad)/.test(navigator.userAgent)) {
    var v = (navigator.appVersion).match(/OS (d+)_(d+)_?(d+)?/),
        version = parseInt(v[1], 10);
    if(version >= 8){
        document.documentElement.classList.add('hairlines')
    }
}

除外判读UA之外,还是能够透过JavaScript来剖断是或不是扶助0.5px边框,如若匡助的话,相近输出类名hairlines

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); }

1
2
3
4
5
6
7
8
9
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);
}

比较之下于第生龙活虎种办法,这种艺术的可相信性越来越高级中学一年级些,可是须求把JavaScript放在body标签内,绝对来讲会有少年老成对重绘,个人提议是用第大器晚成种方式。

本条方案无法宽容iOS8以下和Android的设施。假若急需全面包车型地铁十分,可以思虑和方案黄金年代结合在联合管理。只是比较蛋疼。当然除了和Flexible方案组成在一块之外,还是可以伪造和下部的方案组成在联合署名使用。

为什么接受框架

怎么使用框架?答案昭昭,成效。除外,使用框架也许钻探框架的意思还大概有大多,举个例子面向对象思想的切实落到实处。在上一家商厦专门的工作的时候,起头的多少个门类自身也是用最原始的主意书写 CSS 。项目里面最让自己脑仁疼的正是类的命名。小编想大多数人都是依靠效果与利益去命名,那就形成了过多的冗余,相通的零件恐怕写很频仍。简单举三个例子,如下图,个人主题的登陆分界面。

图片 6

广大人包罗本身刚开首的时候或许会选拔下边包车型大巴类命名及布局方式,其通用性很倒霉

JavaScript

<div class="login-area"> <div class="login-img">     <img src="..." />   </div> <div class="login-text">     <a href="...">请点击登陆</a>   </div> </div>

1
2
3
4
5
6
7
8
<div class="login-area">
    <div class="login-img">
    <img src="..." />
  </div>
    <div class="login-text">
    <a href="...">请点击登录</a>
  </div>
</div>

不过精通 Bootstrap 的人相应一眼就意识上海教室正是多个 media 对象,无非一些小细节须要调动一下

JavaScript

<div class="media"> <div class="media-left"> <img src="..." /> </div> <div class="media-body media-middle"> <a href="...">请点击登陆</a> </div> </div>

1
2
3
4
5
6
7
8
<div class="media">
    <div class="media-left">
        <img src="..." />
    </div>
    <div class="media-body media-middle">
        <a href="...">请点击登录</a>
    </div>
</div>

为了让文字与图片居中对齐,我们得以行使 Bootstrap 的 .media-middle 的协助类。假如在工作中还要依赖必要自定义一些扶持类调治细节,当然那是叁个平移端的例子,能够筛选移动端框架相关的 media 对象。

其余,在项目改版的时候,原始的办法的校正更是惨无人理,能够说是惊恐不已的梦,冗长的 CSS 文件、混乱的效果与利益划分、类名、色值等等。最终也只好硬着头皮一点一点修改。那一刻作者才体会到框架的含义以至前端工具的机要。笔者从办事中总计出,要么你能够熟识的施用某贰个框架,要么就融洽达成多少个框架

打赏帮助本身写出更加多好文章,谢谢!

任选生机勃勃种支付形式

图片 7 图片 8

1 赞 5 收藏 1 评论

border-image

border-image是一个很神奇的习性,Web开荒人士依据border-image的九宫格天性,能够很好的使用到解决1px边框中。使用border-image解决1px咱俩必要贰个特定的图形,那张图纸要契合您的渴求,可是它长得像下图:图片 9

 

其实运用的时候:

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

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

上面的效能也仅完毕了底层边框border-bottom1px的意义。之所以接纳的图片是2px的高,上部分的1px颜色为透明,下局部的1px运用的视觉规定的border颜色。但假如大家边框底部和最上部都必要border时,须要做一下图片的调动:

图片 10

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

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

到如今甘休,大家曾经能在One plus上显现1px边框的功效。不过大家也意识这么的办法在非视网膜显示屏上会现身border不出示的场景。为了化解这一个主题材料,能够注重媒体询问来拍卖:

.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; border-image: url(../img/linenew.png) 0 0 2 0 stretch; } }

1
2
3
4
5
6
7
8
9
10
.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;
        border-image: url(../img/linenew.png) 0 0 2 0 stretch;
    }
}

任由是唯有豆蔻梢头边的边框(比如示例中的底部边框),还是前后都有边框,我们都亟需对图纸做相应的管理,除些之外,即便边框的颜料做了调换,那么也亟需对图纸做拍卖。那样亦非二个很好的缓慢解决方案。

后边多个框架相比较

脚下市情上前端框架首要分重量级与轻量级。重量级注重有 Bootstrap、Semantic、UIkit、Foundation 等,轻量级有 Pure、Skeleton、Miligram 等。平日关怀前端动态的技术员会意识轻量级框架一年一度都不可胜数。在本身下边提到的主流轻量级框架之外还恐怕有众多像样的框架。作者直接问自身,为何要双重造轮子。经过研商,小编开掘那一个轻量级框架其实相当多都不能够独当一面职业须要,况且模仿的印迹非常重,基本上都或多或少的有 Bootstrap 的阴影。那么这几个轻量级框架有未有意义吗?当然有。不过就自个儿个人观点,选用轻量级框架反倒不比自身实现一个框架。因为许多轻量级框架就疑似专门的工作总括,是基于本身的业必须要达成的。所以基本上不持有通用性。

后面一个框架的比较首要以 Bootstrap、Semantic、UIkit 为主,因为自个儿个人认为那三个最具备代表性,并且设计风格各有特色。Foundation 也许有多数大商厦在用,但以自个儿个人观点,无论是框架的易用性依旧设计风格,比较其余多少个框架略逊一筹。

个中 Bootstrap 和 塞马ntic 是面向对象的最佳反映。

作者先说一下 Bootstrap 的优势,不是规划风格,不是模块,不是特效,而是栅格,响应式栅格。Bootstrap 的栅格在与别的框架比较中侵占相对优势,无论是栅格的撤销合并恐怕类名的风骨都称得上非凡。假如读者有心看一下 Bootstrap 的 Less 源文件,就会感受到 Bootstrap 对于响应式栅格的别具肺肠。其实在 Bootstrap 在此之前也可能有多数栅格方案,不过给人的痛感正是相当不够利索,类名繁杂倒霉记。而新兴的好些个框架,超轻量级的框架多数都有Bootstrap 的影子。

上面我们经过对照多少个框架的栅格和按钮来看一下类命名的宗旨。

Bootstrap

JavaScript

<div class="row"> <div class="col-md-8"></div> <div class="col-md-4"></div> </div> <button class="btn btn-primary" type="submit">Button</button>

1
2
3
4
5
6
<div class="row">
  <div class="col-md-8"></div>
  <div class="col-md-4"></div>
</div>
 
<button class="btn btn-primary" type="submit">Button</button>

Semantic

JavaScript

<div class="ui grid"> <div class="ten wide column"></div> <div class="six wide column"></div> </div> <button class="ui primary basic button">Primary</button>

1
2
3
4
5
6
<div class="ui grid">
  <div class="ten wide column"></div>
  <div class="six wide column"></div>
</div>
 
<button class="ui primary basic button">Primary</button>

Foundation

JavaScript

<div class="row"> <div class="small-3 columns"></div> <div class="small-9 columns"></div> </div> <button type="button" class="primary button">Primary</button>

1
2
3
4
5
6
<div class="row">
  <div class="small-3 columns"></div>
  <div class="small-9 columns"></div>
</div>
 
<button type="button" class="primary button">Primary</button>

UIkit

JavaScript

<div class="uk-grid"> <div class="uk-width-1-2"></div> <div class="uk-width-1-2"></div> </div> <button class="uk-button uk-button-primary" type="button">Primary</button>

1
2
3
4
5
6
<div class="uk-grid">
    <div class="uk-width-1-2"></div>
    <div class="uk-width-1-2"></div>
</div>
 
<button class="uk-button uk-button-primary" type="button">Primary</button>

Pure

JavaScript

<div class="pure-g"> <div class="pure-u-1-2"></div> <div class="pure-u-1-2"></div> </div> <button class="pure-button pure-button-primary">A Primary Button</button>

1
2
3
4
5
6
<div class="pure-g">
    <div class="pure-u-1-2"></div>
    <div class="pure-u-1-2"></div>
</div>
 
<button class="pure-button pure-button-primary">A Primary Button</button>

透过下边的自己检查自纠,我们应该早就意识了那一个框架的命名战略的不等。不可以还是不可以认,Bootstrap 的命名最杰出。

此前在网络看看有人讨论关于框架的易用性,有些人会说 Bootstrap 的类名太长,然则因此地点多少个框架的对照,Bootstrap 的类并不麻烦,何况用预管理器编写框架时嵌套会比较灵敏。

Semantic 的类名最精简,通过五个定语的梳洗组成一句话,确实很风趣。然则过多的修饰类在编排框架时会稍显混乱,有利有弊,同样重视吧。

Foundation 的栅格应该是最丰裕的,计谋上好像 Bootstrap,只是对公私属性进行了拆分,大家也能够看看里面的具体细节。

UIkit 和 Pure 的国策相近,都加了前缀以界别此外框架,可是很明朗类名过于冗长了。小编在编辑框架时也这样想过,但是最后放弃了这种措施。

关于作者:chokcoco

图片 11

经不住似水年华,逃可是此间少年。 个人主页 · 作者的稿子 · 63 ·    

图片 12

PostCSS Write SVG

使用border-image每回都要去调治图片,总是须要成本的。基于上述的原故,大家能够看重PostCSS的插件postcss-write-svg来扶助我们。倘使您的品类中早就有选用PostCSS,那么只必要在类型中安装那一个插件。然后在您的代码中应用:

@svg 1px-border { height: 2px; @rect { fill: var(--color, black); width: 100%; height: 50%; } } .example { border: 1px solid transparent; border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch; }

1
2
3
4
5
6
7
8
9
10
11
12
13
@svg 1px-border {
    height: 2px;
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 50%;
    }
}
 
.example {
    border: 1px solid transparent;
    border-image: svg(1px-border param(--color #00b1ff)) 2 2 stretch;
}

诸有此类PostCSS会自动帮你把CSS编写翻译出来:

.example { border: 1px solid transparent; border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch; }

1
2
3
4
.example {
    border: 1px solid transparent;
    border-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' height='2px'%3E%3Crect fill='%2300b1ff' width='100%25' height='50%25'/%3E%3C/svg%3E") 2 2 stretch;
}

采用PostCSS的插件是还是不是比大家改正图片要来得轻松与福利。

使用PostCSS的postcss-write-svg插件,除了能够运用border-image来实现1px的边框效果之外,仍是能够动用background-image来实现。比如:

@svg square { @rect { fill: var(--color, black); width: 100%; height: 100%; } } #example { background: white svg(square param(--color #00b1ff)); }

1
2
3
4
5
6
7
8
9
10
11
@svg square {
    @rect {
        fill: var(--color, black);
        width: 100%;
        height: 100%;
    }
}
 
#example {
    background: white svg(square param(--color #00b1ff));
}

编写翻译出来正是:

#example { background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=' fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E"); }

1
2
3
#example {
    background: white url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect fill='%2300b1ff' width='100%25' height='100%25'/%3E%3C/svg%3E");
}

本条方案大约易用,是自个儿所供给的。这段时间测量检验下来,基本能完成自我所须要的须求,在新式的适配方案中,笔者也采用了这么些插件来拍卖1px边框的难点。

而外网上好朋友还收拾了有的别的的方案,比方说:background-imagebox-shadowtransform之类的。

其中box-shadow不引入使用,而background-image和上边的PostCSS方案有一点点相近,只可是PostCSS更为有扶持,实在无耐之下,transform和伪成分只怕伪类的相配依旧得以值得大器晚成用的。举例:

.hairlines li{ position: relative; border:none; } .hairlines li:after{ content: ''; position: absolute; left: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); transform-origin: 0 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.hairlines li{
    position: relative;
    border:none;
}
.hairlines li:after{
    content: '';
    position: absolute;
    left: 0;
    background: #000;
    width: 100%;
    height: 1px;
    transform: scaleY(0.5);
    transform-origin: 0 0;
}

选择的时候,也亟需组合JavaScript代码,用来判别是或不是是Retina屏。当然除了JavaScript来剖断之外,你还足以信赖媒体询问来拍卖。

关于 CSS 预管理器

CSS 预管理器早就不是怎么着新鲜事,不过真正可以在专业中运用的人有微微呢?熟识运用预管理器脾气的人又有个别许吧?

自己事先职业的时候也从不用预管理器,因为不用,所以也开采不到预管理器的益处。首假诺感到费劲,因为要使用编写翻译器编写翻译一下,还不比直接写 CSS 方便。可是在类型敬性格很顽强在荆棘丛生或巨大压力面前不屈的时候就认识到预管理器的补益。后来在多少个品种中品尝了预管理器,可是对于模块化的写法不太刚强。预处理器作为工具,能够完成模块化编写 CSS,那么相应怎么分割模块?其余,预管理器有广大脾性,可是多数人刚开头只用到变量和嵌套,其它的特色差不离超少用到。小编信赖在投机入手实现四个轻量级框架的进度中,咱们能够对预管理器有一个周密的垂询。

一时一刻盛行的预管理器有 Less,Sass,Stylus 多少个,接受哪位完全部是看本身的习贯。笔者最开头致的原因为 Bootstrap 通晓的 Less,不过因为习于旧贯接收了 Sass,其次 Sass 的功效要更健全一些。

无论是专门的学问恐怕友好写项目,都要搭建多少个体系条件,也等于设置意气风发多级的 npm 包。比较刀耕火耘的开采方式,使用工具开拓的最先计划进度稍显麻烦,但是借使处境建好,后期的成本将会听得多了自然能详细说出来。

Miligram 那些轻量级框架在 Github 上有超级高人气,不过说真的,用处并非常小。可是那几个框架的营造方式非常值得学习。就算CSS 对于众多个人俩说相当粗略,不过真要去写壹个框架,依旧那么些费事,那时候就必要前车之鉴一些巧妙的框架。

编排框架大致会用到的 npm 如下:

JavaScript

--autoprefixer --node-sass --npm-run-all --rimraf --onchange

1
2
3
4
5
--autoprefixer
--node-sass
--npm-run-all
--rimraf
--onchange

其实最重要的正是叁个 node-sass,此外的都以扶助 CSS 文件的变型改良,大家感兴趣的话能够去 npm 官方网站寻觅那么些插件,精晓实际用法,如有不懂能够给自己留言,作者就不啰嗦了。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:的解决方案,消失的边界线问题

上一篇:手机活动页图片性能优化分享,React转小程序现状 下一篇:PostCSS浓郁学习,测量试验你的前端代码
猜你喜欢
热门排行
精彩图文