Vue2 --响应式样式vw、自定义代码片段、引入公共图标库

移动端响应式样式 – vw/vh

vw:即view width–视口宽度的意思,把视口分成了100份,1vw 相当于 1% 的 视口宽度(vh同理)

为什么用vw而不用% ?
因为 % 是相对于父级元素，而不是屏幕,如果是百分号作为单位, 那么宽和高 各自会用不同的标准来取值

使用方法

vw是动态的,计算方法为 设计稿中量取素材到的像素/设计稿的款的像素 = 素材的vw/100vw
即 素材的vw = 设计稿中量取素材到的像素*100vw/设计稿的款的像素
假设一个文本框在宽为540px的设计稿量取到高为40px,那么在css中应该写为

//如果是less文件中,calc可以去掉
div{
height:calc(40/540*100vw); 
}

因为在移动端项目需要大量用到该公式,所以可以设置自定义代码片段

自定义代码片段

在vscode中点设置 -> 用户代码片段 -> 新建全局用户代码文件 -> 填入自定义代码 (如:vw)

• 配置

	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	
	"vw适配公式": {
		// 生效范围
		"scope": "less,sass,scss,vue",
		// 缩写
		"prefix": "vw",
		// 代码段主体,$1为代码输入后光标所处位置
		"body": [
		//这里的540是默认稿纸的宽
			"$1/540*100vw",
		],
		// 描述
		"description": "vw适配公式"
	}

配置完成后出入缩写vscode就会自动弹出提示,按tab即可使用

引入公共图标库

在App.vue的style中用@import url('css链接');即可全局使用




额外的查漏补缺:
CSS关键词 – inherit(属性继承)
用于清除默认样式,继承父元素该属性的样式,如果父元素没有,则会往再上一层的父元素查找
如:

a { 
	color:inherit;
}