文档章节

移动端 reset.css

奥巴码侬
 奥巴码侬
发布于 2015/06/19 10:11
字数 654
阅读 64
收藏 0
点赞 0
评论 0

本系列文章,如果没有特别说明,兼容安卓4.0.4+,测试demo

基于Normalize.css,根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。

html {
	font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
}
body {
	margin: 0;
	font-size: 1.4rem;
	line-height: 1.5;
	color: #333333;
	background-color: white;
	height: 100%;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
	display: block;
}
audio, canvas, progress, video {
	display: inline-block;
	vertical-align: baseline;
}
audio:not([controls]) {
	display: none;
	height: 0;
}
[hidden], template {
	display: none;
}
svg:not(:root) {
	overflow: hidden;
}
a {
	background: transparent;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	color: #0088cc;
}
a:active {
	outline: 0;
}
a:active {
	color: #006699;
}
abbr[title] {
	border-bottom: 1px dotted;
}
b, strong {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
mark {
	background: #ff0;
	color: #000;
}
small {
	font-size: 80%;
}
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}
img {
	border: 0;
	vertical-align: middle;
}
hr {
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	height: 0;
}
pre {
	overflow: auto;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}
code, kbd, pre, samp {
	font-family: monospace, monospace;
	font-size: 1em;
}
button, input, optgroup, select, textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}
button {
	overflow: visible;
}
button, select {
	text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
button[disabled], html input[disabled] {
	cursor: default;
}
button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}
input {
	line-height: normal;
}
input[type="checkbox"], input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
input[type="search"] {
	-webkit-appearance: textfield;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}
