1. 移动端 1px

移动端 1px 变粗的原因

<meta  name="viewport"  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/><!-- 代码解析 --><!--  name="viewport" content="width=device-width" 本页面的viewport宽度等于设备宽度。  initial-scale=1.0, maximum-scale=1.0:初始缩放值和最大的缩放值都是1。  user-scalable=no:禁止用户进行页面缩放-->

移动端 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);  }}

2.单文本和多文本溢出处理

2.1 单文本溢出

p {  margin: 0;  padding: 0;  width: 60px;  height: 18px;  font-size: 12px;  overflow: hidden; /*超出盒子隐藏*/  text-overflow: ellipsis; /*文本溢出包含元素时用省略号代替*/  white-space: nowrap; /*文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。*/}

2.2 多文本溢出

/*兼容器较差，webkit内核的浏览器，或者移动端可以使用。*/p {  margin: 0;  padding: 0;  width: 60px;  font-size: 12px;  display: -webkit-box; /*将对象作为弹性伸缩盒子模型显示*/  -webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式 。设置子元素在-webkit-box里面按垂直排列*/  -webkit-line-clamp: 2; /*限制在一个块元素显示的文本的行数。为了实现效果必须配合display: -webkit-box;-webkit-box-orient；overflow: hidden;*/  overflow: hidden;}/* 根据高度 / 显示的行数 = 行高*/.box {  /* 只显示五行 */  height: 100px;  line-height: 20px;  overflow: hidden;}

想要学习更多前端技术，可以关注“广州蓝景”微信公众号 进行详细的了解。想看什么内容也可以在评论区留言哟