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 ...
随机推荐
- css层叠性和继承性
1.了解css层叠性 层叠性是什么?就是解决处理css选择器和属性冲突的能力.css的选择器权重是分大小,就是当多个选择器都选中了同一个标签时,听谁的??? 标签选择器 < 类选择器 < ...
- Mac系统丢失管理员
今天把osx变成平行用户,提示说要重启,但是一进来,我靠,自己的管理员用户变成了普通用户.我靠,有这么搞的嘛? 不能安装软件,不能https,不能保存密码,什么也不能做了. 网上一查,找到了几个解决方 ...
- Java—IO流 字节流
IO流(输入流.输出流),又分为字节流.字符流. 流是磁盘或其它外围设备中存储的数据的源点或终点. 输入流:程序从输入流读取数据源.数据源包括外界(键盘.文件.网络…),即是将数据源读入到程序的通信通 ...
- TreeMap----的实现原理(红黑树)
TreeMap的实现是红黑树算法的实现,所以要了解TreeMap就必须对红黑树有一定的了解,其实这篇博文的名字叫做:根据红黑树的算法来分析TreeMap的实现,但是为了与Java提高篇系列博文保持一致 ...
- Thrift学习笔记—IDL基本类型
thrift 采用IDL(Interface Definition Language)来定义通用的服务接口,并通过生成不同的语言代理实现来达到跨语言.平台的功能.在thrift的IDL中可以定义以下一 ...
- Qt::FocusPolicy的使用
http://blog.csdn.net/imxiangzi/article/details/50742813
- iframe加载顺序导致数据访问出现问题
背景: 一个页面A内有一个iframe,src指向了B页面. 问题: 页面A通过Ajax获取服务器数据,并赋值给了页面A的全局变量gData,页面B要用到页面A的数据gData.那么问题来了当B访问g ...
- ZT 为什么pthread_cond_t要和pthread_mutex_t同时使用 || pthread/Linux多线程编程
为什么线程同步的时候pthread_cond_t要和pthread_mutex_t同时使用 (2009-10-27 11:07:23) 转载▼ 标签: 杂谈 分类: 计算机 举一个例子(http:// ...
- 关于浏览器被http://www.51jetso.com/劫持
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wwkaven/article/details/36373447 近期,新装了一下系统.安装软 ...
- CF13C Sequence
嘟嘟嘟 偶然看到的这道题,觉得有点意思,就做了. 首先题里说修改后的数列只能出现修改前的数,那么状态之间的转移也就之可能在这些数之间. 令f[i][j]表示第 i 个数改成原序列第 j 小的数时的最小 ...