實現移動端的1px的效果

2021-09-06 16:17:46 字數 546 閱讀 6779

實現移動端的效果的話,有兩種方法,第一種,就是用來做,

第二種就是用偽類來做,在這用來做的,我們不進行討論,我們看一下用偽類來做的效果。

使用偽類的:after 或者:before建立1px的邊框,然後通過適配不同裝置的畫素比,然後,

調整縮放的比例實現1px的效果

偽類的**如下,所示:

.border-bottom

.border-bottom::after

通過**查詢來適配這個效果:

*1.5倍屏的效果*/

@media only screen and (-webkit-min-device-pixel-ratio: 2.0)

} /*2倍屏的效果*/

@media only screen and (-webkit-min-device-pixel-ratio: 2.0)

}/* 3倍屏 */

@media only screen and (-webkit-min-device-pixel-ratio: 3.0)

這是我的想法,在這裡附上大神的做法

移動端1px實現

新增css 1px邊框時,在手機上顯示為粗線,解決辦法就是利用偽類設定1px邊框,然後根據裝置畫素比進行y軸的縮放,使其表現為真正的1px.stylus的語法 1.定義乙個函式。找到要加1px的標籤,新增定位和偽類。border 1px color position relative after d...

移動端1px邊框實現

一看上篇博文的發布日期,就知道自己好久沒有寫技術文章了。一是可能工作比較忙,二是可能自己也比較懶散啦。今天重新敲起鍵盤。來跟大家分享乙個最近新學到的技術。一是為鞏固自己的掌握程度。也希望能幫到有需要的同學。大神看到的話可以提點意見。幫助小弟更快的成長。好了正文從這開始 如何實現在移動裝置下1畫素的邊...

實現移動端1px邊框

最近學了一下vue的實戰課程,學習到了其中的乙個頁面設計技巧,覺得深有感觸,於是便寫個部落格記錄下來,以便下次查閱 專案中是通過vue stylus來實現的,那麼首先需要說一下實現原理,因為在移動端中物理畫素是裝置畫素的兩倍,那麼以平時在pc端中設計的1px 在移動端裝置中就是2px了,那麼,我們要...