使用css Reset适配不同浏览器css样式

目录：关于不同的浏览器再打开vue3项目的时候，是不可以避免，所以就有了这个css Reset

一、配置他的原因：

                                1、不同浏览器处理浏览器的兼容性。
                                2、跨浏览器样式表现统一。

二、使用css Reaet 的需求：

                                1、可以重置硬配置；

                                2、规范重置软配置；

                                3、也可以按照自己的风格去规定重置配置。

三、配置和使用

                                在src\assets\ 下新建css\reset.less，把css reset样式代码复制到reset.less文件中，如下:https://meyerweb.com/eric/tools/css/reset/

赋值这一部分所有的css代码

考虑到有些人不想跳转，所以这里我直接给大家带出来了

/* 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;
}

4、修改这其中的内容排布

这部分删除

// body {
	// 	line-height: 1;
	// }

添加这部分代码

// 配置初始化外层样式
	html, body, #app{
    		width: 100%;;
    		height:100%;
    		overflow:hidden;
			}

5、配置好了就一定要使用，在main.ts里面删除css源文件，添加自定义文件路径

        import ‘./style.css’    #####################删除
    // 引入自定义的兼容性css
        import './assets/css/reset.less'   ###############添加

结语：这样就实现了统一的css样式布局，它的作用会简化很多我们的原始样式，效果还是很不错的，希望对你有所帮助！