當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

[总结]CSS/CSS3常用样式与web移动端资源

發布時間：2024/3/13 CSS 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 [总结]CSS/CSS3常用样式与web移动端资源小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>     <html class="w3c"> </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{outline:none;}//主要是針對火狐等瀏覽器，但IE不行 img{border:0;} a:active{noOutline:expression(this.onFocus=this.blur());}//解決IE6，IE7中的虛線框。

對于a標簽來說，一般簡單的解決辦法是：
在a標簽里加入js控制，當a標簽被聚焦時，強制取消焦點，這時候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去掉右側滾動條，去掉右下角拖拽?

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設置字體

?網頁字體設置

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;

詳細參考：《小tip:CSS3下的漸變文字效果實現》

css3的RGB顏色和HSL顏色，?IE8不識別rgba寫法

其中RGB顏色的原理是通過定義不同的紅綠藍色值來組成一個顏色。color:rgb(254,2,8); 其中HSL是通過色相、飽和度、亮度模式來申明顏色的。color:hsl(359,99%,40%); 如果需要設置透明背景則可以用到他們： background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8); 不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不會。

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;} } 應該有人會發現上面這段代碼里面有個screen，他的意思是在告知設備在打印頁面時使用襯線字體，在屏幕上顯示時用無襯線字體。但是目前我發現很多網站都會直接省略screen,因為你的網站可能不需要考慮用戶去打印時，你可以直接這樣寫： @media (max-width: 960px){body{background: #000;} } 其中css2的媒體查詢： <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"> 我們把第一段的代碼也用CSS2來實現，讓它一樣可以讓頁面寬度小于960的執行指定的樣式文件： <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css"> 但是上面這個方法，最大的弊端是他會增加頁面http的請求次數，增加了頁面負擔，我們用CSS3把樣式都寫在一個文件里面才是最佳的方法。 ? 下面的寫法是實現尺寸等于480px： @media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){//自己添加的樣式}

其中對于-webkit-min-device-pixel-ratio作如下解釋：

-webkit-min-device-pixel-ratio為1.0：

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

-webkit-min-device-pixel-ratio為2.0：

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?

詳情查看：《CSS3的媒體查詢(Media Queries)與移動設備顯示尺寸大全》

樣式實現三角形

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這個屬性吧。

現在規范中支持的效果有：

-?grayscale 灰度 ? ? ? ? ? ? ? 值為0-1之間的小數? -?sepia 褐色　　　　　　 ? 值為0-1之間的小數 -?saturate 飽和度　　　　值為num -?hue-rotate 色相旋轉　　值為angle -?invert 反色　　　　　　 ?值為0-1之間的小數 -?opacity 透明度　　　　　值為0-1之間的小數 -?brightness 亮度　　　　?值為0-1之間的小數 -?contrast 對比度　　　　?值為num -?blur 模糊　　　　　　 ? ? 值為length -?drop-shadow 陰影

用法是標準的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

Pointer-events原本來源于SVG，目前在很多瀏覽器中已經得到體現。不過，要讓任何HTML元素生效還得借助于一點點css。該屬性稱之為pointer-events，基本上可以將它設置為auto，這是正常的行為，而“none”是一個有趣的屬性。
如果你已經設置一個元素的css屬性為pointer-events: none。它將不會捕獲任何click事件，而是讓事件穿過該元素到達下面的元素. Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持，Opera在SVG中支持該屬性但是HTML中不支持。

禁止button按鈕的點擊與禁止a標簽的跳轉

pointer-events:none禁止掉鼠標事件（css3屬性）
禁止button按鈕的點擊：

button禁止點擊的樣式：

button{cursor: not-allowed;}

所以button用到了disabled="disabled"與樣式cursor: not-allowed

禁止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（阿拉伯數字十三）+ ;（小寫分號）
以上符合數字輸入均必須英文半角模式輸入。使用時候，在需要換行地方任選一種（組）換行符號代碼即可。

移動端定寬布局，安卓上文字變大了解決辦法

例如：

那么解決辦法：
給文字區外面的div設最大高度100%。

HTML5:input file控件限制上傳文件類型

input file控件限制上傳文件類型
文件類型中間用，分開 ?
html和htm這樣的要寫成兩個

如果限制上傳文件為圖片類型，如下：

去掉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頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面

忽略將頁面中的數字識別為電話號碼

忽略Android平臺中對郵箱地址的識別

當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari

將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

總結可能用到的meta標簽

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" /><meta name="apple-mobile-web-app-capable" content="yes" /><meta name="apple-mobile-web-app-status-bar-style" content="black" /><meta name="format-detection"content="telephone=no, email=no" />其他meta標簽<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="HandheldFriendly" content="true"><meta name="MobileOptimized" content="320"><meta name="screen-orientation" content="portrait"><meta name="x5-orientation" content="portrait"><meta name="full-screen" content="yes"><meta name="x5-fullscreen" content="true"><meta name="browsermode" content="application"><meta name="x5-page-mode" content="app"><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"> <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以下版本不支持

自己做移動端活動的時候常如下方式：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><meta content="yes" name="apple-mobile-web-app-capable"> <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>

對下面代碼的詳細解釋：

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，為什么呢，首先先看一下各平臺的主流字體支持情況（來源網絡，沒有驗證）！！！

各系統的默認字體和常用字體：

系統	默認西文字體	默認中文字體	其他常用西文字體	其他常用中文字體
Windows	宋體	宋體	Tahoma、Arial、Verdana、Georgia	微軟雅黑、黑體
Android 4.0以下	Droid Sans	Droid Sans Fallback	Aria	無宋體、無微軟雅黑
Android 4.0及以上	Roboto	Roboto	Arial	無宋體、無微軟雅黑
iOS	Helvetica Neue	Heiti SC (黑體)	Tahoma(v7.0)、Arial、Verdana、Georgia	STHeiti(v7.0)、無宋體、無微軟雅黑
Mac OS X 10.6以下	Helvetica Neue	STHeiti (華文黑體)	Tahoma、Arial、Verdana、Georgia	宋體、無微軟雅黑
Mac OS X 10.6及以上	Helvetica Neue	Hiragino Sans GB ?(冬青黑體簡體中文)	Tahoma、Arial、Verdana、Georgia	宋體、無微軟雅黑
winphone 系統	Segoe	Dengxian(方正等線體)	?	無微軟雅黑

需要詳細相關信息，可查看《兼容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 @@ 說明：中文字體多數使用宋體、雅黑，英文用Helveticabody { 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元素比如保存圖像等等

取值：

none：系統默認菜單被禁用

inherit：系統默認菜單不被禁用

詳細參考：《-webkit-touch-callout 》

禁止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代碼：

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下，輸入的時候英文首字母的默認大寫

?如何阻止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中：

豎屏

?橫屏

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;} 但是實際在 iPhone 上測試時，發現 Safari（也包括很多 iOS App 內置瀏覽器使用的 UIWebView）竟然完全禁用掉了著名的「慣性滾動」效果。但解決方法是有的，令人吃驚的是還非常簡單：只有一條 CSS 屬性即可解決問題： 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代碼：

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; }

轉載于:https://www.cnblogs.com/moqiutao/p/4753501.html

總結

以上是生活随笔為你收集整理的[总结]CSS/CSS3常用样式与web移动端资源的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：人间炼狱,人性在哪儿----------
下一篇： Salesforce WhatsApp

CSS

[总结]CSS/CSS3常用样式与web移动端资源

CSS/CSS3常用樣式與知識點

IE條件注釋

針對IE6，7的hack，該怎么寫

行內級元素可以設置寬高嗎？有哪些？

純css 實現footer sticker

CSS font屬性簡寫樣式

CSS修改選中文字的顏色

強制文本顯示

zoom:1的原理和作用

?點擊a標簽里面的圖片，IE中圖片出現虛線框問題

css ie6、ie7中overflow:hidden無效解決辦法

表格語法

設置表格中的td寬度固定table-layout:fixed

合并表格邊框border-collapse:collapse

CSS text-transform控制文本的大小寫

text-stroke

text-shadow

?box-shadow

letter-spacing字符間距

textarea去掉右側滾動條，去掉右下角拖拽?

css中透明度兼容代碼

根據input的type來控制css樣式

css3設置字體

?網頁字體設置

css強制性換行

CSS :first-child 選擇器,:last-child選擇器,nth-child(IE7,8無效，不識別)

css3實現背景顏色漸變

CSS3下的漸變文字效果實現

css3的RGB顏色和HSL顏色，?IE8不識別rgba寫法

初始化em，u的斜體

媒體查詢功能

樣式實現三角形

css3水平垂直居中

?css3屬性 -webkit-filter(改變模糊度 亮度 透明度等方法)

CSS pointer-events

禁止button按鈕的點擊與禁止a標簽的跳轉

樣式改變單詞的大小寫

?html title屬性內容換行方法?

移動端定寬布局，安卓上文字變大了解決辦法

HTML5:input file控件限制上傳文件類型

去掉input聚焦,點擊a標簽，出現的外虛線框

?CSS3 calc中使用vw讓overflow:auto頁面滾動條出現時不跳動

Chrome、Safari等瀏覽器，當表單提交用戶選擇記住密碼后，下次自動填充表單的背景變成黃色，影響了視覺體驗是否可以修改？

meta相關知識

H5頁面窗口自動調整到設備寬度，并禁止用戶縮放頁面

忽略將頁面中的數字識別為電話號碼

忽略Android平臺中對郵箱地址的識別

當網站添加到主屏幕快速啟動方式，可隱藏地址欄，僅針對ios的safari

將網站添加到主屏幕快速啟動方式，僅針對ios的safari頂端狀態條的樣式

總結可能用到的meta標簽

移動端viewport模板

移動端問題總結

移動端如何定義字體font-family

移動端touch事件(區分webkit 和 winphone)

移動端click事件有300 ms的延遲響應問題

觸摸事件的響應順序

清除IOS系統手機對input等表單元素的默認樣式

CSS美化Placeholder提示信息的樣式兼容

webkit表單輸入框placeholder的文字能換行么

?取消a,button等元素被觸摸時產生的半透明灰色遮罩或者虛線框問題

關閉手機端橫屏或者豎屏自動調整字體大小功能

?禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

禁止ios和android用戶選中文字

如何禁止移動端瀏覽器長按對圖片彈出保存

打電話發短信，發郵件的怎么實現

移動端實現類似hover效果

?開啟硬件加速

android 上去掉語音輸入按鈕

取消input在ios下，輸入的時候英文首字母的默認大寫

?如何阻止windows Phone的默認觸摸事件

屏幕旋轉的事件和樣式

CSS3判斷屏幕橫屏

IE10（winphone8）表單元素默認外觀如何重置

Retina 顯示屏的問題

移動端設置滾動條的默認樣式

為移動端頁面中滑動滾動條的時候，添加慣性效果的方法

移動端實現控制文本行數

移動端使用flex讓內容平均分配

css ie6、ie7中overflow:hidden無效解決辦法

?css3屬性 -webkit-filter(改變模糊度亮度透明度等方法)

Chrome、Safari等瀏覽器，當表單提交用戶選擇記住密碼后，下次自動填充表單的背景變成黃色，影響了視覺體驗是否可以修改？