1個物理像素的邊框寬度

有一項任務，儘管設備像素比例使塊的邊框寬度爲1個物理像素。1個物理像素的邊框寬度

項目採用

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

也正因爲如此，border: 1px solid black;在不同的設備有不同pixelratio不同的邊框寬度。我需要避免它，並使邊界寬度爲1個物理像素。

來源

2015-10-29 xobotyi

您是否設置了視口寬度？ '' –

沒有像物理像素這樣的css值。 –

@SamWillis是的，寫在問題 – xobotyi

在純CSS中對此進行近似的一種方法是使用基於分辨率的媒體查詢。

div { 
 
    margin:.5em 0; 
 
    border:1px solid red; 
 
} 
 
@media (min-resolution: 2dppx) { 
 
    div.devicedot {border-width:.5px;} 
 
} 
 
@media (min-resolution: 3dppx) { 
 
    div.devicedot {border-width:.34px;} 
 
} 
 
@media (min-resolution: 4dppx) { 
 
    div.devicedot {border-width:.25px;} 
 
} 
 
@media (min-resolution: 6dppx) { 
 
    div.devicedot {border-width:.17px;} 
 
}

<div class="normal">This is normal</div> 
 
<div class="devicedot">This is with a device dot</div>

過程中的實際查詢取決於你的需求：如果你想打印一個1200dpi的打印機上，你將不得不包括查詢12dppx。（如果你真的可以使用0.02毫米寬的線，那就是）。

並且請注意，這個例子被簡化了，假設瀏覽器支持完整的@media。如果您在任何人都可以訪問的實際網站上使用此功能，請添加保護措施，如@media all and ...

來源

2015-11-28 12:20:23

1個物理像素的邊框寬度

回答

相關問題