2021-03-16 更新

1.旋转元素遇到的问题

想要某块元素实现旋转，通常情况下使用 css 的 transform 属性设置rotate(角度deg)即可。如下

1
2
3
4
5
6
div {
  // 使用transform旋转
  transform: rotate(30deg);
  -ms-transform: rotate(30deg); /* IE 9 */
  -webkit-transform: rotate(30deg); /* Safari and Chrome */
}

但是很多情况下，我们使用了旋转后发现效果并不是期待的那样，也许就需要用到我接下来说的属性来解决。

rotate 旋转属性默认都是以自身元素的中心为圆心来旋转，如下图。如果我们希望它不是围绕自身元素的中心旋转，这时就需要 transform-origin 属性来修改旋转圆心（这里只介绍 transform-origin 两个参数 2d 平面的旋转用法。3 个参数的 3d 用法暂不考虑）
在这里插入图片描述

我们希望黄色区域旋转 90 度后与白色区域重叠，就需要对旋转中心进行设置。将圆心设在如下位置后就可以达到效果
在这里插入图片描述

1
2
3
4
5
6
7
8
9
/* transform-origin的使用语法 */
transform: rotate(90deg)
transform-origin: x-axis y-axis;
-ms-transform-origin: x-axis y-axis;
-webkit-transform-origin: x-axis y-axis;
-moz-transform-origin: x-axis y-axis;
// 可取的值
x-axis： left、center、right、length、%
y-axis： top、center、bottom、length、%

以上面的实例来说，只需要设置黄色区域的样式内容如下即可达到想要的结果

1
2
3
4
5
6
7
8
9
 {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform-origin: 外部div宽度的一半 50%;
  -ms-transform-origin: 外部div宽度的一半 50%;
  -webkit-transform-origin: 外部div宽度的一半 50%;
  -moz-transform-origin: 外部div宽度的一半 50%;
}

2.移动端设备横竖屏切换时字体大小的问题

做移动端的项目时，发横竖屏切换浏览器会默认改变 html 元素的 font-size 属性，导致横屏时的字体会比竖屏时的字体看起来更大。

仔细对比发现，在横屏时字体的大小和竖屏时字体的大小比例等于移动设备的屏幕高度比上宽度。简言之，如果移动设备的高度是宽度的两倍，那么横屏时的字体就会是竖屏时的字体的两倍大小。 这样的用户体验相对较差，于是便想要解决这个问题。

在网上搜了解决方案。大多看到的都是说给 body 添加如下样式:

1
2
3
4
5
6
body {
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  text-size-adjust: none;
}

在 MDN 官网查找了该 text-size-adjust 属性，官网介绍为：在这里插入图片描述

我在当前项目尝试该解决办法后发现并不能生效，横屏时的字体还是会比竖屏时字体更大。

于是我想或许可以给 html 元素添加一个固定大小的 font-size 值，让它横屏时也和竖屏一样大小。但我设置后发现，在代码里写的是 font-size: 37.5px 但是到浏览器打开后会变成 font-size: 1rem 并且字体看起来比竖屏时还要小。

为了弄清楚 rem 和 px 的区别。看了网上的介绍后，大致总结为如下：

1
2
3
4
1.px是绝对单位，代表像素。
2.rem是相对单位，相对的是根元素的大小。也就是html元素的大小
3.默认情况下html的字体大小 1rem = 16px
更多的内容可以查看 (http://caibaojian.com/rem-and-px.html)

设置固定 px 是行不通了。但是我们从以上知道，横屏时默认转换为 1rem 代表的是 16px。竖屏时是 37.5px。那么只需要设置横屏时 html 的 font-size 为 37.5/16 = 2.34 rem 即可。

拓展字体大小单位 %

1
2
3
4
5
任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中
的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px,
这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，
然后换上em作为单位就行了。

从以上信息可以知道字体的大小关系： 16px = 100% 那么我想要设置字体大小为 37.5px。只需要知道 37.5px 和 16px 的比值，然后将这个比值设置为 html 的 font-size 的百分比大小，那么横屏时的字体大小就和竖屏时字体大小一样为 37.5px 了。求解得出 37.5/16 = 2.34375；就约等于 234.38%。设置后横屏时的字体和竖屏时的字体看起来相差无几。

至此，通过以上两种方法都可以解决当前问题。

3.js 中数组的 map 方法

应用场景一：

一个对象数组，想要将该对象中的一个或多个属性单独抽出来组成新的数组。使用 map 方法

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var array = [
  { a: 1, b: 10, c: 4 },
  { a: 2, b: 20, c: 5 },
  { a: 3, b: 30, c: 6 },
]
const abs = array.map((e) => {
  const obj = {
    a: e.a,
    b: e.b,
  }
  return obj
})

// abs   [{a: 1, b: 10}, {a: 2, b: 20}, {a: 3, b: 30}]

应用场景二：

一个对象数组，想要将该对象中的第一个键值对的值变成新数组对象中的键，第二个键值对的值变成新数组对象中的值。

举例：

1
2
3
4
5
6
7
8
9
10
11
12
var array = [
  { aaa: 'name', bbb: 'Jhon' },
  { aaa: 'age', bbb: '20' },
  { aaa: 'sex', bbb: 'male' },
]
const abs = array.map((e) => {
  let obj = {}
  obj[e.aaa] = e.bbb
  return obj
})

// abs  [{name: "Jhon"}, {age: "20"}, {sex: "male"}]

更多 map 的用法可以参考 Array.prototype.map

更多内容待更新…

2021-03-22 更新

1.移动端浏览器上下滑动问题

在开发移动端的时候，上下滑动屏幕会导致整个页面跟着手指上下滑动。（例如下拉到顶部时，继续下拉，页面会被继续下拉而顶部显示空白）虽说这个效果并不影响用户体验，但是在开发一个下拉功能的时候，发现影响很大。于是就要解决该问题

解决这个问题也很简单，就是阻止默认事件。如下代码所示：

1
2
3
4
5
6
7
8
func(e){
	e.preventDefault();
}
document.body.addEventListener(
	"touchmove",
	func,
	{ passive: false }
); // passive设置为true时，表示 listener 永远不会调用 preventDefault()。这里设置为false。用来兼容ios和Android都可以生效

阻止默认事件后会让整个页面内的滚动事件都无法加载。这个处理方法也很简单，只需要移除这个阻止默认事件的监听即可：

1
2
3
4
5
6
7
8
func(e){
	e.preventDefault();
}
document.body.removeEventListener(
	"touchmove",
	func,
	{ passive: false }
);

2.vue 项目中 img 的 src 属性设置

在 vue 项目中，设置 v-for 循环显示多个图片，每个图片的 src 都是当前项目的 asserts 文件夹下的文件。通常默认都是使用如下方式来显示图片

1
<img src="../../asserts/images/logo.png" />

但是当我们将 src 属性的值设置为 data 中的变量后，这样引用就会无法在页面上显示。

1
2
3
4
5
6
7
8
9
10
11
12
13
<div>
	<img :src="imgSrc">
</div>

<script>
export default {
  data() {
    return {
      imgSrc: '../../asserts/images/logo.png',
    }
  },
}
</script>

解决办法：

1.把图片放在 src 同级的 static 文件夹下。 2.把图片放在 cdn 上，把网络地址存在 imgUrl 里，然后直接去展示。 3.图片放在 assets 文件夹，然后在 data 里面 require 进图片