vue样式初始化_在vue中使用Normalize初始化样式

安装使用Normalize

首先安装normalize.css:

npm i normalize.css --save-dev

遇到的问题：

import 'normalize.css'

报错：

原因没有安装：css-loader   和style-loader

npm install css-loader style-loader

就解决了。

在vue-cli中main.js中import 'normalize.css'就可以了。

Normalize的作用

Normalize的作用就是统一浏览器的初始样式

html与body 元素

/**

* 1. 设置全局的字体为sans-serif, 关于中文字体的设置可参考Amaze UI.

* 2. 防止 iOS 横屏字号放大，同时保证在PC上 zoom 功能正常.

*/

html {

font-family: sans-serif; /* 1 */

-ms-text-size-adjust: 100%; /* 2 */

-webkit-text-size-adjust: 100%; /* 2 */

}

第2个问题场景是这样，苹果IOS设备调整后会自动调整文字的大小，按照苹果的意图是为了提升用户体验，比如竖屏状态下是14px，转换为横屏时就变成了20px，把text-size-adjust:100%就不会调整字体大小了。如果把值设置为'text-size-adjust:none'，那么就会导致用户无法放大缩小字体了。

/**

* 修复浏览器默认边距，统一效果.

*/

body {

margin: 0;

}

HTML5 元素 display definitions

/**

* 修复 IE 8/9，HTML5新元素不能正确显示的问题，定义为block的元素

* 修复 IE 10/11，details 和 summary 定义为 block 的元素

* 修复 IE 11，main定义为 block 的元素.

*/

article,

aside,

details,

figcaption,

figure,

footer,

header,

hgroup,

main,

menu,

nav,

section,

summary {

display: block;

}

这个问题想必大家都已经非常清楚，当低版本浏览器遇到不识别的元素时，会默认把他们当成内联元素(inline)，这里重新定义成为block元素。

/**

* 1. 修复 IE 8/9, HTML5新元素不能正确显示的问题,定义为inline-block元素

* 2. 修复Chrome, Firefox, Opera的progress元素没有以baseline垂直对齐.

*/

audio,

canvas,

progress,

video {

display: inline-block; /* 1 */

vertical-align: baseline; /* 2 */

}

progress是HTML5的新标签，可以定义进度条，但是它Chrome, Firefox, 和Opera并没有已baseline垂直对齐。

/**

* 对不支持controls属性的浏览器, audio元素给以隐藏.

* 移除iOS5设备中多余的高度.

*/

audio:not([controls]) {

display: none;

height: 0;

}

在IE8之前的浏览器是不支持controls属性, 这里的办法是直接隐藏该元素

/**

* 修复 IE 7/8/9, Firefox 3 和 Safari 4 中hidden属性不起作用的问题.

* 在 IE, Safari, Fire