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

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;}