为什么要初始化CSS样式?
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然,初始化样式会对SEO有一定的影响,但鱼和熊掌不可兼得,但力求影响最小的情况下初始化。
最简单的初始化方法就是: * {padding: 0; margin: 0;} (不建议)
使用方法:
可以直接复制代码,存到项目的css中,排网页时引入即可
/*web app 全局样式*/
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,
font, 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,header,input,figure{
margin: 0; padding: 0;}
html{
/* 禁用iPhone中Safari的字号自动调整 */
-webkit-text-size-adjust: none;
/*
使用rem
默认 1rem =16px 32px = ? rem;
font-size: 16px; //1.原始的
font-size: 10px; //2.在1的基础上 10/16*100% 62.5% 1rem = 10px
font-size:62.5%; <=> font-size: 10px;
//再放大10倍,更准确,好计算
font-size: 100px; //3.在2的基础上放大10倍 62.5%*10 = 625% 得到 1rem = 100px,
把px 换成rem ,除以100就可以了。
50px = 50 / 100 = 0.5rem
100px = 1rem
10px = 0.1rem
*/
/* 闪烁的问题 */
/* font-size: 625%;使用js动态计算,这里可以省略,1rem = 100px, 把px 换成rem ,除以100就可以了。 */
font-size: 62.5%;
}
body{
font-family: "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei UI", "Microsoft YaHei", SimHei, "\5B8B\4F53", simsun, sans-serif;
/* 闪烁的问题 */
/* font-size: 0.16rem;0.16rem 转为px, 100*0.16 = 16px */
font-size: 1.6rem;
}
/* 设置HTML5元素为块 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
/* 设置图片自适应调整 */
img {display:block;max-width: 100%; height: auto; width: auto\9; /* ie9以下 */ }
/*多媒体自适应*/
.video embed, .video object, .video iframe { width: 100%; height: auto; }
li { list-style: none; }
a { text-decoration: none; cursor: pointer;color: #555756; }
a:hover {text-decoration: none; }
a img { border: none; }
a > img { vertical-align: bottom; }
/*去掉 input 默认边框*/
input{outline:none;border:0;}
/*CSS3盒子模型*/
box-sizing:border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }