お願いします、すべての責任あるデザイナーは処女座です...
ここには... 処女座を貶める意図はありません、ただ題材を借りて、強力な「ピクセルの目」の前で謙虚にひざまずいているだけです。
### 一、あなたは私の目です
ピクセルの目とは何でしょうか？
それは不思議な存在で、彼らは余光であなたを一瞥し、そしてあなたに言います：「気づいたんだけど、あなたの左の眉毛が右の眉毛より 1 ピクセル高いんだけど、調整してもらえますか？」
私の周りには、多くのデザインの同僚がいます。彼らは細部にまでこだわり、頻繁な修正のために開発者の気分を台無しにすることもあります。しかし、彼らの意見が正しいことは認めなければなりません。
最近、モバイル Web 開発をしていると、設計図に従って、toby は私の隣で修正を確認しています。私はもう万事うまくいったと思った時、toby はまだ違和感があると言いました - ボーダーが少し太いように見える？
その時、私は困惑しました。なぜなら、これは既に最も細いボーダーであり、コンピューター上では明確に表示されており、私は既に 1px のボーダーを設定していました。そこで私は説明し、少なくとも「見た目上」ボーダーが細くなるように色の変更を提案しました。しかし、toby は受け入れませんでした。彼の言い分では、このボーダーはセクシーに見えないとのことでした...
この世界の美的感覚は、細いことが美しいということですか、女性から線まで？そこで、セクシーなボーダーを探すために、いくつかの情報を集めた結果、実際に解決策を見つけました：
- 親要素の設定：scale(0.5,0.5)
- 子要素の設定：scale (2,2) スケーリングを元に戻し、原点は左上隅（0,0）/left top
これにより、親要素のボーダーは実際に縮小され、より細くなります。
### 二、汎用的な解決策
ブロック要素により細いボーダーを追加するための CSS クラスを使用します
.border-1px{
position: relative;
&:before, &:after{
border-top: 1px solid #c8c7cc;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
}
&:before{
top: 0;
}
&:after{
bottom: 0;
}
}
モバイルデバイスに適用：
@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio: 1.5){
.border-1px{
&::after, &::before{
-webkit-transform: scaleY(.7);
-webkit-transform-origin: 0 0;
transform: scaleY(.7);
}
&::after{
-webkit-transform-origin: left bottom;
}
}
}
@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio: 2){
.border-1px{
&::after, &::before{
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
}
}