开发准备工作

icon图标准备

项目图标文件会在src/assets/styles目录下，assets是vue项目中存放项目的静态资源文件，如图片、字体等的文件夹。

图标生成

把整理好的图标通过icomoon网站生成demo，再插入到项目文件夹中，下载好的文件如下：

image-20240312180117025

打开demo可以看到生成情况

image-20240312164407305

导入

  1. 将fonts文件夹粘贴到src/assets/styles目录下
  2. style.css改名为icon.css粘贴到src/assets目录下
    image-20240312180449988

viewport属性配置

为了避免手机上用户缩放误触

  • viewport用来设置用户在手机上的可视区域
  • width=device-width：指定viewport宽度为设备宽度，
    initial-scale=1.0：指定默认缩放比例为1:1
  • 通过maximum-scale和minimum-scale限定屏幕缩放比例为1:1
    通过user-scalable限制用户对屏幕进行缩放

在index.html文件中找到viewport属性，添加

1
maximum-scale = 1.0,minimum-scale=1.0,user-scalable=no

image-20240312181109527

rem配置

  • rem是css3新增的一个相对长度单位
  • rem的值相当于根元素font-size值的倍数
    1rem =根元素font-size
    2rem =根元素font-size ＊ 2
  • DOMContentLoaded事件动态设置根元素font-size
    html.style.fontSize = window.innerWidth/ 10 + ‘px’
    这样子设置可以使得屏幕宽度发生变化时，rem也发生变化

在app.vue中添加

1
2
3
4
5
6
7
// 页面加载完成后设置根元素字体大小
document.addEventListener('DOMContentLoaded', () => {
  const html = document.querySelector('html')
  let fontSize = window.innerWidth / 10
  fontSize = fontSize > 50 ? 50 : fontSize
  html.style.fontSize = fontSize + 'px'
})

引入reset.scss和global.scss全局样式

  • reset.scss的目的是为了消除不同浏览器默认样式的不一致性
  • global.scss规定了整个站点的公共样式、公共方法和公共参数等
    • global中实现px2rem方法，将px转化为rem

reset.scss

这个是固定的，自己添加的是html, body

放在style文件夹下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html, body{
    width: 100%;
    height: 100%;
    font-family: 'PingFangSC-Light','PingFang SC','STHeitisC-Light','HeLvetica-Light','Arial','sans-serif';
}

global.scss

路径与reset一样

实现px2rem与居中方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@import 'reset';

$fonsSize: 37.5;

@function px2rem($px) {
    @return ($px / $fonsSize)+rem;
}

@mixin center() {
    display: flex;
    justify-content: center;
    align-items: center;
}

记得在main.js中引用

image-20240312182040765