Retina屏
首先我們先聊下Retina屏的概念赡盘。
Retina: 一種新型高分辨率的顯示標(biāo)準(zhǔn),又稱視網(wǎng)膜顯示屏。
導(dǎo)致1px的原因缰揪？
在移動(dòng)端開發(fā)中陨享，UI設(shè)計(jì)稿中設(shè)置邊框?yàn)?px，前端在開發(fā)中如果出現(xiàn)border:1px,測試會(huì)發(fā)現(xiàn)在Retina屏機(jī)型中钝腺，1px會(huì)比較粗抛姑，即是經(jīng)典的移動(dòng)端1px像素問題。
比如iphone6的屏幕寬度為375px艳狐，設(shè)計(jì)師的視覺稿一般是750px定硝，如果UI的border 1px,而前端實(shí)際開發(fā)的時(shí)候是不能采用1px border的，應(yīng)該是1px/2毫目。
如何解決呢蔬啡？
屏幕快照 2021-09-08 上午6.11.11.png
1. 0.5px
.border-1px {
border: 1px solid #333；
}
@media screen and(-webkit-min-device-pixel-ratio：2) {
.border-1px {border: 0.5px solid #333镀虐；}
}
@media screen and(-webkit-min-device-pixel-ratio: 3) {
.border-1px {border: 0.333333px solid #333箱蟆；}
}
2. border-image
.border-1px {
border: 1px solid #333；
}
@media only screen and (-webkit-min-device-pixel-ratio：2) {
.border_1px {
border-bottom: none;
border-width: 0 0 1px 0;
border-image: url(../img.png) 0 0 2 0 stretch;
}
}
3. viewport + rem實(shí)現(xiàn)
const scale = 1 / window.devicePixelRatio;
const viewport = document.querySelector('meta[name="viewport"]');
if (!viewport) {
viewport = document.createElement('meta');
viewport.setAttribute('name', 'viewport');
window.document.head.appendChild(viewport);
}
viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);
// 設(shè)置根字體大小
var docEl = document.documentElement;
var fontsize = 10 * (docEl.clientWidth / 320) + 'px';
docEl.style.fontSize = fontsize;
// 在CSS中用rem單位就行了
4. 偽元素+transform
.border-1px:before{
content: '';
position: absolute;
top: 0;
height: 1px;
width: 100%;
background-color: #999;
transform-origin: 50% 0%;
}
@media only screen and (-webkit-min-device-pixel-ratio:2){
.border-1px:before{
transform: scaleY(0.5);
}
}
@media only screen and (-webkit-min-device-pixel-ratio:3){
.border-1px:before{
transform: scaleY(0.33);
}
}
5. box-shadow 模擬邊框
box-shadow: 0 -1px 1px -1px #999,
1px 0 1px -1px #999,
0 1px 1px -1px #999,
-1px 0 1px -1px #999;
6. svg
@svg border-1px {
height: 2px;
@rect {
fill: var(--color, black);
width: 100%;
height: 50%;
}
}
.svg {
border: 1px solid transparent;
border-image: svg(border_1px param(--color #00b1ff)) 2 2 stretch;
}
參考高級前端進(jìn)階
