似乎手机不同显示的宽度还不一样?
看起来不像,这种东西怎么能用感觉呢?推荐你把屏幕截屏然后放入ps中查看,看看是否如你想的一样不是1px。
- 如果是错觉的话那没什么,我做前端的,具体好像也没碰到过。
- 如果不是的话你打开chrome或者别的游览器的兼容手机调试下,看看
移动端(手机)上1像素px边框的实现方法,这里只是列出一种,自认为比较合理的方法,有其他的移动端(手机)上1像素px边框的实现方法您可以分享出来
1像素边框,在2倍屏幕上为2“占位”,3倍屏上为3“占位”,但设计师就要1“占位”
.content h1:after,
.content h2:after {
border-top: 1px solid #bfbfbf;
content: ' ';
display: block;
width: 100%;
position: absolute;
left: 0;
bottom: 0;
-webkit-transform-origin: left bottom;
}
/* Retina 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 三倍屏 适配 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.5),
only screen and (min--moz-device-pixel-ratio: 2.5),
only screen and (-o-min-device-pixel-ratio: 250/100),
only screen and (min-device-pixel-ratio: 2.5) {
.content h1:after,
.content h2:after {
-webkit-transform: scaleY(0.33333334);
transform: scaleY(0.33333334);
}
}
答案非原创,来自网络。楼主活用搜索引擎 可以解决很多问题的
由于高清屏的特性,1px是由2×2个像素点来渲染,border:1px在Retina屏下会渲染成2px的边框
实现方式
1.图片
2.阴影
3.缩放