移动端 1px 的问题

最新推荐文章于 2020-04-16 08:03:43 发布

cvper

最新推荐文章于 2020-04-16 08:03:43 发布

阅读量804

点赞数

分类专栏：理论文章标签：移动端 1px 实现方法

本文链接：https://blog.youkuaiyun.com/cvper/article/details/80097384

版权

理论专栏收录该内容

2 篇文章

订阅专栏

pc端你写一个边框 1px ,那就是1px 没什么异常，移动端可能在这个机器上细一点，那个机器上粗一点，

这就产生了问题，原因主要是屏幕的类型造成的，原因这里不探讨，只看解决方案：

先看看下面这两种方案：

   <!DOCTYPE html> 
 

   < 
  html 
  lang= 
  "en"> 
 


   < 
  head> 
 

   < 
  meta 
  charset= 
  "UTF-8"> 
 

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

   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 

   < 
  title>Document</ 
  title> 
 

   < 
  style> 
 
 
  .test { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  1 
  px 
  solid 
  #000; 
 
 
  margin: 
  0 
  auto; 
 

   } 
 

 
  .a1 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  0.5 
  px 
  solid 
  #000; 
 
 
  margin: 
  0 
  auto; 
 
 
  margin-top: 
  5 
  px; 
 

   } 
 

 
  .a2 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  1 
  px 
  solid 
  #fff; 
 
 
  border-bottom: 
  1 
  px 
  solid 
  #000; 
 
 
  box-shadow: 
  0 
  1 
  px 
  1 
  px 
  #fff; 
 
 
  margin: 
  0 
  auto; 
 
 
  margin-top: 
  5 
  px; 
 

   } 
 

 
  .a3 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  box-shadow: 
  inset 
  0 
  px 
  -1 
  px 
  1 
  px 
  -1 
  px 
  #000; 
 
 
  margin: 
  0 
  auto; 
 

   } 
 

   </ 
  style> 
 

   </ 
  head> 
 


   < 
  body> 
 

   < 
  div 
  class= 
  "test">常規設置1px像素</ 
  div> 
 

   < 
  div 
  class= 
  "a1">0.5px</ 
  div> 
 

   < 
  div 
  class= 
  "a2">box-shadow遮蓋</ 
  div> 
 

   < 
  div 
  class= 
  "a3">box-shadow凹陷</ 
  div> 
 

   </ 
  body> 
 


   </ 
  html> 
 

效果图：（iPhone 5s）

首先 A是正常情况下设置 1px 的时候显示的样式；

其次 B是设置0.5px的情况下显示的样式；（不是所有的机型都支持0.5px 这里只是用来对比）

然后 C是使用box-shadow遮盖border 实现的样式，这个方法我在网上看到，不过实际看来

一点效果没有，应该是个错误的方法吧，不做深究，有知道的小伙伴可以教教我，不胜感激；

最后 D是利用凹陷实现的边框，宽度没有问题，相当好了，但是可以看出，相较于正常的0.5px的

显示颜色上淡了一些，这是个缺点；

上面的两种方法证明利用凹陷实现1px 的边框是OK的，可以用的，仅此而已；下面再看看其它的方法：

这个方法是我在腾讯财经上看到的，来看看：效果图和代码部分

这个效果是利用transform:scale() 进行缩放产生 1px 的效果；

下面我们利用这个方法实现以下看看效果怎么样：

代码：

   <!DOCTYPE html> 
 

   < 
  html 
  lang= 
  "en"> 
 


   < 
  head> 
 

   < 
  meta 
  charset= 
  "UTF-8"> 
 

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

   < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge"> 
 

   < 
  title>Document</ 
  title> 
 

   < 
  style> 
 
 
  .test { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  1 
  px 
  solid 
  #000; 
 
 
  margin: 
  0 
  auto; 
 

   } 
 

 
  .a1 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  0.5 
  px 
  solid 
  #000; 
 
 
  margin: 
  0 
  auto; 
 
 
  margin-top: 
  5 
  px; 
 

   } 
 

 
  .a2 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  border: 
  1 
  px 
  solid 
  #fff; 
 
 
  border-bottom: 
  1 
  px 
  solid 
  #000; 
 
 
  box-shadow: 
  0 
  1 
  px 
  1 
  px 
  #fff; 
 
 
  margin: 
  0 
  auto; 
 
 
  margin-top: 
  5 
  px; 
 

   } 
 

 
  .a3 { 
 
 
  width: 
  100 
  px; 
 
 
  height: 
  50 
  px; 
 
 
  box-shadow: 
  inset 
  0 
  px 
  -1 
  px 
  1 
  px 
  -1 
  px 
  #000; 
 
 
  margin: 
  0 
  auto; 
 

   } 
 

 
  .a3::after{ 
 
 
  position: 
  relative; 
 
 
  top: 
  40 
  px; 
 
 
  content: 
  ''; 
 
 
  display: 
  block; 
 
 
  background: 
  #000; 
 
 
  width: 
  200 
  px; 
 
 
  height: 
  1 
  px; 
 
 
  transform: 
  scaleY( 
  0.5) 
 

   } 
 

   </ 
  style> 
 

   </ 
  head> 
 


   < 
  body> 
 

   < 
  div 
  class= 
  "test">常規設置1px像素</ 
  div> 
 

   < 
  div 
  class= 
  "a1">0.5px</ 
  div> 
 

   < 
  div 
  class= 
  "a2">box-shadow遮蓋</ 
  div> 
 

   < 
  div 
  class= 
  "a3">box-shadow凹陷</ 
  div> 
 

   < 
  div 
  class= 
  "a4">利用transform:scale()</ 
  div> 
 

   </ 
  body> 
 


   </ 
  html> 
 

显示效果：

可以看出这种方法也是OK的；

我们这里只是简单表现了一下一个1px 的线条如何实现，但是上面的线条位置并不是我想要的，或者说

我想实现的是div的四周边框1px 的线，下面再完整的实现一下：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width,initial-scale=1,maximum-scale=1, 
 
   minimum-scale=1,user-scalable=no"> 
 
   < 
  title>Document</ 
  title> 
 
   < 
  style> 
 
  .test { 
 
  position: 
  relative; 
 
  width: 
  100 
  px; 
 
  height: 
  200 
  px; 
 
   } 
 
  .test::after { 
 
  content: 
  ""; 
 
  box-sizing: 
  border-box; 
 
  position: 
  absolute; 
 
  left: 
  0; 
 
  top: 
  0; 
 
  border: 
  1 
  px 
  solid 
  #000; 
 
  width: 
  200 
  %; 
 
  height: 
  200 
  %; 
 
  transform: 
  scale( 
  0.5); 
 
  transform-origin: 
  0 
  0; 
 
   } 
 
  .abc { 
 
  width: 
  100 
  px; 
 
  height: 
  200 
  px; 
 
  border: 
  1 
  px 
  solid 
  #000; 
 
   } 
 
   </ 
  style> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  class= 
  "test">奥术大师多所多</ 
  div> 
 
   < 
  p 
  class= 
  "abc"></ 
  p> 
 
   </ 
  body> 
 
   </ 
  html>