fieldset {
	border: 1px solid #c0c0c0;
	margin: 0 2px;
	padding: 0.35em 0.625em 0.75em;
}
legend {
	border: 0;
	padding: 0;
}
textarea {
	overflow: auto;
	resize: vertical;
}
optgroup {
	font-weight: bold;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
td, th {
	padding: 0;
}
html, button, input, select, textarea {
	font-family: "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, figure, form, blockquote {
	margin: 0;
}
ul, ol, li, dl, dd {
	margin: 0;
	padding: 0;
}
ul, ol {
	list-style: none outside none;
}
h1, h2, h3 {
	line-height: 2;
	font-weight: normal;
}
h1 {
	font-size: 1.8rem;
}
h2 {
	font-size: 1.6rem;
}
h3 {
	font-size: 1.4rem;
}
input::-moz-placeholder, textarea::-moz-placeholder {
	color: #cccccc;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
	color: #cccccc;
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
	color: #cccccc;
}
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

具体说明请参考sandal中的reset文件

这里有两点需要说明:

1、关于moz前缀

因为本人习惯使用firefox浏览器,所以没有舍弃moz前缀,而且moz前缀也不多,就几个而已,所以没有去掉。如有代码洁癖者,可去掉。

2、关于字体

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

IOS

iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica,中文字体设置为华文黑体STHeiTi。

Android

原生Android下中文字体与英文字体都选择默认的无衬线字体,4.0之前版本英文字体原生Android使用的是Droid Sans,中文字体原生Android会命中Droid Sans Fallback,4.0+ 中英文字体都会使用原生Android新的Roboto字体。其他第三方Android系统也一致选择默认的无衬线字体。

最后加上Arial字体方便pc端查看效果。


本文转载自:http://www.w3cplus.com/mobile/mobile-terminal-refactoring-reset-style.html

共有 人打赏支持
奥巴码侬
粉丝 33
博文 122
码字总数 43584
作品 0
西城
程序员
中文网页重设与排版--typo.css

中文网页重设与排版: 目标:一致化浏览器排版效果,构建最适合中文阅读的网页排版。包括桌面和移动平台。 预览:typo.css 一、目录结构 二、TYPO.CSS 的设计和使用 建议看源代码,特别是注释...

匿名
2012/06/01
4.4K
0
7、reset.css的引入及1px边框问题的解决

前言:GitHub:https://github.com/Ewall1106/mall 一、关于reset.css 因为不同的浏览器默认的样式不同,所以在着手项目开始前,我们需要引入reset.css,将所有html标签的默认样式统一化。我...

Ewall_
06/15
0
0
HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念...

lmj623565791
2014/06/15
0
0
9.less和reset.css的引用及首页活动、商品推荐模块的建立及flex布局(手把手教你用vue+node+mongodb搭建一个小商城)

最近有点忙。。 。 GitHub:https://github.com/Ewall1106/mall(请选择分支9) 一、less和reset.css的使用 1、less的引用 (1)安装和 (2)然后在中用属性定义一下less即可 2、reset.css的...

Ewall_
06/02
0
0
清除浮动的七种方式方法(实例代码讲解)

今天给大家分享的是清除浮动的具体代码实现,主要是帮助大家理解哪一种清除浮动比较好,辨析它们的优缺点而已。清除浮动有很多种,如何进行选择清除浮动呢?E良师益友网就拿下面的一个例子来...

罗马教堂的钟声
2015/12/22
51
0
使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效

日期:2012-3-26 来源:GBin1.com 在线演示 本地下载 360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程...

gbin1
2012/03/27
0
0
node-webkit 拖动效果和问题

package.json: { "main": "index.html", "name": "example", "window": { "toolbar": false, "frame" : false }} index.html: <!doctype html><html lang='en'><head> <meta charset='UTF-8'......

乾坤摄
2015/07/27
0
0
h5视频播放器

一.首先先看一下目录 css框架用的是bootstrap,js库用的是jquery 目录.png bootstrap ----|css -------|bootstrap.css ----|fonts -------|glyphicons-halflings-regular.eot -------|glyph......

HaleyLiu
2017/12/17
0
1
小结一下前端html+css的经验 (三)

img标签必须要写alt属性,当图片丢失或加载失败不会显示难看的叉叉,对SEO也比较友好。也可以在onerror事件里面指定默认图片地址或隐藏onerror="this.src='默认图片的url地址;this.onerror=n...

Rella蕾拉
2012/03/19
0
7
2017年,移动端程序员的日子好过吗?

2016 年对移动端程序员们来说,无疑是焦虑与迷茫的一年。资本寒冬的降临,移动互联网市场的盈利红海,不少 App 创业公司的接连倒闭,微信小程序的发布…每一个事件在网络上的蔓延,似乎都在暗...

100offer
2017/12/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sparkstreaming and Kafka

简介 Kafka 0.10的Spark Streaming集成设计与0.8 Direct Stream方法类似。 它提供了简单的并行性,Kafka分区和Spark分区之间的1:1对应关系,以及对偏移量和元数据的访问。 但是,由于较新的...

舒运
7分钟前
0
0
java获取当前时间所在一周的周一和周日日期

/** * 当前时间所在一周的周一和周日时间 * @param time 当前时间 * @return */ public static Map getWeekDate(String time) { Map map = new HashedMap(); SimpleDateFormat sdf = new Si......

小弱鸡
35分钟前
0
0
Redis数据的导出和导入(dump和load方式)

网上有些文章已经不再适用,本人也是踩了些坑,在此记录下。 迁移redis数据一般有如下3种方式: 第三方工具redis-dump,redis-load aof机制,需要开启aof功能 rdb存储机制 这里介绍第一种方式...

iplusx
39分钟前
1
0
ElasticSearch 高亮显示大文档搜索结果

2016年12月,我们开始研究Ambar——一个文档搜索系统。Ambar使用ElasticSearch作为核心搜索引擎。 在Ambar开发的过程中,我们处理了很多与ES相关的问题,我们想分享我们得到的宝贵经验。让我...

九州暮云
今天
0
0
Python 使用 pywifi 模块 破解wifi密码

git https://github.com/awkman/pywifi 常见常量 from pywifi import const# Define interface status.IFACE_DISCONNECTED = 0IFACE_SCANNING = 1IFACE_INACTIVE = 2IFACE_CONNEC......

阿豪boy
今天
1
0
phpstorm使用Iedis

phpstorm的redis插件Iedis是真好用 看了网上挺多的文章,但是由于我系统还是ubuntu,就有点尴尬了,现在破解之后,留个笔记,即使自己之后有需要也可以很快翻阅 先下载资源 资源下载 zip压缩...

贤郎--均灵
今天
0
0
第三章 spring-bean之FactoryBeanRegistrySupport(4)

前言 从FactoryBeanRegistrySupport类的名字可以看出FactoryBeanRegistrySupport负责FactoryBean的注册与支持。如果想知道FactoryBean相关的资料,请阅读spring-bean中关于FactoryBean的解读...

鸟菜啊
今天
0
0
CentOS “Destination Host Unreachable”问题解决办法

挑战极速安装CentOS时遇到局域网主机不能通信的情况: [root@zjd network-scripts]# ping 8.8.8.8PING 8.8.8.8 (8.8.8.8) 56(84) bytes of data.64 bytes from 8.8.8.8: icmp_seq=1 ttl=......

wffger
今天
0
0
CentoOS6.6安装netcat

CentOS下安装netcat 使用zookeeper过程中,需要监控集群状态。在使用四字命令时(echo conf | nc localhost 2181),报出如下错误:-bash: netcat: command not found。 我的系统是CentOS 6....

ghou-靠墙哭
今天
0
0
es6之解构赋值巧用

ES6 允许按照一定模式,从数组、对象等中提取值,对变量进行赋值,这被称为解构赋值。 如何进行解构赋值我这里就不赘述,本篇文章主要是将解构赋值的巧妙使用之处。 1、交互变量的值 常用交互...

秋季长青
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部