3-项目初始化2

这里主要是针对视口安装相应的插件以及配置,以及导入项目快捷图标

视口的好处：省去媒体查询动态计算屏幕每份大小，系统会自动计算，直接按照750px图片标注的大小

• lib-flexible

1 如何使用vw

1.1 安装相应的插件
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext cssnano --S
1）postcss-px-to-viewport
自动将项目中的px转换为vw
750设计图片，不同视口大小等比缩放
2）postcss-aspect-ratio-mini
重要用来处理img/iframe/video等元素的自适应问题，使元素根据宽高比自动计算出容器大小，实现等比缩放
3）post-write-svg
主要用来处理移动端1px的解决方案
主要使用的是border-image和background来做1px的相关处理
4）postcss-cssnext
css未来语法
5）cssnano
压缩
6）--S在开发和运行都要用
7）添加一个插件
npm i cssnano-preset-advanced --save-dev
1.2 修改相应的配置文件
文件名：postcssrc.js

在多个插件有相同的功能，比如自动添加前缀，只保留一个，避免冲突

image.png
image.png

1.3 告诉页面视口为设备宽度
meta:vp

image.png

2 设置项目快捷图标

2.1 将快捷图标拷贝到static文件加下（必须）
2.2 在index.html文件中导入.ico

image.png

然后，在访问网页的时候就可以在导航栏看到标志该网页的图标了
地址可以通过拖拽图片得到