移动端reset.css
* { 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的更多相关文章
- 移动端(处理边距样式)reset.css
移动端reset.css,来自张鑫旭网站的推荐,下载地址:https://huruqing.gitee.io/demos/source/reset.css 代码 /* html5doctor.com ...
- 1.reset.css的设置
/* reset css */ *, ::before, ::after{ /*选择所有的标签 */ margin: 0; padding: 0; /*清除移动端默认的 点击高亮效果*/ -webki ...
- 移动端特殊css样式
一般会用normalize.css或者reset.css重置样式 移动端特殊css样式 去除ios 按钮按下的默认高亮效果 -webkit-tap-highlight-color : none; io ...
- 打造自己的reset.css
http://shawphy.com/2009/03/my-own-reset-css.html 最近我对此观点有所新的看法,可以查看<真的还需要reset.css么?> 0,引言 每每有 ...
- Reset.css和Normalize.css样式表初始化相关
(1)Reset.css 简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式.不同浏览器的默认样式之间也会有差别,例如ul默认 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- reset.css css重置公共样式
@charset "utf-8";/*Css Document*/ /*! * @名称:reset.css * @功能:1.重设浏览器默认样式 * 2.设置通用原子类 *//* 防 ...
- 关于reset.css的疑问:为什么一定要重置浏览器样式?
自开始做前端算起,我所做过的每一个项目中都会有一个reset.css,也就是重置样式表.我现在想想都不知道第一次是从哪儿弄来的一个重置样式表.快五年了,好像从来都没有质疑过关于重置样式表的内容. 这样 ...
- Reset CSS:只选对的,不选"贵"的
玉伯和正淳一起整理的一份 reset.css: /* KISSY CSS Reset 理念:清除和重置是紧密不可分的 特色:1.适应中文 2.基于最新主流浏览器 维护:玉伯(lifesinger@gm ...
随机推荐
- hdoj 2 括号配对问题【数组模拟实现+STL实现】
栈遵循先进后出的原则 括号配对问题 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 现在,有一行括号序列,请你检查这行括号是否配对. 输入 第一行输入一个数N(0 ...
- Jquery实现图片轮播源码
<html><head><style type="text/css">#banner {position:relative; width:478 ...
- highcharts 柱形图 饼图 加URL或Click事件
我们在做图表的时候,有时候需要在单个数据上加链接或点击事件,是在plotOptions里的events里设置的 plotOptions: { pie: { cursor: 'pointer', eve ...
- PTA 5-12 排序 (25分)
给定NN个(长整型范围内的)整数,要求输出从小到大排序后的结果. 本题旨在测试各种不同的排序算法在各种数据情况下的表现.各组测试数据特点如下: 数据1:只有1个元素: 数据2:11个不相同的整数,测试 ...
- android99 拍照摄像
package com.itheima.camera; import java.io.File; import android.net.Uri; import android.os.Bundle; i ...
- Linux内核里的DebugFS
DebugFS,顾名思义,是一种用于内核调试的虚拟文件系统,内核开发者通过debugfs和用户空间交换数据.类似的虚拟文件系统还有procfs和sysfs等,这几种虚拟文件系统都并不实际存储在硬盘上, ...
- ODB 短板
首先是不支持联合主键,而且没有CHECK约束.UNIQUE约束,这是官方都承认的. 虽然提供了延迟加载(lazyload)来改善效率,不过使用起来不方便 查询不灵活,只能在WHERE之后的部分设定查询 ...
- leecode 每日解题思路 152 Maximun Product Subarray
问题描述: 问题链接:152 Maximum Product Subarray 在经典的算法解析中, 有关的分治和动态规划的,经典题型之一就是求最大子段和, 这道题就是他的变形:求最大子段积; 这个问 ...
- 18、HTML
HTML 超文本标记语言(Hyper Text Markup Language). 用来描述网页的一种语言. HTML标签 由尖括号包围的关键词. 如:<html> 通常是成对出现的,开始 ...
- 解决 phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接 问题
phpMyAdmin 尝试连接到 MySQL 服务器,但服务器拒绝连接.您应该检查配置文件中的主机.用户名和密码,并确认这些信息与 MySQL 服务器管理员所给出的信息一致. 问题解决办法: 修改co ...