移动端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 ...
随机推荐
- 阿里云服务器(CentOS)安装tomcat,jdk,布署J2EE项目
1.使用Xshell登录服务器,当然你也可以使用其他软件登录服务器 2.Linux服务器挂载数据盘,具体参见视频教程(quote:"一般来说服务器的数据盘需要和系统盘分开,当系统出现故障后能 ...
- Laravel Quickstart
Installation Via Laravel Installer First, download the Laravel installer using Composer. composer gl ...
- advanced dom scripting dynamic web design techniques Part One DOM SCRIPTING IN DETAIL CHAPTER 1 DO IT RIGHT WITH BEST PRACTICES
You’re excited; your client is excited. All is well. You’ve just launched the client’s latest websit ...
- system partition table
转载内容 摘录部分我的笔记的中doc,和大家一起感受Oracle 11g在分区方面的增强--System Partitioning 系统分区的特点 ●系统分区与其他分区相比,一个最根本的区别就是不需要 ...
- VC++深入详解-第一章学习心得(一)
句柄是系统为资源分配内存的标识号. 相当于一个指针指向一块内存空间,我暂时理解成一个地址,一个门牌号 HWND 窗口句柄 HICON 图标句柄 HCURSOR 光标句柄 HBRUSH 画刷句柄 消息的 ...
- 包含块、层叠上下文、BFC
包含块 什么是包含块?简单来说,就是决定一个元素大小和定位的元素.一个元素会为它的内部元素创建包含块,但也不能说元素的包含块就是它的父元素: 1.position:fixed 的元素 包含块是当前可视 ...
- ABAP程序相互调用--SUBMIT
(1) 调用其他程序: * Trigger the IDOC SUBMIT zpcppmd001_idoc AND RETURN. (2) 调用其他程序参数传递参数: *当被调用的程序的屏幕有输入参数 ...
- 利用PS脚本自动删除7天之前建立的目录-方法1!
目前有一个备份目录,目录名称为d:\temp\bak目录,在这目录下,根据备份要求,自动生成了如下目录的列表: 20131012 20131011 20131010 20131009 20131008 ...
- PERCONA-TOOLKIT : pt-ioprofile分析IO情况
针对IO密集型应用做系统调优的时候,我们通常都需要知道系统cpu 内存 io 网络等系统性能 和 使用率,结合应用本身的访问量,以及 mysql的性能指标来综合分析.比如说:我们将系统压力情况分为 ...
- Android开发——避免内存泄露
本文翻译自Avoiding memory leak——Post by Romain Guy 著作权归原作者所有.转载请注明出处,由JohnTsai翻译 Android应用被分配的堆的大小限制为16MB ...