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

HTML5页面CSS Reset的更多相关文章

  1. 移动端页面 css reset

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

  2. 推荐几款主流的Css Reset

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

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

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

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

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

  5. 常用CSS Reset汇总

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

  6. 网站常用css必备css reset

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

  7. 关于CSS reset的思考

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

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

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

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

    由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...

随机推荐

  1. qwewq

  2. Android学习——自定义控件(一)

    由于之前在实习生面试的时候,被面试官问到有关自定义控件的问题,但没有回答上来,于是回来后便学习了关于自定义控件的相关知识. 自定义控件介绍 自定义控件,按我的理解,大体上分为两种.一种是自己绘图或者加 ...

  3. WCF传输协议

    典型传输协议下的(1)HTTP和HTTPSHTTPS(安全超文本传输协议).它是为了在WWW上解决安全的数据传输而设计的.HTTS是采用了SSL的HTTP,SSL是一种加密协议.它们默认的端口号分别是 ...

  4. SQL Server ->> WITH RESULT SETS子句

    SQL Server 2012对EXECUTE子句引入了WITH RESULT SETS选项,用于对EXECUTE语句执行的存储过程或者动态语句结果进行一个指定数据类型的转换,这样可以避免一种情况就是 ...

  5. Intellij idea用快捷键自动生成序列化id

    ntellij idea用快捷键自动生成序列化id 类继承了Serializable接口之后,使用alt+enter快捷键自动创建序列化id 进入setting→inspections→seriali ...

  6. io操作的要素

    文件 操作. 操作说明 数据

  7. 体验了Sublime + Emmet,才体会到原来前端开发可以这么痛快!

    从当初用notepad写出第一个web页面,到现在偶尔使用Editplus做一些HTML5的消遣,不知不觉已经15年了  --! 在这中间,和那些老顽固一样,坚决远离FP.DW那些半自动的前端开发工具 ...

  8. 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

    thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...

  9. Kali-linux设置ProxyChains

    ProxyChains是Linux和其他Unices下的代理工具.它可以使任何程序通过代理上网,允许TCP和DNS通过代理隧道,支持HTTP.SOCKS4和SOCKS5类型的代理服务器,并且可配置多个 ...

  10. web.xml中Filter的作用

    Servlet中的过滤器Filter是实现了javax.servlet.Filter接口的服务器端程序,主要的用途是过滤字符编码.做一些业务逻辑判断等.其工作原理是,只要你在web.xml文件配置好要 ...