网页开发常见问题以及解决方案

移动端 1px 变粗的原因

移动端window对象有个devicePixelRatio属性，为设备像素比。

drp = window.devicePixelRatio，也就是设备的物理像素与逻辑像素的比值。

以 iphone6 为例 它的物理像素是 750，逻辑像素为 375 ，所以 iphone6 的 drp = 2 。所以 css 里面写的 1px 宽度映射到物理像素上就有 2px。

一、使用小数来写 px 值

在 ios8+ 中当 drp = 2 的时候使用 0.5px ，使用媒体查询

.border {
  border: 1px solid #999;}@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .border {
    border: 0.5px solid #999;
  }}@media screen and (-webkit-min-device-pixel-ratio: 3) {
  .border {
    border: 0.333333px solid #999;
  }}

二、:before, :after 与 transform

//所有边框.mx-1px {
  position: relative;}.mx-1px:before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
  border-radius: 0;
  top: 0;
  left: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  box-sizing: border-box;}@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px:before {
    width: 200%;
    height: 200%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }}//上边框.mx-1px-top {
  position: relative;}.mx-1px-top:before {
  position: absolute;
  content: '';
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  border-top: 1px solid #ccc;
  top: 0;
  left: 0;}@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px-top:before {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }}//下边框.mx-1px-bottom {
  position: relative;}.mx-1px-bottom:before {
  position: absolute;
  content: '';
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  width: 100%;
  height: 1px;
  bottom: -1px;
  border-bottom: 1px solid #ccc;
  left: 0;}@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .mx-1px-bottom:before {
    -webkit-transform: scaleY(0.5);
    transform: scaleY(0.5);
  }}

p {
  margin: 0;
  padding: 0;
  width: 60px;
  height: 18px;
  font-size: 12px;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap; }

p {
  margin: 0;
  padding: 0;
  width: 60px;
  font-size: 12px;
  display: -webkit-box; 
  -webkit-box-orient: vertical; 
  -webkit-line-clamp: 2; 
  overflow: hidden;}.box {
  
  height: 100px;
  line-height: 20px;
  overflow: hidden;}