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;}}
HTML5页面CSS Reset的更多相关文章
- 移动端页面 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的含义
由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
随机推荐
- KNN 与 K - Means 算法比较
KNN K-Means 1.分类算法 聚类算法 2.监督学习 非监督学习 3.数据类型:喂给它的数据集是带label的数据,已经是完全正确的数据 喂给它的数据集是无label的数据,是杂乱无章的,经过 ...
- android 实现类似微信缓存和即时更新好友头像
引言 使用微信时我们会发现,首次进入微信的好友列表时,会加载好友头像,但是再次进入时,就不用重新加载了,而且其他页面都不用重新加载,说明微信的好友头像是缓存在本地的,然后好友修改头像后,又会及时的更新 ...
- Android学习——ListView的缓存机制
在使用ListView的时候,需要加载适配器和数据源,这篇文章主要介绍一下ListView的使用以及利用ListView的缓存机制来减少系统的初始化时间. ListView的使用 ListView和V ...
- Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)
背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...
- JDBC事务和数据库事务嵌套的讨论 .
首先必须执行con.setAutoCommit(false)方法,将JDBC事务设置为手动提交,否则手动提交con.commit()无效,手动回滚con.rollback()引发SQLExceptio ...
- 线程 Z
原文:http://www.albahari.com/threading/part5.aspx 专题:C#中的多线程 1并行编程Permalink 在这一部分,我们讨论 Framework 4.0 加 ...
- Batch Normalization 笔记
原理 BN的效果 Why BN works? 原理 输入层可以归一化,那么其他层也应该可以归一化.但是有个重要的问题,为什么要引入beta和gamma. 为什么要引入beta和gamma 不总是要标准 ...
- 关于mysql启动问题---mysqld_safe mysqld from pid file * ended
#在[mysqld]中添加: datadir = /usr/local/mysql/data #添加 log-error = /usr/local/mysql/data/error.l ...
- 解决yii2.0里url重写引用js路径问题(@web/的用法)
在实际项目中,为了seo优化,使用了伪静态,开启了url重写
- web API之post参数传递
最近公司开发一个新产品,前端用的vue+element,后端用的.net core ,刚开始接触这块,接口写完后在调用接口时总出现问题,尤其是post传递参数时,很多时候都获取不到参数,没办法接口都要 ...