* {
  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. hdoj 2 括号配对问题【数组模拟实现+STL实现】

    栈遵循先进后出的原则 括号配对问题 时间限制:3000 ms  |  内存限制:65535 KB 难度:3   描述 现在,有一行括号序列,请你检查这行括号是否配对.   输入 第一行输入一个数N(0 ...

  2. Jquery实现图片轮播源码

    <html><head><style type="text/css">#banner {position:relative; width:478 ...

  3. highcharts 柱形图 饼图 加URL或Click事件

    我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', eve ...

  4. PTA 5-12 排序 (25分)

    给定NN个(长整型范围内的)整数,要求输出从小到大排序后的结果. 本题旨在测试各种不同的排序算法在各种数据情况下的表现.各组测试数据特点如下: 数据1:只有1个元素: 数据2:11个不相同的整数,测试 ...

  5. android99 拍照摄像

    package com.itheima.camera; import java.io.File; import android.net.Uri; import android.os.Bundle; i ...

  6. Linux内核里的DebugFS

    DebugFS,顾名思义,是一种用于内核调试的虚拟文件系统,内核开发者通过debugfs和用户空间交换数据.类似的虚拟文件系统还有procfs和sysfs等,这几种虚拟文件系统都并不实际存储在硬盘上, ...

  7. ODB 短板

    首先是不支持联合主键,而且没有CHECK约束.UNIQUE约束,这是官方都承认的. 虽然提供了延迟加载(lazyload)来改善效率,不过使用起来不方便 查询不灵活,只能在WHERE之后的部分设定查询 ...

  8. leecode 每日解题思路 152 Maximun Product Subarray

    问题描述: 问题链接:152 Maximum Product Subarray 在经典的算法解析中, 有关的分治和动态规划的,经典题型之一就是求最大子段和, 这道题就是他的变形:求最大子段积; 这个问 ...

  9. 18、HTML

    HTML 超文本标记语言(Hyper Text Markup Language). 用来描述网页的一种语言. HTML标签 由尖括号包围的关键词. 如:<html> 通常是成对出现的,开始 ...

  10. 解决 phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接 问题

    phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 问题解决办法: 修改co ...