css样式化规划,css样式初始化以及rem布局(示例代码)

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

}

/*用于移动端rem匹配 100px = 1rem*/

/*iphone6*/@media (min-device-width: 375px)and(max-device-width: 667px)and(-webkit-min-device-pixel-ratio: 2){html {

font-size:117.1875px;

}}/*iphone6plus*/@media (min-device-width: 414px)and(max-device-width: 736px)and(-webkit-min-device-pixel-ratio: 3){html {

font-size:129.375px;

}}