移动端css开发小技巧

2021-04-15 前端移动端 PV:

css 设置 iPhoneX 的安全距离

如果元素上设置了postion属性，需要设置在该属性上，只设置在 body 上会无效。
也可以作用于margin-top属性上，重要的是安全距离值。

padding-top: constant(safe-area-inset-top); //为导航栏+状态栏的高度 88px
padding-left: constant(safe-area-inset-left); //如果未竖屏时为0
padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
padding-bottom: constant(safe-area-inset-bottom); //为底下圆弧的高度 34px
padding-bottom: env(safe-area-inset-bottom);

tips: 注意：当 viewport-fit=contain 时 env() 是不起作用的，必须要配合 viewport-fit=cover 使用。对于不支持 env() 的浏览器，浏览器将会忽略它。

tips:之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：
注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

1 2	padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 / padding-bottom: env(safe-area-inset-bottom); / 兼容 iOS >= 11.2 */

新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

1	<meta name="viewport" content="width=device-width, viewport-fit=cover" />

`img`标签的图片，保持原有图片比例尺寸，裁剪

img {
  width: 1.11rem !important;
  height: 1.275rem !important;
  object-fit: cover;
  object-position: center;
}

移动端去掉滚动条的样式

*::-webkit-scrollbar {
  width: 0 !important;
  display: none !important;
}

禁止 h5 页面在移动端左右拖动

后来发现是因为自己设置某个div元素样式的宽度100vw,没有设置box-sizing,导致出现了横向滚动条.

移动端禁止页面背景拖拽

1
2
3

/* 禁止页面拖拽 */
touch-action: none;
pointer-events: auto;

顶部标题或底部下单等按钮开发时注意 fixed

不要每次测试提个 bug,开发过程中要有意识。

移动端`1px`适配

.border-bottom-1px {
  border-bottom: 1px solid #eee;
  [data-dpr="1"] & {
    border-bottom: 1px solid #eee;
  }
  [data-dpr="3"] & {
    border-bottom: 3px solid #eee;
  }
}

避免 300 毫秒的延迟

/* 避免点击300ms延迟 */
* {
  touch-action: manipulation;
}

内容 css 超出三行`...`三个点展示

背景: 有兼容性问题
在谷歌、QQ 浏览器、搜狗浏览器，360 浏览器的极速模式下是正常显示省略号的，在火狐、ie、360 兼容模式下是没有显示省略号的。

.content {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

在开发过程中，发现在苹果手机设备上，内容超出时，不能被隐藏。
解决方法：发现是因为样式没有穿透的原因，需要用到Vue的深度选择器/deep/

tips: vue 的深度选择器>>>或/deep/或::v-deep的用法,如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符。有些像 Sass 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

举例 1：

.content {
  margin: 0.15rem 0;
  font-family: PingFangSC-Regular;
  font-size: 0.14rem;
  color: #777777;
  line-height: 0.2rem;
  display: -webkit-box;
  overflow: hidden;
  white-space: initial;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  /deep/ p,
  /deep/ span {
    display: initial;
  }
}

举例 2:控制v-html中的样式————

标签部分

1
2
3

<div class="bottom-content">
  <div class="content" v-html="info.content"></div>
</div>

样式部分

.content >>> img {
  width: 100% !important;
}
.content /deep/ img {
  width: 100% !important;
}

`calc`兼容性问题

发现 iPhone5 的机型，calc属性不生效。所以需要额外再写上本身的样式；

.bottom-spacing {
  // 设置iPhone X的安全距离
  padding-bottom: 1rem;
  padding-bottom: calc(constant(safe-area-inset-bottom) + 1rem);
  padding-bottom: calc(env(safe-area-inset-bottom) + 1rem);
}

前端识别 string 中的`\n`自动换行

只需要在显示结果的样式上加上：white-space: pre-line;属性就可以了。

超出两行(或 n 行)三个点显示

.product-title-name {
  font-size: 0.19rem;
  color: #121212;
  line-height: 0.23rem;
  max-height: 0.46rem;
  overflow: hidden;
  word-break: break-all;
  font-weight: bold;
  text-overflow: ellipsis;
  display: -webkit-box;
  /*! autoprefixer: off */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

css 实现三角形、菱形

三角形利用 border 的盒模型实现，border-left 就可以

.test {
  border: 30px solid transparent;
  border-bottom: 30px solid cyan;
  width: 0;
}

菱形——可以用两个 div 拼接；或者一个正方形的 div 去transform 45°

`img`没有 src 属性时(未加载完毕时)自动出现边框，如何去掉？

img[src=""],
img:not([src]) {
  opacity: 0;
}

`justify-content`兼容性问题

此属性在部分手机上有兼容性问题，改成justify-content: flex-end;就好了

1	justify-content: right;

css 实现从左到右渐变，背景色与背景图片融为一体，并且图片有透明度

设置图片的透明度，只支持png格式的

/* 从左到右 */
background: linear-gradient(to right, #140554, #30087c, #140554),
  url(https://imagev2.xmcdn.com/storages/9055-audiofreehighqps/0E/55/GKwRIW4FbRqaAAJTdAD49wUG.png);
background-size: 100%;
background-repeat: no-repeat;

css 设置 iPhoneX 的安全距离

img标签的图片，保持原有图片比例尺寸，裁剪