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