（廢話寫在前面~~）前端的發(fā)展太快，感覺一周一框架的節(jié)奏，很多時(shí)候我會(huì)想怎么能跟上這樣的速度，今天剛剛熟悉了一個(gè)框架， 結(jié)果明天GitHub就出了一個(gè)新的比這個(gè)更好，那我應(yīng)該放棄剛熟悉的框架繼續(xù)去看最新的嗎？很明顯這樣咩有頭，只會(huì)不停的得不償失，于是想了想 還是靜心下來(lái)，我們從最基本的開始，解決疑難雜癥鞏固好基礎(chǔ)才能更快的上手或者說更好的去開發(fā)，找到合適于項(xiàng)目的技術(shù)棧才是最重要的
關(guān)于移動(dòng)端H5之單位
- 關(guān)于單位的使用收集了一共有10個(gè)，分別是px，em，pt，ex，pc，in，mm，cm，vh，vw
1）px：像素（Pixel）,相對(duì)于設(shè)備的長(zhǎng)度單位，像素是相對(duì)于顯示器屏幕分辨率而言的。譬如，WONDOWS的用戶所使用的分辨率一般是96像素/英寸。而MAC的用戶所使用的分辨率一般是72像素/英寸。
2）em：相對(duì)長(zhǎng)度單位。相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸。 如當(dāng)前行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
3）pt：點(diǎn)（Point），絕對(duì)長(zhǎng)度單位。
4）pc：派卡（Pica），絕對(duì)長(zhǎng)度單位。相當(dāng)于我國(guó)新四號(hào)鉛字的尺寸（可以自行百度-字號(hào)與尺寸對(duì)照表）。
5）in：英寸（Inch），絕對(duì)長(zhǎng)度單位。
6）mm：毫米（Millimeter），絕對(duì)長(zhǎng)度單位。
7）cm：厘米（Centimeter），絕對(duì)長(zhǎng)度單位。
8）ex：相對(duì)長(zhǎng)度單位。相對(duì)于字符“x”的高度。此高度通常為字體尺寸的一半。如當(dāng)前對(duì)行內(nèi)文本的字體尺寸未被人為設(shè)置，則相對(duì)于瀏覽器的默認(rèn)字體尺寸。
9）vh: 等于viewport高度的1/100.例如，如果瀏覽器的高是900px,1vh求得的值為9px。同理，如果顯示窗口寬度為750px,1vw求得的值為7.5px。
10）vw：設(shè)置一個(gè)字體大小。這個(gè)大小將會(huì)隨著瀏覽器的寬度按比例縮放。
其中：1in = 2.54cm = 25.4 mm = 72pt = 6pc ；
雖然收集了10個(gè)單位但是在我們開發(fā)中實(shí)際能用到的比較少，目前我所接觸的項(xiàng)目最多的就是 px/rem
- REM的出現(xiàn)
說到REM就要先說說em，可能也看到了和rem 就差了一個(gè)r, em 是相對(duì)長(zhǎng)度單位，比如 如果你在body元素上設(shè)置一個(gè)字體大小，那么在body元素內(nèi)的任何子元素的em值都等于這個(gè)字體大小。
....
<style>
body{font-size: 16px;}
div p{
font-size: 1em;// 這時(shí) p的字體大小就是 1*16 = 16px
}
</style>
<body>
<div>
<p>hello world！！</p>
</div>
</body>
上述代碼表示p設(shè)置了font-size為1em。它是所繼承body的字體大小的1倍，在這個(gè)例子中為16px。所以結(jié)果為16px.好處：很方便只要設(shè)置一遍body的字體大小就好了
但是,em是相對(duì)于當(dāng)前對(duì)象內(nèi)文本的字體尺寸，所以當(dāng)我們?cè)趯?shí)際運(yùn)用中 出現(xiàn)多層嵌套的時(shí)候
...
<style type="text/css">
body{font-size: 16px;}
div{
font-size: 2em;
}
</style>
<body>
<div class="demo1">
<p>hello world！！</p>
<div class="demo">
hello world2！！
<div class="demo2"> hello world3！！ </div>
</div>
</div>
</body>
如果簡(jiǎn)單的設(shè)置了div的大小這樣就會(huì)出現(xiàn)每一個(gè)層級(jí)字體都不一樣結(jié)果如下：
第一個(gè)是216;第二個(gè)就是2216；第三個(gè)就是22216了
我們可以通過去設(shè)置每一個(gè)div的font-size來(lái)解決這個(gè)問題，但是當(dāng)需求復(fù)雜時(shí)就會(huì)出現(xiàn)各種font-size的尺寸，就比如我們要?jiǎng)偛诺娜齻€(gè)嵌套都能達(dá)到同一個(gè)尺寸 2*16而又不想去設(shè)置每一個(gè)div的大小，這個(gè)時(shí)候 就出現(xiàn)了→
rem：基于一個(gè)唯一的度量標(biāo)準(zhǔn)來(lái)按比例縮放
簡(jiǎn)單的來(lái)說只要設(shè)置了body的font-size就可以了，頁(yè)面所有的元素都是基于這個(gè)根元素的大小來(lái)改變，在大多數(shù)情況下根元素為html元素；
<style type="text/css">
body{font-size: 16px;}
div{
font-size: 2rem;
}
</style>
<body>
<div class="demo1">
<p>hello world！！</p>
<div class="demo">
hello world2！！
<div class="demo2">
hello world3！！
</div>
</div>
</div>
</body>
同樣的代碼修改下單位效果就改變了；
關(guān)于移動(dòng)端H5之1像素邊框
- 隨著市場(chǎng)上各種手機(jī)端的出現(xiàn)，不同手機(jī)物理像素不同，對(duì)應(yīng)的設(shè)備像素比不同，同樣的1pxcss像素，轉(zhuǎn)換成物理像素后，尺寸是不同的，所以導(dǎo)致了顯示的差異，我們前端的開發(fā)工程師和UI設(shè)計(jì)的伙伴們就產(chǎn)生了分歧了，我們?cè)O(shè)置一個(gè)div的底部邊框?yàn)?1px solid #000; 實(shí)際表現(xiàn)卻是邊框線是模糊的，或者是大于1px的。
參考：https://jinlong.github.io/2015/05/24/css-retina-hairlines/
https://juejin.im/entry/584e427361ff4b006cd22c7c
https://www.w3cplus.com/css/fix-1px-for-retina.html
http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041
https://segmentfault.com/a/1190000007604842
方法一 0.5px 解決
在2014年的 WWDC，“設(shè)計(jì)響應(yīng)的Web體驗(yàn)” 一講中，Ted O’Connor 講到關(guān)于“retina hairlines”（retina 極細(xì)的線）在retina屏上僅僅顯示1物理像素的邊框，開發(fā)者應(yīng)該如何處理呢。 他們?cè)榻B到 iOS 8 和 OS X Yosemite 即將支持 0.5px 的邊框：
這樣有個(gè)問題：
問題是 retina 屏的瀏覽器可能不認(rèn)識(shí)0.5px的邊框，將會(huì)把它解釋成0px，沒有邊框。包括 iOS 7 和 之前版本，OS X Mavericks 及以前版本，還有 Android 設(shè)備。
解決方案：通過JS來(lái)檢測(cè)瀏覽器能否處理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);
}
// 腳本應(yīng)該放在<body>內(nèi)， 如果在<head>里面運(yùn)行，需要包裝 $(document).ready(function() { })
然后 直接寫1px即可
div {
border: 1px solid #bbb;
}
.hairlines div {
border-width: 0.5px;
}
從上面的方案來(lái)看，只要加上幾行JS代碼即可解決問題，但是如果要兼容安卓設(shè)備，和 iOS 8 以下設(shè)備怎么辦？在這個(gè)需求上就行不通了
方法二 用圖片實(shí)現(xiàn) border 的
這是我認(rèn)為最‘實(shí)誠(chéng)’的方案，顧名思義 就是用圖片來(lái)平鋪得到一條線
一般會(huì)使用一張6x6的圖片來(lái)通過background-image和border-width來(lái)實(shí)現(xiàn)具體我就不細(xì)說了可以直接看參考鏈接
這個(gè)方案最不好的地方就是 更換顏色就比較麻煩了，可能你會(huì)需要很多不同的圖片來(lái)做，如果圓角需要特殊處理，并且邊緣會(huì)模糊
方法三 用多背景漸變實(shí)現(xiàn)
.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(.5, transparent), color-stop(.5, #c8c7cc), to(#c8c7cc)) left bottom repeat-x;
background-size: 100% 1px;
}
這個(gè)的缺點(diǎn) 顯而易見 代碼太多 而且圓角也很不好弄
方法四 偽類 + transform
單條border樣式設(shè)置：
.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樣式設(shè)置:
.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;
}
嚴(yán)謹(jǐn)點(diǎn)的話 在使用前也判斷一下，結(jié)合 JS 代碼，判斷是否 Retina 屏：
if(window.devicePixelRatio && devicePixelRatio >= 2){
document.querySelector('ul').className = 'scale-1px';
}
優(yōu)點(diǎn)：
所有場(chǎng)景都能滿足
支持圓角(偽類和本體類都需要加border-radius)
缺點(diǎn)：
對(duì)于已經(jīng)使用偽類的元素(例如clearfix)，可能需要多層嵌套
還有其他的方法 例如 動(dòng)態(tài)改變 viewport ，借助JavaScript來(lái)動(dòng)態(tài)修改meta標(biāo)簽中viewport中的initial-scale的值，然后根據(jù)dpr修改html中的font-size值，再使用rem簡(jiǎn)稱Flexible方案
總結(jié)：相對(duì)而言 偽類的方案更好用，目前我一直在用的也是這個(gè)方案，之前有搜索過各種資料包括實(shí)踐，目前來(lái)說都是這種方式最好使用，兼容性也最好。（如果有看官們有好的歡迎貼碼謝謝）
