html5 css reset,HTML5页面CSS Reset

/*------------------*/

/*reset*/

/*------------------*/

* {box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);}

html {

font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;

-ms-text-size-adjust: 100%;

-webkit-text-size-adjust: 100%;

}

body {

margin: 0;

line-height: 1.5;

color: #333333;

background-color: white;

height: 100%;

overflow-x: hidden;

-webkit-overflow-scrolling: touch;

}

body,

dl, dt, dd, ul, ol, li,

h1, h2, h3, h4, h5, h6,

pre, code, form, fieldset, legend, input, textarea,

p, blockquote, th, td, hr, button,

article, aside, details, figcaption, figure, footer, header, menu, nav, section {

margin: 0;

padding: 0;

border: 0;

}

a {

background: transparent;

text-decoration: none;

-webkit-tap-highlight-color: transparent;

color:orange;

}s

a:active {

outline: 0;color:crimson;

}

.bui-icon, address, cite, dfn, em, i, var {

font-style: normal;

}

/* 按钮文本不可选 */

button {user-select: none;}

img {vertical-align: middle;}

/* 加载不出来的图片不要显示灰色边框 */

img:not([src]),img[src=""] {opacity: 0;}

ul, ol {list-style: none;}

table {border-collapse: collapse; border-spacing: 0;}

input, select, button, textarea {font-size: 100%; font: inherit;}

html, body {height: 100%; overflow-x: hidden;}

/*清除浮动*/

clearfix {

*zoom: 1;

}

.clearfix:before,

.clearfix:after {

display: table;

line-height: 0;

content: "";

}

.clearfix:after {

clear: both;

}

@media screen and (min-width: 320px) {html{font-size:50px;}}

@media screen and (min-width: 360px) {html{font-size:56.25px;}}

@media screen and (min-width: 375px) {html{font-size:58.59375px;}}

@media screen and (min-width: 400px) {html{font-size:62.5px;}}

@media screen and (min-width: 414px) {html{font-size:64.6875px;}}

@media screen and (min-width: 440px) {html{font-size:68.75px;}}

@media screen and (min-width: 480px) {html{font-size:75px;}}

@media screen and (min-width: 520px) {html{font-size:81.25px;}}

@media screen and (min-width: 560px) {html{font-size:87.5px;}}

@media screen and (min-width: 600px) {html{font-size:93.75px;}}

@media screen and (min-width: 640px) {html{font-size:100px;}}

@media screen and (min-width: 680px) {html{font-size:106.25px;}}

@media screen and (min-width: 720px) {html{font-size:112.5px;}}

@media screen and (min-width: 760px) {html{font-size:118.75px;}}

@media screen and (min-width: 800px) {html{font-size:125px;}}

@media screen and (min-width: 960px) {html{font-size:150px;}}

移动端页面 css reset

这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方 ...

推荐几款主流的Css Reset

1.Eric Meyer’s “Reset CSS”(重置的很极端) 官方网址:CSS Tools: Reset CSS 2.HTML5 Doctor CSS Reset 官方网址:HTML5 Res ...

前端开发工程师 - 04.页面架构 - CSS Reset & 布局解决方案 & 响应式 & 页面优化 &规范与模块化

04.页面架构 第1章--CSS Reset 第2章--布局解决方案 居中布局 课堂交流区 水平列表的底部对齐 如图所示,一个水平排列的列表,每项高度都未知,但要求底部对齐,有哪些方法可以解决呢? & ...

常见标签的默认属性值及相互作用——关于CSS reset的思考

在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div{ padding:0px; ...

常用CSS Reset汇总

什么是Css Reset呢? 在 HTML标签在浏览器里有默认的样式,不同浏览器的默认样式之间也会有差别.在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率.所以解决的方法就是一开始 ...

网站常用css必备css reset

在我们写前端代码页面的时候,很多常用的CSS类都是固定的!但没有一个标准或者大家都按自己的方式去随意的写,这样就每次都重复写一些固定的类! 为此HTML5 Doctor(HTML5医生)为我们总结了一 ...

关于CSS reset的思考

关于CSS reset的思考 在现在的网站设计中使用reset.css用重置整个站点的标签的CSS属性的做法很常见,但有时候我们已经为了reset而reset,我们经常看到这样的reset代码 div ...

网站怎么布局能解决不同浏览器对CSS解析的差异,使用css reset

很多地方都提到过CSS Reset这个概念,而且细心的朋友会发现,许多大网站的CSS文件中也含有CSS Reset内容. CSS Reset是什么? 在HTML标签在浏览器里有默认的样式,例如 p 标 ...

由css reset想到的深入理解margin及em的含义