（廢話寫在前面~~）前端的發(fā)展太快静陈，感覺(jué)一周一框架的節(jié)奏燕雁，很多時(shí)候我會(huì)想怎么能跟上這樣的速度诞丽，今天剛剛熟悉了一個(gè)框架， 結(jié)果明天GitHub就出了一個(gè)新的比這個(gè)更好拐格，那我應(yīng)該放棄剛熟悉的框架繼續(xù)去看最新的嗎僧免？很明顯這樣咩有頭，只會(huì)不停的得不償失捏浊，于是想了想 還是靜心下來(lái)懂衩，我們從最基本的開(kāi)始，解決疑難雜癥鞏固好基礎(chǔ)才能更快的上手或者說(shuō)更好的去開(kāi)發(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è)單位但是在我們開(kāi)發(fā)中實(shí)際能用到的比較少攒暇，目前我所接觸的項(xiàng)目最多的就是 px/rem
- REM的出現(xiàn)
說(shuō)到REM就要先說(shuō)說(shuō)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了
我們可以通過(guò)去設(shè)置每一個(gè)div的font-size來(lái)解決這個(gè)問(wèn)題秸侣，但是當(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)說(shuō)只要設(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)致了顯示的差異册招，我們前端的開(kāi)發(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物理像素的邊框键痛，開(kāi)發(fā)者應(yīng)該如何處理呢。 他們?cè)榻B到 iOS 8 和 OS X Yosemite 即將支持 0.5px 的邊框：
這樣有個(gè)問(wèn)題：
問(wèn)題是 retina 屏的瀏覽器可能不認(rèn)識(shí)0.5px的邊框匾七，將會(huì)把它解釋成0px散休，沒(méi)有邊框。包括 iOS 7 和 之前版本乐尊，OS X Mavericks 及以前版本戚丸，還有 Android 設(shè)備。
解決方案：通過(guò)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代碼即可解決問(wèn)題痢缎，但是如果要兼容安卓設(shè)備胁勺，和 iOS 8 以下設(shè)備怎么辦？在這個(gè)需求上就行不通了
方法二 用圖片實(shí)現(xiàn) border 的
這是我認(rèn)為最‘實(shí)誠(chéng)’的方案独旷，顧名思義 就是用圖片來(lái)平鋪得到一條線
一般會(huì)使用一張6x6的圖片來(lái)通過(guò)background-image和border-width來(lái)實(shí)現(xiàn)具體我就不細(xì)說(shuō)了可以直接看參考鏈接
這個(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) 顯而易見(jià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è)方案低飒，之前有搜索過(guò)各種資料包括實(shí)踐，目前來(lái)說(shuō)都是這種方式最好使用懂盐，兼容性也最好褥赊。（如果有看官們有好的歡迎貼碼謝謝）
