Analyze examples of mobile reset (reset)-HTML Tutorial-php.cn

Analyze examples of mobile reset (reset)

零下一度

Release： 2017-05-10 15:16:23

Original

2078 people have browsed it

This article provides tutorials related to mobile terminal reset. Interested friends can pay attention to it. Please see the specific example code below:

* {
 margin: 0;
 padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
 display: block;
}
html {
 font-size: 12px;
 color: #666;
 font-family: &#39;Microsoft Yahei&#39; &#39;Helvetica Neue&#39;, 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 { outline: 0; }
.clearfix {
 zoom: 1;
}
.clearfix:before,
.clearfix:after {
 content: &#39;&#39;;
 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: 0; 
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none !important;
 margin: 0;
}
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; }

Copy after login

/*Knowledge Expansion*/

-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的点击区域效果一致了

Copy after login

2.outline: none
(1) The purpose of defining this style for the a tag on the PC side is to cancel the dotted line that appears when the a tag is clicked on the IE browser. Browsers ie7 and below do not yet recognize this attribute. You need to add hidefocus="true"
(2)input on the a tag, textarea{outline:none} to cancel the default text box focus style under chrome
(3 ) does not work on the mobile terminal. If you want to remove the default style of the text box, you can use -webkit-appearance. To cancel the default style when focusing, use -webkit-tap-highlight-color. I saw some mobile reset files adding this attribute, but it is actually redundant.

-webkit-appearance
-webkit-appearance: none;//消除输入框和按钮的原生外观，在iOS上加上这个属性才能给按钮和输入框自定义样式

Copy after login

Different types of input behave differently after using this attribute. Text and buttons have no style, radio and checkbox disappear directly

-webkit-user-select
-webkit-user-select: none; // 禁止页面文字选择 ，此属性不
继承一般加在body上规定整个body的文字都不会自动调整

Copy after login

-webkit-text-size-adjust
-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化)，此属性也不继承，一般加在body上规定整个body的文字都不会自动调整

Copy after login

.-webkit-touch-c
all
out
-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

Copy after login

-webkit-overflow-scrolling-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

Copy after login

The use of

When browsing on mobile phones , this tag is used to specify whether to display the mobile phone number in the web page content as a dialed hyperlink.
The default value on iPhone is:

<meta name="format-detection" content="telephone=yes"/>

Copy after login

If you don’t want the phone to automatically display the phone number in the web page as a dialing hyperlink, you can write like this:

<meta name="format-detection" content="telephone=no"/>

Copy after login

<meta name="apple-mobile-web-app-capable"/>的用处
<meta name=”apple-mobile-web-app-capable” content=”yes” />

Copy after login

The function of apple-mobile-web-app-capable is todeletethe default Apple toolbar and menu bar. content has two values "yes" and "no". When we need to display the toolbar and menu bar, there is no need to add this line of meta. The default is to display it.

<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：半透明灰色

Copy after login

【Related recommendations】

1. Free html online video tutorial

2. html development manual

3. php.cn original html5 video tutorial

The above is the detailed content of Analyze examples of mobile reset (reset). For more information, please follow other related articles on the PHP Chinese website!