* {
  margin:;
  padding:;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
  display: block;
}
html {
  font-size: 12px;
  color: #666;
  font-family: 'Microsoft Yahei'  'Helvetica Neue', Helvetica, STHeiTi, Arial, sans-serif;
}
body{
height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch;
}
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
img {
  border: none;
  vertical-align: middle;
}
a {
  text-decoration: none;
  outline: none;
/*设置的tap  A标签的时候出现的黑色高亮*/
-webkit-tap-highlight-color: transparent;
}
a:active {; }
.clearfix {
  zoom:;
}
.clearfix:before,
.clearfix:after {
  content: '';
  display: table;
}
.clearfix:after {
  clear: both;
}
em {
  font-style: normal;
}
input {
  outline: none;
}
input[type="text"],
input[type="tel"] {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 去除iphone ipad 设备默认按钮样式 */
input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-appearance: none;
  border-radius:;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin:;
}
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; }

/*知识扩展*/
1.-webkit-tap-highlight-color
-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)
-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性,这样就保证body的点击区域效果一致了

2.outline:none
(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"
(2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式
(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性,其实是多余。

3.-webkit-appearance
-webkit-appearance: none;//消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式
不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失
4.-webkit-user-select
-webkit-user-select: none; // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整
5.-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化),此属性也不继承,一般加在body上规定整个body的文字都不会自动调整
6.-webkit-touch-callout
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加
7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

1、<meta name="format-detection"/> 的用处


在手机上浏览时,该标签用于指定是否将网页内容中的手机号码显示为拨号的超链接。
在 iPhone 上默认值是:
<meta name="format-detection" content="telephone=yes"/>
如果你不希望手机自动将网页中的电话号码显示为拨号的超链接,那么可以这样写:
<meta name="format-detection" content="telephone=no"/>

2.<meta name="apple-mobile-web-app-capable"/>的用处

<meta name=”apple-mobile-web-app-capable” content=”yes” />

这apple-mobile-web-app-capable的作用就是删除默认的苹果工具栏和菜单栏。content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时,这个行meta就不用加了,默认就是显示。

3.<meta name="apple-mobile-web-app-status-bar-style"/>的用处
作用是控制状态栏显示样式:

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />
default:默认; black:纯黑; black-translucent:半透明灰色

移动端reset.css的更多相关文章

  1. 移动端(处理边距样式)reset.css

    移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...

  2. 1.reset.css的设置

    /* reset css */ *, ::before, ::after{ /*选择所有的标签 */ margin: 0; padding: 0; /*清除移动端默认的 点击高亮效果*/ -webki ...

  3. 移动端特殊css样式

    一般会用normalize.css或者reset.css重置样式 移动端特殊css样式 去除ios 按钮按下的默认高亮效果 -webkit-tap-highlight-color : none; io ...

  4. 打造自己的reset.css

    http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...

  5. Reset.css和Normalize.css样式表初始化相关

    (1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...

  6. 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  7. reset.css css重置公共样式

    @charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...

  8. 关于reset.css的疑问:为什么一定要重置浏览器样式?

    自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...

  9. Reset CSS:只选对的,不选"贵"的

    玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...

随机推荐

  1. 用C语言实现有限状态自动机FSM

    摘要:状态机模式是一种行为模式,在<设计模式>这本书中对其有详细的描述,通过多态实现不同状态的调转行为的确是一种很好的方法,只可惜在嵌入式环境下,有时只能写纯C代码,并且还需要考虑代码的重 ...

  2. tensorflow 实现线性方程

    下面的直接是代码: #!usr/bin/env python#coding:utf-8"""这个代码的作用是 通过 tensorflow 来计算 y = 0.3x + 0 ...

  3. maven中使用net.sf.json-lib

    <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-lib</art ...

  4. Dragons

    http://codeforces.com/problemset/problem/230/A Dragons time limit per test 2 seconds memory limit pe ...

  5. 职责链模式vs状态模式区别

    状态模式在具体状态里设置了下一状态. 而职责链模式是在客户端代码里设置了下一状态的处理对象. 如果状态模式里的任何一环缺失,将导致事情无法进行下去.职责链模式的链式在客户端连接的,也就是说,如果我们请 ...

  6. 玩转Android之Drawable的使用

    Drawable天天用,可你是否对Drawable家族有一个完整的认知?今天我们就来系统的学习一下Drawable的使用. 1.概述 用过Drawable的筒子都知道Drawable有很多种,有的时候 ...

  7. Android(java)学习笔记141:SQLiteDatabase的query方法参数分析

    public Cursor query (boolean distinct, String table, String[] columns, String selection, String[] se ...

  8. 快速安装VIM开发环境

    *Mac上当前用户的.vim目录打包*:附件地址:http://pan.baidu.com/s/1sj5FjZJ 1. 备份好系统的原来的vim配置文件,以备恢复使用:         mv ~/.v ...

  9. C++学习(五)

    一.拷贝构造函数和拷贝赋值运算符1.拷贝构造:用一个已有的对象,构造和它同类型的副本对象——克隆.2.形如class X {  X (const X& that) { ... }};的构造函数 ...

  10. Es6 之for of

    能工摹形,巧匠窃意. -- 毕加索 2016-10-10 <!DOCTYPE HTML> <html> <head> <script src="tr ...