常用的CSSreset整理
说道CSSreset,大家又爱又恨,cssreset好处是,覆盖了浏览器的默认样式,使前端攻城狮能更加精确的添加样式,各个浏览器中的界面效果都相同。可是大量的、固定的CSSreset也给网页加载带来一定阻碍,很多元素及属性网页中根本就没用到。
本人一直坚持认为在各个浏览器界面效果相同的情况下CSSreset还是越少越好,今天就给大家总结了一下PC端和移动端网页中常用的CSSreset.
请记住最好的CSSreset并不是一成不变的,而是应根据网页的需求而添加的,所以在用不到的情况下最好删除,避免加载过多的CSS而影响网页性能。
PC端CSSreset
/*PC css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%} /*继承body设定的字体大小*/
body{font-family: "Microsoft YaHei",Tahoma,Arial,Simsun,sans-self;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;} /*除去浮动*/
.clearfix{zoom:1;}
a:hover{text-decoration: none;}
ul,ol{list-style: none;margin:0;padding:0;} /*当要添加小图标时可修改*/
img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} /*在IE下除去边框和底部空白*/
em,i{font-style: normal} /*如需默认样式可修改*/
input,select,textarea{vertical-align:middle;outline:none;} /*出去获得焦点下的蓝色边框*/
textarea{resize:none;} /*禁止用户缩放文本框*/
table {border-collapse: collapse;border-spacing: 0;}
button,input[type="button"],input[type="reset"],input[type="submit"] {cursor:pointer;-webkit-appearance:button;-moz-appearance:button;} /*按钮初始化*/
input::-moz-placeholder,textarea::-moz-placeholder {color: #ccc;} /*修改placeholder文字颜色*/
input:-ms-input-placeholder,textarea:-ms-input-placeholder {color: #ccc;}
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;}
移动端CSSreset
/*MT css reset*/
body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}
h1,h2,h3,h4,h5,h6{font-size:100%} /*继承body设定的字体大小*/
/* 根据屏幕大小改变文字大小 */
html{font-size:20px;} /*chorme下设置为10px无效,推荐设置为20px,1rem=20px*/
@media screen and (max-width:768px){ /*手机屏幕*/
html{font-size: 15px;}
}
@media screen and (min-width: 768px) and (max-width:992px){ /*平板屏幕*/
html{font-size: 20px;}
}
@media screen and (min-width: 992px){ /*电脑屏幕*/
html{font-size: 25px;}
}
body{font-family: "Droid Sans Fallback","Heiti SC","Droid Sans",Helvetica,"Helvetica Neue",sans-self; color:#555; background-color:#F7F7F7;}
.clearfix:after{content:"."; display:block; visibility:hidden; height:0; clear:both;} /*除去浮动*/
a:hover{text-decoration: none;}
ul,ol{list-style: none;margin:0;padding:0;}
img {max-width: 100%;height: auto;} /* 图片自适应 */
em,i{font-style: normal} /*如需默认样式可修改*/
button,input,select,textarea{vertical-align:middle;outline:none;} /*出去获得焦点下的蓝色边框*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder {color: #ccc;} /*修改placeholder文字颜色*/
常用的CSSreset整理的更多相关文章
- .NET平台常用的框架整理
基于.NET平台常用的框架整理 DotNet | 2016-03-31 17:13 (点击上方蓝字,可快速关注我们) 来源:天使不哭 链接:http://www.cnblogs.com/hgmyz/p ...
- iOS 常用三方类库整理
iOS 常用三方类库整理 1:基于响应式编程思想的oc 地址:https://github.com/ReactiveCocoa/ReactiveCocoa 2:hud提示框 地址:https://gi ...
- 常用js方法整理common.js
项目中常用js方法整理成了common.js var h = {}; h.get = function (url, data, ok, error) { $.ajax({ url: url, data ...
- mysql copy表或表数据常用的语句整理汇总
mysql copy表或表数据常用的语句整理汇总. 假如我们有以下这样一个表: id username password ----------------------------------- 1 a ...
- 基于php常用正则表达整理(上)
电子邮件:/\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/变量:/[a-zA-Z_\x7f-\xff][a-zA-Z0-9_\x7f-\xff]*/ 基于p ...
- 项目中常用js方法整理common.js
抽空把项目中常用js方法整理成了common.js,都是网上搜集而来的,大家一起分享吧. var h = {}; h.get = function (url, data, ok, error) { $ ...
- 常用sql语句整理:mysql
## 常用sql语句整理:mysql1. 增- 增加一张表```CREATE TABLE `table_name`( ... )ENGINE=InnoDB DEFAULT CHARSET=utf8 ...
- 单元测试系列之十:Sonar 常用代码规则整理(二)
摘要:帮助公司部署了一套sonar平台,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分析,避免再次出现类似问题. 作者原创技术文章,转载请注明出处 ======== ...
- 单元测试系列之九:Sonar 常用代码规则整理(一)
更多原创测试技术文章同步更新到微信公众号 :三国测,敬请扫码关注个人的微信号,感谢! 摘要:公司部署了一套sonar,经过一段时间运行,发现有一些问题出现频率很高,因此有必要将这些问题进行整理总结和分 ...
随机推荐
- python 序列的方法
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 在快速教程中,我们了解了最基本的序列(sequence).回忆一下,序列包含有定值 ...
- Java中HashMap,LinkedHashMap,TreeMap的区别[转]
原文:http://blog.csdn.net/xiyuan1999/article/details/6198394 java为数据结构中的映射定义了一个接口java.util.Map;它有四个实现类 ...
- 记录bigdesk中ElasticSearch的性能参数
定时采集bigdesk中的Elasticsearch性能参数,并保存到数据库或ELK,以便于进行长期监控. 基于python脚本实现,脚本如下: #coding=gbk import httplibi ...
- MVC4.0 利用IActionFilter实现简单的后台操作日志功能
首先我们要了解MVC提供了4种常用的拦截器:IActionFilter(Action拦截器接口).IExceptionFilter(异常拦截器接口).IResultFilter(Result拦截器接口 ...
- xml之Schema架构
1.什么是Schema架构 2.Schema文档结构 3.Schema元素类型 1>element元素 <!--简单数据:类型--> <xs:element name=&qu ...
- [收藏]Spring Security中的ACL
ACL即访问控制列表(Access Controller List),它是用来做细粒度权限控制所用的一种权限模型.对ACL最简单的描述就是两个业务员,每个人只能查看操作自己签的合同,而不能看到对方的合 ...
- LeetCode-Largest Divisble Subset
Given a set of distinct positive integers, find the largest subset such that every pair (Si, Sj) of ...
- Team Homework #3 软件工程在北航——IloveSE
任务要求: 采访以前上过北航 (计算机系/软件学院) 软件工程课的同学.现在上研/工作的也可以. 采访问题如下:* 平均每周花在这门课上的时间 (包括上课/作业/上机) * 平均写的代码总行数 ...
- java线程图
- 【First Missing Positive】cpp
题目: Given an unsorted integer array, find the first missing positive integer. For example,Given [1,2 ...