CSS/CSS3常用樣式與知識點
IE條件注釋
條件注釋簡介
-
IE中的條件注釋（Conditional comments）對IE的版本和IE非IE有優秀的區分能力，是WEB設計中常用的hack方法。
條件注釋只能用於IE5以上，IE10以上不支持。 -
如果你安裝了多個IE，條件注釋將會以最高版本的IE為標准。
-
條件注釋的基本結構和HTML的注釋(<!– –>)是一樣的。因此IE以外的瀏覽器將會把它們看作是普通的注釋而完全忽略它們。
-
IE將會根據if條件來判斷是否如解析普通的頁面內容一樣解析條件注釋里的內容。
條件注釋使用方法示例
<!–-[if IE 5]>僅IE5.5可見<![endif]–-> <!–-[if gt IE 5.5]>僅IE 5.5以上可見<![endif]–-> <!–-[if lt IE 5.5]>僅IE 5.5以下可見<![endif]–-> <!–-[if gte IE 5.5]>IE 5.5及以上可見<![endif]–-> <!–-[if lte IE 5.5]>IE 5.5及以下可見<![endif]–-> <!–-[if !IE 5.5]>非IE 5.5的IE可見<![endif]–->
針對IE6，7的hack，該怎么寫
你可能會這么回答：使用 “>”，“_”，“*”等各種各樣的符號來寫hack。是的，這樣做沒錯，但是需要記住每個符號分別被哪些瀏覽器識別，並且如果寫的太亂將造成代碼 閱讀起來十分困難。學習CSS必須抱有一種質疑精神，有沒有一種hack方法可以不寫這些亂七八糟的符號，並且代碼易維護易讀呢？我們可以看看好搜首頁是怎么做的：在頁面頂端有這樣一句話：
<!DOCTYPE html> <html> <meta charset="utf-8"/> <head> <!--[if lt IE 7 ]><html class="ie6"><![endif]--> <!--[if IE 7 ]><html class="ie7"><![endif]--> <!--[if IE 8 ]><html class="ie8"><![endif]--> <!--[if IE 9 ]><html class="ie9"><![endif]--> <!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]--> </head>
在頁面的CSS中，會看到這樣的規則：
.ie7 #hd_usernav:before, .ie8 #hd_usernav:before { display: none } .ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li { border-right-color: #c5c5c5 } .ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a { color: #c5c5c5 }
行內級元素可以設置寬高嗎？有哪些？
在面試時，當被問到行內級元素可否設置寬高時，根據我們的經驗往往會回答不能。但是這樣往往着了面試官的道，因為有一些特殊的行內元素，比如img，input，select等等，是可以被設置寬高的。一個內容不受CSS視覺格式化模型控制，CSS渲染模型並不考慮對此內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。比如img是一個置換元素，當不對它設置寬高時，它會按照本身的寬高進行顯示。所以這個問題的正確答案應該是置換元素可以，非置換元素不可以。
純css 實現footer sticker
希望footer一直在頁面底部html代碼：
<!--主體內容--> <div id="sticker"> <div id="stickerCon"></div> </div> <!--底部內容--> <div id="footer">footer</div>
css代碼：
html, body,#sticker {height: 100%;} body > #sticker {height: auto; min-height: 100%;} #stickerCon {padding-bottom: 40px;} #footer { margin-top:-41px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7; }
CSS font屬性簡寫樣式
p.ex1{font:italic arial,sans-serif;} p.ex2{font:italic bold 12px/20px arial,sans-serif}
可以按順序設置如下屬性：
- font-style （規定字體樣式）
- font-variant （規定字體異體）
- font-weight
- font-size/line-height
- font-family
詳情請參考地址：http://www.w3school.com.cn/cssref/pr_font_font.asp
CSS修改選中文字的顏色
html代碼：
<p class="p1">第一段文字選中效果</p> <p class="p2">第二段文字選中效果</p>
css代碼：
.p1::selection{background:red;color:#fff;} .p2::selection{background: black;color:red;}
選中文字后的效果如圖所示：
強制文本顯示
單行顯示語法：white-space:nowrap;
讓一段文字在固定寬度在一行顯示，最后一個字符為省略標記(...)，css樣式如下
div{ white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
多行文本最后省略號：
div{ display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis; }
這里用到了文本溢出顯示省略號的，即設置溢出文本顯示為省略標記：
語法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;
clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出時，顯示省略標記(...)，省略標記代替最后一個字符；
ellipsis-word：表示文本溢出時，也是顯示省略標記(...),不同的是，省略標記代替的是最后一個詞)
zoom:1的原理和作用
語法：zoom：normal | <number> | <percentage>
取值：
-
normal：使用對象的實際尺寸。
-
<number>：用浮點數來定義縮放比例。不允許負值
-
<percentage>：用百分比來定義縮放比例。不允許負值
兼容性：
例子：
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>zoom_CSS參考手冊_web前端開發參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <style> body{line-height:1.5;} h1{margin:0;font-size:16px;font-family:Arial;} .test{zoom:normal;} .test2{zoom:5;} .test3{zoom:300%;} </style> </head> <body> <h1>zoom:normal</h1> <div class="test">zoom:normal</div> <h1>zoom:5</h1> <div class="test2">zoom:5</div> <h1>zoom:300%</h1> <div class="test3">zoom:300%</div> </body> </html>
谷歌與IE瀏覽器結果如圖所示（Firefox不支持）：
參考地址：http://www.css88.com/book/css/properties/user-interface/zoom.htm
Zoom屬性是IE瀏覽器的專有屬性， 它可以設置或檢索對象的縮放比例。
在平常的css編寫過程中，zoom:1能夠比較神奇地解決ie下比較奇葩的bug。
譬如外邊距（margin）的重疊，譬如浮動的清除，譬如觸發ie的 haslayout屬性等等。
（重點）當設置了zoom的值之后，所設置的元素就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨着自動擴大的問題。
ie下子元素浮動時候父元素不隨着自動擴大的問題，使用下面的CSS寫法：
.父元素 { overflow: auto; zoom: 1 }
點擊a標簽里面的圖片，IE中圖片出現虛線框問題
<a href="javascript:void(0)"><img src="images/suba.gif"></a>
解決辦法：
a{outline:none;}//主要是針對火狐等瀏覽器，但IE不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解決IE6，IE7中的虛線框。
對於a標簽來說，一般簡單的解決辦法是：
在a標簽里加入js控制，當a標簽被聚焦時，強制取消焦點，這時候a標簽自然不會有虛線框。
<a href="#"onfocus="this.blur();">測試</a>
但是當連接太多的時候，一個一個的加這段代碼不實用
css ie6、ie7中overflow:hidden無效解決辦法
產生原因：
當父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時，父元素的overflow:hidden 屬性就會失效。
解決辦法：
我們在IE 6、7 內發現子元素會超出父元素設定的高度，即使父元素設置了overflow:hidden。
解決這個bug很簡單，在父元素中使用 *position:relative; 即可解決該bug
表格語法
<table aling=left>...</table>表格位置,置左 <table aling=center>...</table>表格位置,置中 <table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址 <table border=邊框大小>...</table>設定表格邊框大小(使用數字) <table bgcolor=顏色碼>...</table>設定表格的背景顏色 <table borderclor=顏色碼>...</table>設定表格邊框的顏色 <table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色 <table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色 <table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字) <table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字) <table cols=參數>...</table>指定表格的欄數 <table frame=參數>...</table>設定表格外框線的顯示方式 <table width=寬度>...</table>指定表格的寬度大小(使用數字) <table height=高度>...</table>指定表格的高度大小(使用數字) <td colspan=參數>...</td>指定儲存格合並欄的欄數(使用數字) <td rowspan=參數>...</td>指定儲存格合並列的列數(使用數字)
設置表格中的td寬度固定table-layout:fixed
table{table-layout:fixed;}
語法 table-layout:automatic | fixed | inherit
- automatic：默認。列寬度由單元格內容設定。
- fixed：列寬由表格寬度和列寬度設定。
- inherit：規定應該從父元素繼承 table-layout 屬性的值。
合並表格邊框border-collapse:collapse
table{border-collapse:collapse;}
語法：border-collapse:separate | collapse | inherit
- separate：默認值。邊框會被分開。不會忽略 border-spacing 和 empty-cells 屬性。
- collapse：如果可能，邊框會合並為一個單一的邊框。會忽略 border-spacing 和 empty-cells 屬性。
- inherit：規定應該從父元素繼承 border-collapse 屬性的值。
例如：
table{border-collapse:collapse;}
table, td, th{border:1px solid black;}
CSS text-transform控制文本的大小寫
描述：text-transform 屬性控制文本的大小寫。
語法：text-transform:none | capitalize | uppercase | lowercase | inherit
none 默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
text-stroke
[ text-stroke-width ]：設置或檢索對象中的文字的描邊厚度 [ text-stroke-color ]：設置或檢索對象中的文字的描邊顏色
text-stroke(文本描邊)和text-fill-color(文本填充色)注意點：
目前這兩個屬性只有webkit內核的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：顏色值，和color屬性差不多都是文字的樣式；
同時使用text-fill-color和color屬性，text-fill-color將覆蓋color屬性的顏色值；
text-fill-color可以使用透明值，即：text-fill-color：transparent
text-shadow
text-shadow:0px 0px 0px #333333;
屬性值依次：水平方向位移（支持負值）、垂直方向位移（支持負值）、模糊半徑、陰影顏色
text-shadow對同一個text，可設置多個陰影，與box-shadow類似，使用逗號","分割，前一個設置效果在后一個設置效果之上。
box-shadow 參考：http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html
box-shadow
為了兼容各主流瀏覽器並支持這些主流瀏覽器的較低版本，在基於Webkit的Chrome和Safari等瀏覽器上使用box-shadow屬性時，我們需要將屬性的名稱寫成-webkit-box-shadow的形式。Firefox瀏覽器則需要寫成-moz-box-shadow的形式。全面的寫法：
.box-shadow-6{
box-shadow:-10px 0 10px red, /*左邊陰影*/
10px 0 10px yellow, /*右邊陰影*/
0 -10px 10px blue, /*頂部陰影*/
0 10px 10px green; /*底邊陰影*/
}
參考地址：http://blog.csdn.net/freshlov...
letter-spacing字符間距
letter-spacing 屬性增加或減少字符間的空白（字符間距）。
例如： letter-spacing: 2px;
textarea去掉右側滾動條，去掉右下角拖拽
<TEXTAREA style= "overflow:hidden; resize:none; "> </TEXTAREA>
css中透明度兼容代碼
div{filter: alpha(opacity=80);opacity:0.8;}
根據input的type來控制css樣式
a. 用css中的type選擇器
input[type="text"]{ background-color:#FFC;}
b.用css的expression判斷表達式
input{ background-color:expression(this.type=="text"?'#FFC':'');}
c.用javascript腳本實現(覺得沒必要，省略...)
css3設置字體
<style> @font-face { font-family: myFirstFont; src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */ } div { font-family:myFirstFont; } </style>
網頁字體設置
font-family:'YourWebFontName';
src:url('YourWebFontName.eot'); /* IE9 Compat Modes */
src:url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */}
參考地址：http://www.cnblogs.com/moqiutao/p/5070463.html
css強制性換行
div{ word-break:break-all; /*支持IE，chrome，FF不支持*/ word-wrap:break-word;/*支持IE，chrome，FF*/ }
CSS :first-child 選擇器,:last-child選擇器,nth-child(IE7,8無效，不識別)
:nth-child(2)選取第幾個標簽，“2可以是你想要的數字”
:nth-child(2n)選取偶數標簽，2n也可以是even
:nth-child(2n-1)選取奇數標簽，2n-1可以是odd
:nth-child(3n+1)自定義選取標簽，3n+1表示“隔二取一”
css3實現背景顏色漸變
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919);
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear-gradient(top,#FFF,#cb1919);
第一個參數：設置漸變的起始位置
第二個參數：設置起始位置的顏色
第三個參數：設置終止位置的顏色
IE 瀏覽器
IE瀏覽器實現漸變只能使用IE自己的濾鏡去實現
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=＃00ffff,endColorstr=＃9fffff,grandientType=1);
第一個參數：漸變起始位置的顏色
第二個參數：漸變終止位置的顏色
第三個參數：漸變的類型
0 代表豎向漸變 1 代表橫向漸變
CSS3下的漸變文字效果實現
h1.start-gradient { font-weight: bold; font-family: helvetica; text-align:center; background: -webkit-linear-gradient(left, #4f185d , #fe5d4b); /* 背景色漸變 */ -webkit-background-clip: text; /* 規定背景的划分區域 */ -webkit-text-fill-color: transparent; /* 防止字體顏色覆蓋 */ } <h1 class="start-gradient">快速開始</h1>
注：
這個文字效果只在webkit內核的瀏覽器上才能正常工作。Firefox 瀏覽器不支持在文字上使用background-clip屬性
關鍵的三行代碼：
background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
css3的RGB顏色和HSL顏色， IE8不識別rgba寫法
background-color:rgba(0,0,0,0.5)，此寫法解決opacity帶來的元素也透明問題，但IE8低版本瀏覽器不支持。
初始化em，u的斜體
em,u{font-style: normal;}
媒體查詢功能
@media screen and (max-width: 960px){
body{
background: #000;
}
}
@media (max-width: 960px){
body{
background: #000;
}
}
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css">
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
//自己添加的樣式
}
其中對於-webkit-min-device-pixel-ratio作如下解釋：
- 1.所有非Retina的Mac
- 2.所有非Retina的iOS設備
- 3.Acer Iconia A500
- 4.Samsung Galaxy Tab 10.1
- 5.Samsung Galaxy S
-webkit-min-device-pixel-ratio為1.3：
- 1. Google Nexus 7
-webkit-min-device-pixel-ratio為1.5：
- 1.Google Nexus S
- 2.Samsung Galaxy S II
- 3.HTC Desire
- 4.HTC Desire HD
- 5.HTC Incredible S
- 6.HTC Velocity
- 7.HTC Sensation
- 1.iPhone 4
- 2.iPhone 4S
- 3.iPhone 5
- 4.iPad (3rd generation)
- 5.iPad 4
- 6.所有Retina displays 的MAC
- 7.Google Galaxy Nexus
- 8.Google Nexus 4
- 9.Google Nexus 10
- 10.Samsung Galaxy S III
- 11.Samsung Galaxy Note II
- 12.Sony Xperia S
- 13.HTC One X
樣式實現三角形
div{ position:absolute; left:50%; bottom:0; margin-left:-10px; width:0; height:0; border-width:10px; border-style:solid dashed dashed dashed; border-color:transparent transparent #71151c transparent; }
css3水平垂直居中
div{ display: box; display: -webkit-box; display: -moz-box; -webkit-box-pack:center; -moz-box-pack:center; -webkit-box-align:center; -moz-box-align:center; }
css3屬性 -webkit-filter(改變模糊度 亮度 透明度等方法)
-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感覺效果很不錯。下面咱們就學習一下filter這個屬性吧。
現在規范中支持的效果有：
用法是標准的CSS寫法，如：
-webkit-filter: blur(2px);
使用方法：（配合動畫使用）
.jaguar-con-show img.jaguar-con-imglast{ -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .jaguar-con-show img.jaguar-con-imglast{ -webkit-filter: blur(3px) brightness(.6); -moz-filter: blur(3px) brightness(.6); -o-filter: blur(3px) brightness(.6); -ms-filter: blur(3px) brightness(.6); filter: blur(3px) brightness(.5); -webkit-transform:scale(1.1,1.1); -moz-transform:scale(1.1,1.1); /*border: 3px solid #000;*/ }
CSS pointer-events
禁止button按鈕的點擊與禁止a標簽的跳轉
pointer-events:none禁止掉鼠標事件（css3屬性）
禁止button按鈕的點擊：
<button type="button" class="btn btn-default btn-lg">默認按鈕</button> <button type="button" class="btn btn-default btn-lg" disabled="disabled">禁用按鈕</button>
button禁止點擊的樣式：
button{cursor: not-allowed;}
所以button用到了disabled="disabled"與樣式cursor: not-allowed
禁止a標簽的跳轉行為：
<a href="#" class="btn btn-default btn-lg" role="button">鏈接</a> <a href="#" class="btn btn-default btn-lg disabled" role="button">禁用鏈接</a>
樣式：
a{pointer-events: none;cursor:not-allowed}
參考地址：http://www.runoob.com/try/try.php?filename=bootstrap3-button-disabledstate
但是用到鍵盤tab鍵的時候出現a標簽可以跳轉，實現鍵盤tab也禁止a標簽跳轉 參考地：
http://www.zhangxinxu.com/wordpress/2011/12/css3-pointer-events-none-javascript/
樣式改變單詞的大小寫
首字母大寫：text-transform:capitalize
全部大寫：text-transform:uppercase
全部小寫：text-transform:lowercasecase
<spanstyle="text-transform:capitalize;" >this is a test!!!</span> 首字母大寫<inputtype="text"style="text-transform:capitalize;"> 全部大寫<inputtype="text"style="text-transform:uppercase;"> 全部小寫<inputtype="text"style="text-transform:lowercasecase;">
html title屬性內容換行方法
a.直接填寫title內容時候“回車鍵”換行
b.使用html title換行代碼
使用代碼換行共兩種代碼，均可實現html標簽內title內容顯示時換行。
換行代碼符合分別為：
“ ”和“ ”
“ ”拼寫：&（and符號，鍵盤數字鍵7一起&）+ #（井號）+ 10（阿拉伯數字十）+ ;（小寫分號）
“ ”拼寫：&（and符號，鍵盤數字鍵7一起&）+ #（井號）+ 13（阿拉伯數字十三）+ ;（小寫分號）
以上符合數字輸入均必須英文半角模式輸入。使用時候，在需要換行地方任選一種（組）換行符號代碼即可。
移動端定寬布局，安卓上文字變大了解決辦法
例如：
<meta name="viewport" content="width=750,user-scalable=no,target-densitydpi=device-dpi" />
那么解決辦法：
給文字區外面的div設最大高度100%。
HTML5:input file控件限制上傳文件類型
input file控件限制上傳文件類型
文件類型中間用，分開
html和htm這樣的要寫成兩個
<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docx,.xls,.xlsx,.pdf">
如果限制上傳文件為圖片類型，如下：
<input type="file" class="file" value="上傳" accept="image/*"/>
去掉input聚焦,點擊a標簽，出現的外虛線框
input:focus{outline: none;}
CSS3 calc中使用vw讓overflow:auto頁面滾動條出現時不跳動
傳統的實現方式：
body { overflow-y: scroll; }
css3實現方式：
.wrap-outer { margin-left: calc(100vw - 100%); }
或者：
.wrap-outer { padding-left: calc(100vw - 100%); }
首先，.wrap-outer指的是居中定寬主體的父級，如果沒有，創建一個（使用主體也是可以實現類似效果，不過本着寬度分離原則，不推薦）；
然后，calc是CSS3中的計算，IE10+瀏覽器支持，IE9瀏覽器基本支持(不能用在background-position上)；
最后，100vw相對於瀏覽器的window.innerWidth，是瀏覽器的內部寬度，注意，滾動條寬度也計算在內！而100%是可用寬度，是不含滾動條的寬度。
於是，calc(100vw - 100%)就是瀏覽器滾動條的寬度大小（如果有，如果沒有滾動條則是0）！左右都有一個滾動條寬度（或都是0）被占用，主體內容就可以永遠居中瀏覽器啦，從而沒有任何跳動！
參考地址：http://www.zhangxinxu.com/wordpress/2015/01/css-page-scrollbar-toggle-center-no-jumping/
Chrome、Safari等瀏覽器，當表單提交用戶選擇記住密碼后，下次自動填充表單的背景變成黃色，影響了視覺體驗是否可以修改？
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: #fff;//設置成元素原本的顏色 background-image: none; color: rgb(0, 0, 0); } //方法2：由(licongwen )補充 input:-webkit-autofill { -webkit-box-shadow: 0px 0 3px 100px #ccc inset; //背景色 }
***以下內容將主要是在移動端使用的多***
meta相關知識
H5頁面窗口自動調整到設備寬度，並禁止用戶縮放頁面
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
忽略將頁面中的數字識別為電話號碼
<meta name="format-detection" content="telephone=no" />
忽略Android平台中對郵箱地址的識別
<meta name="format-detection" content="email=no" />
當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- ios7.0版本以后，safari上已看不到效果 -->
將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式
<meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 可選default、black、black-translucent -->
總結可能用到的meta標簽
<!-- 設置縮放 -->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />
<!-- 可隱藏地址欄，僅針對IOS的Safari（注：IOS7.0版本以后，safari上已看不到效果） -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 僅針對IOS的Safari頂端狀態條的樣式（可選default/black/black-translucent ） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- IOS中禁用將數字識別為電話號碼/忽略Android平台中對郵箱地址的識別 -->
<meta name="format-detection"content="telephone=no, email=no" />
其他meta標簽
<!-- 啟用360瀏覽器的極速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微軟的老式瀏覽器 -->
<meta name="MobileOptimized" content="320">
<!-- uc強制豎屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ強制豎屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC強制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ強制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC應用模式 -->
<meta name="browsermode" content="application">
<!-- QQ應用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 點擊無高光 -->
<meta name="msapplication-tap-highlight" content="no">
移動端viewport模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以刪除--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>viewport通用</title> <link style="text/css" rel="stylesheet" href="home.css"> <script type="text/javascript" src="js/app.js"></script> </head> <body> <!--頁面內容--> </body> </html>
viewport模板 - target-densitydpi=device-dpi，android 2.3.5以下版本不支持
<meta name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi"><!-- width取值與頁面定義的寬度一致 -->
自己做移動端活動的時候常如下方式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <!-- ios7.0版本以后，safari上已看不到效果,可以刪除--> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="telephone=no" name="format-detection"> <meta content="email=no" name="format-detection"> <title>viewport通用</title> <script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth / 750; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)) { var version = parseFloat(RegExp.$1); if (version > 2.3) { document.write('<meta name="viewport" id="vie" content="width=750, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">'); } else { document.write('<meta name="viewport" id="vie" content="width=750, target-densitydpi=device-dpi">'); } } else { document.write('<meta id="vie" name="viewport" content="width=750, user-scalable=no, target-densitydpi=device-dpi, minimal-ui">'); } </script> <link style="text/css" rel="stylesheet" href="home.css"> <script type="text/javascript" src="js/app.js"></script> </head> <body> <!--頁面內容--> </body> </html>
對下面代碼的詳細解釋：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- device-width：設備寬度
- width：設置viewport寬度，為一個正整數，或字符串‘device-width’
- height：設置viewport高度，一般設置了寬度，會自動解析出高度，可以不用設置
- initial-scale：默認縮放比例(初始縮放比例)，為一個數字，可以帶小數
- minimum-scale：允許用戶最小縮放比例，為一個數字，可以帶小數
- maximum-scale：允許用戶最大縮放比例，為一個數字，可以帶小數
- user-scalable：是否允許手動縮放
延伸 提問
怎樣處理 移動端 1px 被 渲染成 2px 問題:
1 局部處理
- meta標簽中的 viewport屬性 ，initial-scale 設置為 1
- rem 按照設計稿標准走，外加利用transfrome 的scale(0.5) 縮小一倍即可；
2 全局處理
- meta標簽中的 viewport屬性 ，initial-scale 設置為 0.5
- rem 按照設計稿標准走即可
移動端問題總結
移動端如何定義字體font-family
中文字體使用系統默認即可，英文用Helvetica，為什么呢，首先先看一下各平台的主流字體支持情況（來源網絡，沒有驗證）！！！
各系統的默認字體和常用字體：
需要詳細相關信息，可查看《兼容PC手機端字體》文章
結論
- 各個手機系統有自己的默認字體，且都不支持微軟雅黑
- 如無特殊需求，手機端無需定義中文字體，使用系統默認
- 英文字體和數字字體可使用 Helvetica ，三種系統都支持
代碼：
/* 移動端定義字體的代碼 */
body{font-family:Helvetica;}
常見的中文字體對應的英文寫法：
@ 宋體 SimSun @ 黑體 SimHei @ 微信雅黑 Microsoft Yahei @ 微軟正黑體 Microsoft JhengHei @ 新宋體 NSimSun @ 新細明體 MingLiU @ 細明體 MingLiU @ 標楷體 DFKai-SB @ 仿宋 FangSong @ 楷體 KaiTi @ 仿宋_GB2312 FangSong_GB2312 @ 楷體_GB2312 KaiTi_GB2312 @ @ 說明：中文字體多數使用宋體、雅黑，英文用Helvetica body { font-family: Microsoft Yahei,SimSun,Helvetica; }
移動端touch事件(區分webkit 和 winphone)
當用戶手指放在移動設備在屏幕上滑動會觸發的touch事件
以下支持webkit
- touchstart——當手指觸碰屏幕時候發生。不管當前有多少只手指
- touchmove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用event的preventDefault()可以阻止默認情況的發生：阻止頁面滾動
- touchend——當手指離開屏幕時觸發
- touchcancel——系統停止跟蹤觸摸時候會觸發。例如在觸摸過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
TouchEvent
- touches：屏幕上所有手指的信息
- targetTouches：手指在目標區域的手指信息
- changedTouches：最近一次觸發該事件的手指信息
- touchend時，touches與targetTouches信息會被刪除，changedTouches保存的最后一次的信息，最好用於計算手指信息
參數信息(changedTouches[0])
- clientX、clientY在顯示區的坐標
- target：當前元素
以下支持winphone 8
- MSPointerDown——當手指觸碰屏幕時候發生。不管當前有多少只手指
- MSPointerMove——當手指在屏幕上滑動時連續觸發。通常我們再滑屏頁面，會調用css的html{-ms-touch-action: none;}可以阻止默認情況的發生：阻止頁面滾動
- MSPointerUp——當手指離開屏幕時觸發
移動端click事件有300 ms的延遲響應問題
歷史原因：
2007年蘋果發布首款iphone上IOS系統搭載的safari為了將適用於PC端上大屏幕的網頁能比較好的展示在手機端上，使用了雙擊縮放(double tap to zoom)的方案，比如你在手機上用瀏覽器打開一個PC上的網頁，你可能在看到頁面內容雖然可以撐滿整個屏幕，但是字體、圖片都很小看不清，此時可以快速雙擊屏幕上的某一部分，你就能看清該部分放大后的內容，再次雙擊后能回到原始狀態。
雙擊縮放是指用手指在屏幕上快速點擊兩次，iOS 自帶的 Safari 瀏覽器會將網頁縮放至原始比例。
原因就出在瀏覽器需要如何判斷快速點擊上，當用戶在屏幕上單擊某一個元素時候，例如跳轉鏈接<a href="#"></a>，此處瀏覽器會先捕獲該次單擊，但瀏覽器不能決定用戶是單純要點擊鏈接還是要雙擊該部分區域進行縮放操作，所以，捕獲第一次單擊后，瀏覽器會先Hold一段時間t，如果在t時間區間里用戶未進行下一次點擊，則瀏覽器會做單擊跳轉鏈接的處理，如果t時間里用戶進行了第二次單擊操作，則瀏覽器會禁止跳轉，轉而進行對該部分區域頁面的縮放操作。那么這個時間區間t有多少呢？在IOS safari下，大概為300毫秒。這就是延遲的由來。造成的后果用戶純粹單擊頁面，頁面需要過一段時間才響應，給用戶慢體驗感覺，對於web開發者來說是，頁面js捕獲click事件的回調函數處理，需要300ms后才生效，也就間接導致影響其他業務邏輯的處理。
解決方案：
- fastclick可以解決在手機上點擊事件的300ms延遲，地址：https://github.com/ftlabs/fastclick
- zepto的touch模塊，tap事件也是為了解決在click的延遲問題
觸摸事件的響應順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
解決300ms延遲的問題，也可以通過綁定ontouchstart事件，加快對事件的響應
清除IOS系統手機對input等表單元素的默認樣式
.css{-webkit-appearance:none;}
偽元素改變number類型input框的默認樣式
input[type=number]::-webkit-textfield-decoration-container { background-color: transparent; } input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; } input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; }
CSS美化Placeholder提示信息的樣式兼容
input::-webkit-input-placeholder{color:#AAAAAA;} input:focus::-webkit-input-placeholder{color:#EEEEEE;}
手機對Placeholder提示信息都基本帶有默認的樣式，兼容各種瀏覽器的使用方式：
.css::-webkit-input-placeholder {color: #777;} /* WebKit browsers */ .css:-moz-placeholder {color: #777;opacity: 1;} /* Mozilla Firefox 4 to 18 */ .css::-moz-placeholder {color: #777;opacity: 1;} /* Mozilla Firefox 19+ */ .css:-ms-input-placeholder {color: #777;} /* Internet Explorer 10+ */
webkit表單輸入框placeholder的文字能換行么
ios可以，android不行~
在textarea標簽下都可以換行~
取消a,button等元素被觸摸時產生的半透明灰色遮罩或者虛線框問題
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0;)}
-webkit-tap-highlight-color :當用戶點擊iOS的Safari瀏覽器中的鏈接或JavaScript的可點擊的元素時，覆蓋顯示的高亮顏色。
該屬性可以只設置透明度。如果未設置透明度，iOS Safari使用默認的透明度。當透明度設為0，則會禁用此屬性；當透明度設為1，元素在點擊時不可見。
詳細參考：《-webkit-tap-highlight-color 》
關閉手機端橫屏或者豎屏自動調整字體大小功能
ios使用-webkit-text-size-adjust禁止調整字體大小:
body{-webkit-text-size-adjust: 100%!important;}
text-size-adjust 設為 none 或者 100% 關閉字體大小自動調整功能。
android使用以下代碼，該接口只在微信瀏覽器下有效:
/** * 頁面加入這段代碼可使Android機器頁面不再受到用戶字體縮放強制改變大小 * 但是會有一個1秒左右的延遲，期間可以考慮通過loading展示 * 僅供參考 */ (function(){ if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); }); } else { setTimeout(function(){ WeixinJSBridge.invoke('setFontSizeCallback',{"fontSize":0}, function(res) { alert(JSON.stringify(res)); }); },0); } })();
禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片
.css{-webkit-touch-callout: none}
-webkit-touch-callout 是一個 不規范的屬性（unsupported WebKit property），它沒有出現在 CSS 規范草案中。
當你觸摸並按住觸摸目標時候，禁止或顯示系統默認菜單。在iOS上，當你觸摸並按住觸摸的目標，比如一個鏈接，Safari瀏覽器將顯示鏈接有關的系統默認菜單。這個屬性可以讓你禁用系統默認菜單。
適用於：鏈接元素比如新窗口打開，img元素比如保存圖像等等
取值：
禁止ios和android用戶選中文字
.css{-webkit-user-select:none}
當然pc端現在也在用禁止用戶選中文字，兼容寫法：
.test{ -webkit-user-select:none; -moz-user-select:none; -o-user-select:none; user-select:none; }
當然有時候pc上也直接寫到html代碼中，如：
<div class="test" onselectstart="return false;" unselectable="on">選擇我試試，你會發現怎么也選擇不到我，哈哈哈哈</div>
代碼解釋：
- IE6-9不支持該屬性，但支持使用標簽屬性
onselectstart="return false;"來達到user-select:none的效果；Safari和Chrome也支持該標簽屬性； - 直到Opera12.5仍然不支持該屬性，但和IE6-9一樣，也支持使用私有的標簽屬性
unselectable="on"來達到user-select:none的效果；unselectable 的另一個值是 off； - 除Chrome和Safari外，在其它瀏覽器中，如果將文本設置為
-ms-user-select:none;，則用戶將無法在該文本塊中開始選擇文本。不過，如果用戶在頁面的其他區域開始選擇文本，則用戶仍然可以繼續選擇將文本設置為-ms-user-select:none;的區域文本； - 對應的腳本特性為userSelect。
那有些網頁為了尊重原創，復制的文本 都會被加上一段來源說明，是如何做到的呢？問的好！ 等的就是你這個問題 -_- 。
大致思路：
1、答案區域監聽copy事件，並阻止這個事件的默認行為。2、獲取選中的內容（window.getSelection()）加上版權信息，然后設置到剪切板（clipboarddata.setData()）。
如何禁止移動端瀏覽器長按對圖片彈出保存
pointer-events: none;
打電話發短信，發郵件的怎么實現
打電話：<a href="tel:0755-10086">打電話給:0755-10086</a> 發短信：winphone系統無效，<a href="sms:10086">發短信給: 10086</a> 發郵件：<a href="mailTo:10086@qq.com">10086@qq.com</a>
詳細了解mailTo：移動web頁面給用戶發送郵件的方法 (郵件含文本、圖片、鏈接)
移動端實現類似hover效果
移動端觸摸按鈕的效果，可明示用戶有些事情正要發生，是一個比較好體驗，但是移動設備中並沒有鼠標指針，使用css的hover並不能滿足我們的需求，還好國外有個激活移動端css的active效果。
直接在body上添加ontouchstart，同樣可激活移動端css的active效果，比較推薦這種方式，代碼如下：
html代碼：
<body ontouchstart> </body>
css代碼：
.btn:active{background-color: red;}
開啟硬件加速
解決頁面閃白，保證動畫流暢
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
取消input在ios下，輸入的時候英文首字母的默認大寫
<input autocapitalize="off" autocorrect="off" />
如何阻止windows Phone的默認觸摸事件
winphone下默認觸摸事件事件使用e.preventDefault是無效的
目前解決方法是使用樣式來禁用
html{-ms-touch-action: none;}/* 禁止winphone默認觸摸事件 */
屏幕旋轉的事件和樣式
JS判斷橫屏豎屏
window.orientation，取值：正負90表示橫屏模式、0和180表現為豎屏模式；
window.onorientationchange = function(){ switch(window.orientation){ case -90: case 90: alert("橫屏:" + window.orientation); case 0: case 180: alert("豎屏:" + window.orientation); break; } }
當然有時候需要PC端與移動端公用代碼，一般這樣監聽：
//判斷手機橫豎屏狀態： window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() { if (window.orientation === 180 || window.orientation === 0) { alert('豎屏狀態！'); } if (window.orientation === 90 || window.orientation === -90 ){ alert('橫屏狀態！'); } }, false); //移動端的瀏覽器一般都支持window.orientation這個參數，通過這個參數可以判斷出手機是處在橫屏還是豎屏狀態。
CSS判斷橫屏豎屏
寫在同一個CSS中：//豎屏時使用的樣式 @media screen and (orientation:portrait) { .css{} } //橫屏時使用的樣式 @media screen and (orientation:landscape) { .css{} }
分開寫在2個CSS中：
豎屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
橫屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
CSS3判斷屏幕橫屏
@media screen and (min-aspect-ratio: 13/8) {
}
如圖實現如下效果：
html代碼：
<!--屏幕設備旋轉判斷開始--> <div id="orientLayer" class="mod-orient-layer"> <div class="mod-orient-layer__content"><i class="icon mod-orient-layer__icon-orient"></i> <div class="mod-orient-layer__desc">為了更好的體驗，請使用豎屏瀏覽</div> </div> </div> <!--屏幕設備旋轉判斷結束-->
css代碼：
@-webkit-keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } } @keyframes rotation { 10% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 50%, 60% { transform: rotate(0deg); -webkit-transform: rotate(0deg) } 90% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } 100% { transform: rotate(90deg); -webkit-transform: rotate(90deg) } } #orientLayer { display: none; } @media screen and (min-aspect-ratio: 13/8) { #orientLayer { display: block; width:100%; height:100%; } } .mod-orient-layer { display: none; position: fixed; height: 100%; width: 100%; left: 0; top: 0; right: 0; bottom: 0; background: #333; z-index: 9997 } .mod-orient-layer__content { position: absolute; width: 100%; top: 45%; margin-top: -75px; text-align: center } .mod-orient-layer__icon-orient { background-image: url(../images/icon-orient.png); display: inline-block; width: 67px; height: 109px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-animation: rotation infinite 1.5s ease-in-out; animation: rotation infinite 1.5s ease-in-out; -webkit-background-size: 67px; background-size: 67px } .mod-orient-layer__desc { margin-top: 20px; font-size: 15px; color: #fff }
IE10（winphone8）表單元素默認外觀如何重置
禁用 select 默認下拉箭頭
::-ms-expand 適用於表單選擇控件下拉箭頭的修改，有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
select::-ms-expand { display: none; }
禁用 radio 和 checkbox 默認樣式
::-ms-check 適用於表單復選框或單選按鈕默認圖標的修改，同樣有多個屬性值，設置它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=radio]::-ms-check,input[type=checkbox]::-ms-check{ display: none; }
禁用PC端表單輸入框默認清除按鈕
當表單文本輸入框輸入內容后會顯示文本清除按鈕，::-ms-clear 適用於該清除按鈕的修改，同樣設置使它隱藏 (display:none) 並使用背景圖片來修飾可得到我們想要的效果。
input[type=text]::-ms-clear,input[type=tel]::-ms-clear,input[type=number]::-ms-clear{ display: none; }
Retina 顯示屏的問題
retina：一種具備超高像素密度的液晶屏，同樣大小的屏幕上顯示的像素點由1個變為多個，如在同樣帶下的屏幕上，蘋果設備的retina顯示屏中，像素點1個變為4個
在高清顯示屏中的位圖被放大，圖片會變得模糊，因此移動端的視覺稿通常會設計為傳統PC的2倍
那么，前端的應對方案是：
設計稿切出來的圖片長寬保證為偶數，並使用backgroud-size把圖片縮小為原來的1/2
//例如圖片寬高為：200px*200px，那么寫法如下 .css{width:100px;height:100px;background-size:100px 100px;}
其它元素的取值為原來的1/2，例如視覺稿40px的字體，使用樣式的寫法為20px
.css{font-size:20px}
移動端設置滾動條的默認樣式
/* 設置滾動條的樣式 */ ::-webkit-scrollbar { width:12px; } /* 滾動槽 */ ::-webkit-scrollbar-track { -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3); border-radius:10px; } /* 滾動條滑塊 */ ::-webkit-scrollbar-thumb { border-radius:10px; background:rgba(0,0,0,0.1); -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background:rgba(255,0,0,0.4); }
為移動端頁面中滑動滾動條的時候，添加慣性效果的方法
首先設置：
div{height:100%;overflow-y:auto;}
body{-webkit-overflow-scrolling:touch;}
有的同學添加了這一條屬性后遇到了向下滑動后頁面變成空白的問題，實際上可以通過一條 CSS 屬性把頁面加載到內存來解決：
body{-webkit-transform:translate3d(0,0,0);}
注：如果設置了-webkit-overflow-scrolling: touch;那么在IOS系統下對於改變滾動條的默認樣式將失效，即上面一條所述。
移動端實現控制文本行數
div{ display: -webkit-box; -webkit-line-clamp: 4; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; }
移動端使用flex讓內容平均分配
htm代碼：
<nav> <a href="#">a</a> <a href="#">b</a> <a href="#">c</a> </nav>
css代碼：
nav{display:-webkit-flex;display:flex;} a{-webkit-flex:1;flex:1;}
網易新聞移動端設置rem代碼
/** * view-port list: 320x480 320x568 320x570 360x592 360x598 360x604 360x640 360x720 375x667 375x812 393x699 412x732 414x736 480x854 540x960 640x360 720x1184 720x1280 800x600 1024x768 1080x1812 1080x1920 */ html { font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } @media screen and (max-width: 320px) { html { font-size: 42.667px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 321px) and (max-width: 360px) { html { font-size: 48px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 361px) and (max-width: 375px) { html { font-size: 50px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 376px) and (max-width: 393px) { html { font-size: 52.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 394px) and (max-width: 412px) { html { font-size: 54.93px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 413px) and (max-width: 414px) { html { font-size: 55.2px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 415px) and (max-width: 480px) { html { font-size: 64px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 481px) and (max-width: 540px) { html { font-size: 72px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 541px) and (max-width: 640px) { html { font-size: 85.33px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 641px) and (max-width: 720px) { html { font-size: 96px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 721px) and (max-width: 768px) { html { font-size: 102.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } @media screen and (min-width: 769px) { html { font-size: 102.4px; font-size: -webkit-calc(13.33333333vw); font-size: calc(13.33333333vw); } } body { font-family: "PingFangSC-Regular", "Microsoft YaHei", Helvetica; color: #333333; background: #f5f7f9; } html a { color: #333333; }