1、清除浮動
浮動給我們的程式碼帶來的麻煩，想必不需要多說，我們會用很多方式來避免這種麻煩，其中我覺得最方便也是相容性最好的一種是....// 清除浮動
.clearfix{
zoom: 1;
}
.clearfix:after{
display: block;
content: '';
clear: both;
}
2、垂直水平居中
在css的世界裡水平居中比垂直居中來的簡單一些，經過了多年的演化，依然沒有好的方式來讓元素垂直居中(各種方式各有優缺點，但都不能達到相容性好，破壞力小的目標)，以下是幾種常見的實現方式絕對定位方式且已知寬高
position: absolute;
top: 50%;
left: 50%;
margin-top: -3em;
margin-left: -7em;
width: 14em;
height: 6em;
絕對定位 ＋ 未知寬高 ＋ translate
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
//需要補充瀏覽器字首
flex 輕鬆搞定水平垂直居中( 未知寬高)
display: flex;
align-items: center;
justify-content: center;
3、 文字末尾新增省略號
當文字的內容超出容器的寬度的時候，我們希望在其預設新增省略號以達到提示使用者內容省略顯示的效果。寬度固定，適合單行顯示...
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
寬度不固定，適合多行以及移動端顯示
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
4、製造文字的模糊效果
當我們希望給文字製造一種模糊效果感覺的時候，可以這樣做color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);
5、動畫實現簡潔loading效果
我們來實現一個非常簡潔的loading效果.loading:after{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: '\2026';
-webkit-animation: ellipsis 2s infinite;
}
// 動畫部分
@-webkit-keyframes ellipsis{
from{
width: 2px;
}
to{
width: 15px;
}
}
6、自定義文字選中樣式
預設情況下，我們在網頁上選中文字的時候，會給選中的部分一個深藍色背景顏色(可以自己拿起滑鼠試試)，如果我們想自己定製被選中的部分的樣式呢？// 注意只能修改這兩個屬性 字型顏色 選中背景顏色
element::selection{
color: green;
background-color: pink;
}
element::-moz-selection{
color: green;
background-color: pink;
}
7、頂角貼紙效果
有時候我們會有這樣的需求，在一個列表展示頁面，有一些列表項是新新增的、或者熱度比較高的，就會要求在其上面新增一個貼紙效果的小條就像hexo預設部落格的fork me on github那個效果一樣，如下圖。 接下來我們開始一步步完成最左邊的這個效果
html
<div class="wrap">
<div class="ribbon">
<a href="#">Fork me on GitHub</a>
</div>
</div>
css
/* 外層容器幾本設定 */
.wrap{
width: 160px;
height:160px;
overflow:hidden;
position: relative;
background-color: #f3f3f3;
}
.ribbon{
background-color: #a00;
overflow: hidden;
white-space: nowrap;
position: absolute;
/* shadom */
-webkit-box-shadow: 0 0 10px #888;
-moz-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
/* rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position */
left: -50px;
top: 40px;
}
.ribbon a{
border: 1px solid #faa;
color: #fff;
display: block;
font: bold 81.25% 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 1px 0;
padding: 10px 50px;
text-align: center;
text-decoration: none;
/* shadow */
text-shadow: 0 0 5px #444;
}
8、input佔位符
當我們給部分input型別的設定placeholder屬性的時候，有的時候需要修改其預設的樣式。input::-webkit-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-moz-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-ms-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
9、移動端可點選元素去處預設邊框
在移動端瀏覽器上，當你點選一個連結或者通過Javascript定義的可點選元素的時候，會出現藍色邊框，說實話，這是很噁心的，怎麼去掉呢?-webkit-tap-highlight-color: rgba(255,255,255,0);
10、首字下沉
要實現類似word中首字下沉的效果可以使用以下程式碼element:first-letter{
float:left;
color:green;
font-size:30px;
}
11、小三角
在很多地方我們可以用得上小三角，接下來我們畫一下四個方向的三角形.triangle{
/* 基礎樣式 */
border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
border-top-color: green;
}
/*上*/
.triangle.top{
border-bottom-color: green;
}
/*左*/
.triangle.top{
border-right-color: green;
}
/*右*/
.triangle.top{
border-left-color: green;
}
可以看出畫一個小三角非常簡單，只要兩行樣式就可以搞定，對於方向只要想著畫哪個方向則設定反方向的樣式屬性就可以
12、滑鼠手型
一般情況下，我們希望在以下元素身上新增滑鼠手型a
submit
input[type="iamge"]
input[type="button"]
button
label
selecta[href],input[type='submit'], input[type='image'],input[type='button'], label[for], select, button {
cursor: pointer;
}
13、遮蔽Webkit移動瀏覽器中元素高亮效果
在訪問移動網站時，你會發現，在選中的元素周圍會出現一些灰色的框框，使用以下程式碼遮蔽這種樣式-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
複製程式碼 移動端相容性問題1.手機旋轉字型會自動調整
*{text-size-adjust:none}
2.click出現點選區域閃一下
a{-webkit-tap-highlight-color:rgba(0,0,0,0)}
3.textarea,input預設框內有陰影
textarea,input{appearance:none}
4.iOS下預設識別頁面中的電話
<meta name="format-detection" contnent="telephone=no">
5.:active相容處理
(1)給body新增ontouchstart
(2)document.addEventListener('touchstart',function(){},false)
6.某些圓角實效
background-clip:padding-box;
7.IE10 Inputy有叉號
input:ms-clear{display:none}複製程式碼 * {
margin: 0;
padding: 0;
text-decoration: none;
-webkit-overflow-scrolling: touch !important;
/*iOS慣性滾動*/
outline: none;
-webkit-font-smoothing: antialiased;
/*字型細長*/
-moz-osx-font-smoothing: grayscale;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
min-width: 900px;
overflow-x: hidden;
font-family: "微軟雅黑";
-webkit-touch-callout: none;
/*禁用長按頁面時的彈出選單*/
-webkit-tap-highlight-color: white;
box-sizing: border-box;
}
li {
list-style: none;
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
img {
border: none;
display: inline-block
}
i {
font-style: normal
}
a {
text-decoration: none;
-webkit-appearance: none;
}
*:focus {
outline: none;
}
input,
textarea,
button {
resize: none;
-webkit-appearance: none;
outline: none;
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
h3,
h4 {
font-weight: normal
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #cecece;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #cecece;
}
input[type="button"],
input[type="submit"],
input[type="file"],
button {
cursor: pointer;
-webkit-appearance: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.hover-hand {
cursor: pointer;
/*懸浮顯示手*/
}
/*禁止選中copy*/
.dont-select {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/*float*/
.left {
float: left;
}
.right {
float: right;
}
.clearfloat:after {
content: "";
display: block;
height: 0;
clear: both;
zoom: 1;
visibility: hidden;
}
.clearfloat {
zoom: 1;
clear: both;
}
.clear {
clear: both;
zoom: 1;
}
.hide {
display: none !important;
}
.show {
display: block;
}
/*font-size*/
.font12 {
font-size: 12px;
}
.font13 {
font-size: 13px;
}
.font14 {
font-size: 14px;
}
.font15 {
font-size: 15px;
}
.font16 {
font-size: 16px;
}
.font18 {
font-size: 18px;
}
.font19 {
font-size: 19px;
}
.font20 {
font-size: 20px;
}
.font22 {
font-size: 22px;
}
.font24 {
font-size: 24px;
}
.font26 {
font-size: 26px;
}
.font28 {
font-size: 28px;
}
.font30 {
font-size: 30px;
}
.font32 {
font-size: 32px;
}
.font36 {
font-size: 36px;
}
.font48 {
font-size: 48px;
}
.font60 {
font-size: 60px;
}
.color-white {
color: white;
}
.color-red {
color: red;
}
.color-green {
color: green;
}
.color-black {
color: black;
}
.cl1685d3 {
color: #1685D3;
}
.bg1685D3 {
background: #1685D3;
}
.color-blue {
color: blue;
}
.color-yellow {
color: yellow;
}
.color-pink {
color: pink;
}
.bg-yellow {
background: yellow;
}
.bg-red {
background: red;
}
.border-blue {
border: 1px solid blue;
}
.border-black {
border: 1px solid black;
}
.border-white {
border: 1px solid white;
}
.tc {
text-align: center;
}
.tl {
text-align: left;
}
.tr {
text-align: right;
}
/*一行多行顯示省略號*/
.one-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*clip 修剪文字。*/
}
.more-line {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
/*flex*/
.flex {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex-flow: row nowrap;
justify-content: flex-start;
/*flex-start | flex-end | center | space-between | space-around;*/
align-items: flex-start;
/*flex-start | flex-end | center | baseline | stretch;*/
align-content: flex-start;
/*flex-start | flex-end | center | space-between | space-around | stretch;*/
align-self: auto;
}
/*移動端1px*/
.onepx-border:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 200%;
height: 200%;
border: 1px solid blue;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
border-radius: 10px;
}
/*滾動條樣式*/
::-webkit-scrollbar {
width: 6px;
height: 6px
}
::-webkit-scrollbar-track-piece {
background: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: #666;
}複製程式碼第二版：
* {
margin: 0;
padding: 0;
border: 0px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
/*清除手機tap事件後element 時候出現的一個高亮*/
text-decoration: none;
-webkit-overflow-scrolling: touch !important;
/*iOS慣性滾動*/
outline: none;
-webkit-font-smoothing: antialiased;
/*字型細長*/
-moz-osx-font-smoothing: grayscale;
}
body {
position: relative;
margin: 0 auto;
width: 100%;
height: 100%;
min-width: 900px;
overflow-x: hidden;
font-family: "微軟雅黑";
-webkit-touch-callout: none;
/*禁用長按頁面時的彈出選單*/
-webkit-tap-highlight-color: white;
box-sizing: border-box;
-webkit-transform: translateZ(0);
/*CSS開啟硬體加速*/
-webkit-backface-visibility: hidden;
/*使用CSS transforms 或者 animations時可能會有頁面閃爍的bug*/
}
li {
list-style: none;
}
ul,
ol {
list-style-type: none;
}
select,
input,
img,
select {
vertical-align: middle;
}
img {
border: none;
display: inline-block
}
i {
font-style: normal
}
a {
text-decoration: none;
-webkit-appearance: none;
}
*:focus {
outline: none;
}
input,
textarea,
button {
resize: none;
-webkit-appearance: none;
/*移除瀏覽器預設的樣式，比如chrome的input預設樣式*/
outline: none;
}
input {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
strong {
font-weight: bold;
}
h3,
h4 {
font-weight: normal
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #cecece;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #cecece;
}
input[type="button"],
input[type="submit"],
input[type="file"],
button {
cursor: pointer;
-webkit-appearance: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.hover-hand {
cursor: pointer;
/*懸浮顯示手*/
}
.use-3D {
-webkit-transform: rotateY(60deg);
/* Chrome, Safari, Opera */
-webkit-transform-style: preserve-3d;
/* Chrome, Safari, Opera */
transform: rotateY(60deg);
transform-style: preserve-3d;
}
.perspective {
/*perspective 透視 : 這個屬性的存在決定你看到的元素是2d還是3d。一般設定在包裹元素的父類上。*/
perspective: 400px;
}
/*禁止選中copy*/
.dont-select {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
/*float*/
.left {
float: left;
}
.right {
float: right;
}
.clearfloat:after {
content: "";
display: block;
height: 0;
clear: both;
zoom: 1;
visibility: hidden;
}
.clearfloat {
zoom: 1;
clear: both;
}
.clear {
clear: both;
zoom: 1;
}
.hide {
display: none !important;
}
.show {
display: block;
}
/*font-size*/
.font12 {
font-size: 12px;
}
.font13 {
font-size: 13px;
}
.font14 {
font-size: 14px;
}
.font15 {
font-size: 15px;
}
.font16 {
font-size: 16px;
}
.font18 {
font-size: 18px;
}
.font19 {
font-size: 19px;
}
.font20 {
font-size: 20px;
}
.font22 {
font-size: 22px;
}
.font24 {
font-size: 24px;
}
.font26 {
font-size: 26px;
}
.font28 {
font-size: 28px;
}
.font30 {
font-size: 30px;
}
.font32 {
font-size: 32px;
}
.font36 {
font-size: 36px;
}
.font48 {
font-size: 48px;
}
.font60 {
font-size: 60px;
}
.color-white {
color: white;
}
.color-red {
color: red;
}
.color-green {
color: green;
}
.color-black {
color: black;
}
.cl1685d3 {
color: #1685D3;
}
.bg1685D3 {
background: #1685D3;
}
.color-blue {
color: blue;
}
.color-yellow {
color: yellow;
}
.color-pink {
color: pink;
}
.bg-yellow {
background: yellow;
}
.bg-red {
background: red;
}
.border-blue {
border: 1px solid blue;
}
.border-black {
border: 1px solid black;
}
.border-white {
border: 1px solid white;
}
.tc {
text-align: center;
}
.tl {
text-align: left;
}
.tr {
text-align: right;
}
/*一行多行顯示省略號*/
.one-line {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
/*clip 修剪文字。*/
}
.more-line {
display: -webkit-box !important;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.auto-gp {
/*自動換行*/
word-wrap: break-word;
word-break: normal;
}
/*flex*/
.flex {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex-flow: row nowrap;
justify-content: flex-start;
/*flex-start | flex-end | center | space-between | space-around;*/
align-items: flex-start;
/*flex-start | flex-end | center | baseline | stretch;*/
align-content: flex-start;
/*flex-start | flex-end | center | space-between | space-around | stretch;*/
align-self: auto;
}
/*移動端1px*/
.onepx-border:before {
content: '';
position: absolute;
top: 0px;
left: 0px;
width: 200%;
height: 200%;
border: 1px solid blue;
transform-origin: 0 0;
transform: scale(0.5, 0.5);
box-sizing: border-box;
border-radius: 10px;
}
/*滾動條樣式*/
::-webkit-scrollbar {
width: 6px;
height: 6px
}
::-webkit-scrollbar-track-piece {
background: #eee;
}
::-webkit-scrollbar-thumb:vertical {
background: #666;
}
複製程式碼解決img元素底部會出現的空白
空白的出現
做網頁設計就避免不了在網頁中新增圖片，一些炫酷的圖片可以是你的網頁增色不少。對於如何在網頁裡新增一個圖片，大家都已經很清楚了，使用< img >標籤就行了。
今天我們來看看在新增圖片過程中出現的一個小問題。為何圖片的底部會出現一個空白間隙呢。
請點選檢視程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div style="border: 1px solid red;">
<!-- 請自行刪掉img前的空格 -->
< img src="http://img6.cache.netease.com/henan/2015/5/11/2015051117081131913_500.jpg" alt="">
</div>
</body>
</html>複製程式碼很簡單的程式碼對嗎?可是它展現的效果會是我們所希望嗎？請看頁面的效果 ：
示例1.png
空白出現的原因
< img >等inline元素預設是和父級元素的 baseline 對齊的，即：vertical-align 的預設值是 baseline；而 baseline 又和父級底邊 bottom 有一定距離。
也就是說，< img >元素的底部只到達下圖中藍線的位置。
因此，圖片底部的迷之空白實際上是baseline和bottom之間的這段距離。
baseline.png
解決空白的出現
既然知道了空白出現的原因，那麼我們怎麼解決這個問題呢？
有三種方法：
設定圖片的 vertical-align
img{ vertical-align: bottom; }複製程式碼設定vertical-align的三個值（top、bottom、middle）中的任何一個都可以解決。
設定圖片父層元素的 font-size 為 0
div{ font-size: 0; }複製程式碼- 把圖片的 display 設定為 block
解決後的效果展示：img{ display: block; }複製程式碼
示例2.png
小結
- inline元素預設是和父級元素的baseline對齊的。
- 圖片底部的迷之空白實際上是baseline和bottom之間的這段距離。
- 我們可以通過設定一些css樣式避免這個空白的出現。
參考資料
以上是對於圖片底部出現空白問題的一些思考和整理，如有不足之處，還請多多指正教導。
移動端web開發技巧
這是一個最好的時代，因為我們站在潮流中；但也是一個最壞的時代，因為我們站在潮頭上。
META相關1. 新增到主屏後的標題（IOS）
<meta name="apple-mobile-web-app-title" content="標題">
複製程式碼2. 啟用 WebApp 全屏模式（IOS）
當網站新增到主螢幕後再點選進行啟動時，可隱藏位址列（從瀏覽器跳轉或輸入連結進入並沒有此效果）
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
複製程式碼3. 百度禁止轉碼
通過百度手機開啟網頁時，百度可能會對你的網頁進行轉碼，往你頁面貼上它的廣告，非常之噁心。不過我們可以通過這個meta標籤來禁止它：
<meta http-equiv="Cache-Control" content="no-siteapp" />
複製程式碼4. 設定狀態列的背景顏色（IOS）
設定狀態列的背景顏色，只有在 "apple-mobile-web-app-capable" content="yes" 時生效
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
複製程式碼content 引數：
- default ：狀態列背景是白色。
- black ：狀態列背景是黑色。
- black-translucent ：狀態列背景是半透明。 如果設定為 default 或 black ,網頁內容從狀態列底部開始。 如果設定為 black-translucent ,網頁內容充滿整個螢幕，頂部會被狀態列遮擋。
5. 移動端手機號碼識別（IOS）
在 iOS Safari （其他瀏覽器和Android均不會）上會對那些看起來像是電話號碼的數字處理為電話連結，比如：
- 7位數字，形如：1234567
- 帶括號及加號的數字，形如：(+86)123456789
- 雙連線線的數字，形如：00-00-00111
- 11位數字，形如：13800138000
可能還有其他型別的數字也會被識別。我們可以通過如下的meta來關閉電話號碼的自動識別：
<meta name="format-detection" content="telephone=no" />
複製程式碼開啟電話功能
<a href="tel:123456">123456</a>
複製程式碼開啟簡訊功能：
<a href="sms:123456">123456</a>
複製程式碼6. 移動端郵箱識別（Android）
與電話號碼的識別一樣，在安卓上會對符合郵箱格式的字串進行識別，我們可以通過如下的meta來管別郵箱的自動識別：
<meta content="email=no" name="format-detection" />
複製程式碼同樣地，我們也可以通過標籤屬性來開啟長按郵箱地址彈出郵件傳送的功能：
<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a>
複製程式碼7. 新增智慧 App 廣告條 Smart App Banner（IOS 6+ Safari）
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
複製程式碼8. IOS Web app啟動動畫
由於iPad 的啟動畫面是不包括狀態列區域的。所以啟動圖片需要減去狀態列區域所對應的方向上的20px大小，相應地在retina裝置上要減去40px的大小
<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
複製程式碼（landscape：橫屏 | portrait：豎屏）
9. 新增到主屏後的APP圖示
指定web app新增到主屏後的圖示路徑，有兩種略微不同的方式：
<!-- 設計原圖 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- 新增高光效果 -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">
複製程式碼- apple-touch-icon：在IOS6及以下的版本會自動為圖示新增一層高光效果（IOS7開始已使用扁平化的設計風格）
- apple-touch-icon-precomposed：使用“設計原圖圖示”
效果：
圖示尺寸：
可通過指定size屬性來為不同的裝置提供不同的圖示（但通常來說，我們只需提供一個114 x 114 pixels大小的圖示即可 ）
官方說明如下
Create different sizes of your app icon for different devices. If you’re creating a universal app, you need to supply app icons in all four sizes.
For iPhone and iPod touch both of these sizes are required:
57 x 57 pixels
114 x 114 pixels (high resolution)
For iPad, both of these sizes are required:
72 x 72 pixels
144 x 144 (high resolution)
複製程式碼10. 優先使用最新版本 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
複製程式碼11.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>標題</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
這裡開始內容
</body>
</html>
複製程式碼常見問題1、移動端如何定義字型font-family
三大手機系統的字型：
ios 系統
- 預設中文字型是Heiti SC
- 預設英文字型是Helvetica
- 預設數字字型是HelveticaNeue
- 無微軟雅黑字型
android 系統
- 預設中文字型是Droidsansfallback
- 預設英文和數字字型是Droid Sans
- 無微軟雅黑字型
winphone 系統
- 預設中文字型是Dengxian(方正等線體)
- 預設英文和數字字型是Segoe
- 無微軟雅黑字型
各個手機系統有自己的預設字型，且都不支援微軟雅黑
如無特殊需求，手機端無需定義中文字型，使用系統預設
英文字型和數字字型可使用 Helvetica ，三種系統都支援
* 移動端定義字型的程式碼 */
body{font-family:Helvetica;}
複製程式碼2、移動端字型單位font-size選擇px還是rem
對於只需要適配手機裝置，使用px即可
對於需要適配各種移動裝置，使用rem，例如只需要適配iPhone和iPad等解析度差別比較挺大的裝置
rem配置參考：
html {font-size:10px}
@media screen and (min-width:480px) and (max-width:639px) {
html {
font-size: 15px
}
}
@media screen and (min-width:640px) and (max-width:719px) {
html {
font-size: 20px
}
}
@media screen and (min-width:720px) and (max-width:749px) {
html {
font-size: 22.5px
}
}
@media screen and (min-width:750px) and (max-width:799px) {
html {
font-size: 23.5px
}
}
@media screen and (min-width:800px) and (max-width:959px) {
html {
font-size: 25px
}
}
@media screen and (min-width:960px) and (max-width:1079px) {
html {
font-size: 30px
}
}
@media screen and (min-width:1080px) {
html {
font-size: 32px
}
}
複製程式碼3、移動端touch事件(區分webkit 和 winphone)
當使用者手指放在移動裝置在螢幕上滑動會觸發的touch事件
以下支援webkit
- touchstart——當手指觸碰螢幕時候發生。不管當前有多少隻手指
- touchmove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫event的preventDefault()可以阻止預設情況的發生：阻止頁面滾動
- touchend——當手指離開螢幕時觸發
- touchcancel——系統停止跟蹤觸控時候會觸發。例如在觸控過程中突然頁面alert()一個提示框，此時會觸發該事件，這個事件比較少用
以下支援winphone 8
- MSPointerDown——當手指觸碰螢幕時候發生。不管當前有多少隻手指
- MSPointerMove——當手指在螢幕上滑動時連續觸發。通常我們再滑屏頁面，會呼叫css的html{-ms-touch-action: none;}可以阻止預設情況的發生：阻止頁面滾動
- MSPointerUp——當手指離開螢幕時觸發
4、移動端click螢幕產生200-300 ms的延遲響應
移動裝置上的web網頁是有300ms延遲的，玩玩會造成按鈕點選延遲甚至是點選失效。
以下是歷史原因：
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延遲
- zepto的touch模組，tap事件也是為了解決在click的延遲問題
觸控事件的響應順序
1、ontouchstart
2、ontouchmove
3、ontouchend
4、onclick
複製程式碼解決300ms延遲的問題，也可以通過繫結ontouchstart事件，加快對事件的響應
5、什麼是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}
複製程式碼6、ios系統中元素被觸控時產生的半透明灰色遮罩怎麼去掉
ios使用者點選一個連結，會出現一個半透明灰色遮罩, 如果想要禁用，可設定-webkit-tap-highlight-color的alpha值為0，也就是屬性值的最後一位設定為0就可以去除半透明灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)}
複製程式碼7、部分android系統中元素被點選時產生的邊框怎麼去掉
android使用者點選一個連結，會出現一個邊框或者半透明灰色遮罩, 不同生產商定義出來額效果不一樣，可設定-webkit-tap-highlight-color的alpha值為0去除部分機器自帶的效果
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only;
}
複製程式碼-webkit-user-modify有個副作用，就是輸入法不再能夠輸入多個字元
另外，有些機型去除不了，如小米2
對於按鈕類還有個辦法，不使用a或者input標籤，直接用div標籤
8、winphone系統a、input標籤被點選時產生的半透明灰色背景怎麼去掉
<meta name="msapplication-tap-highlight" content="no">
複製程式碼9、webkit表單元素的預設外觀怎麼重置
.css{-webkit-appearance:none;}
複製程式碼10、webkit表單輸入框placeholder的顏色值能改變麼
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}
複製程式碼11、webkit表單輸入框placeholder的文字能換行麼
ios可以，android不行~
12. 關閉iOS鍵盤首字母自動大寫
在iOS中，預設情況下鍵盤是開啟首字母大寫的功能的，如果啟用這個功能，可以這樣：
<input type="text" autocapitalize="off" />
複製程式碼13. 關閉iOS輸入自動修正
和英文輸入預設自動首字母大寫那樣，IOS還做了一個功能，預設輸入法會開啟自動修正輸入內容，這樣的話，使用者經常要操作兩次。如果不希望開啟此功能，我們可以通過input標籤屬性來關閉掉：
<input type="text" autocorrect="off" />
複製程式碼14. 禁止文字縮放
當移動裝置橫豎屏切換時，文字的大小會重新計算，進行相應的縮放，當我們不需要這種情況時，可以選擇禁止：
html {
-webkit-text-size-adjust: 100%;
}
複製程式碼需要注意的是，PC端的該屬性已經被移除，該屬性在移動端要生效，必須設定 `meta viewport’。
15. 移動端如何清除輸入框內陰影
在iOS上，輸入框預設有內部陰影，但無法使用 box-shadow 來清除，如果不需要陰影，可以這樣關閉：
input,
textarea {
border: 0; /* 方法1 */
-webkit-appearance: none; /* 方法2 */
}
複製程式碼16. 快速回彈滾動
我們先來看看回彈滾動在手機瀏覽器發展的歷史：
- 早期的時候，移動端的瀏覽器都不支援非body元素的滾動條，所以一般都藉助 iScroll;
- Android 3.0/iOS解決了非body元素的滾動問題，但滾動條不可見，同時iOS上只能通過2個手指進行滾動；
- Android 4.0解決了滾動條不可見及增加了快速回彈滾動效果，不過隨後這個特性又被移除；
- iOS從5.0開始解決了滾動條不可見及增加了快速回彈滾動效果
在iOS上如果你想讓一個元素擁有像 Native 的滾動效果，你可以這樣做：
.xxx {
overflow: auto; /* auto | scroll */
-webkit-overflow-scrolling: touch;
}
複製程式碼PS：iScroll用過之後感覺不是很好，有一些詭異的bug，這裡推薦另外一個 iDangero Swiper，這個外掛整合了滑屏滾動的強大功能（支援3D），而且還有回彈滾動的內建滾動條，官方地址：
17. 移動端禁止選中內容
如果你不想使用者可以選中頁面中的內容，那麼你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all （移動端不需要） */
-ms-user-select: none; /* IE 10+ */
}
複製程式碼18. 移動端取消touch高亮效果
在做移動端頁面時，會發現所有a標籤在觸發點選時或者所有設定了偽類 :active 的元素，預設都會在啟用狀態時，顯示高亮框，如果不想要這個高亮，那麼你可以通過css以下方法來進行全域性的禁止：
html {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
複製程式碼但這個方法在三星的機子上無效，有一種妥協的方法是把頁面非真實跳轉連結的a標籤換成其它標籤，可以解決這個問題。
19. 如何禁止儲存或拷貝影像（IOS）
通常當你在手機或者pad上長按影像 img ，會彈出選項 儲存影像 或者 拷貝影像，如果你不想讓使用者這麼操作，那麼你可以通過以下方法來禁止：
img { -webkit-touch-callout: none; }
複製程式碼20.模擬按鈕hover效果
移動端觸控按鈕的效果，可明示使用者有些事情正要發生，是一個比較好體驗，但是移動裝置中並沒有滑鼠指標，使用css的hover並不能滿足我們的需求，還好國外有個啟用css的active效果，程式碼如下，
<!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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue:active{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
document.addEventListener("touchstart", function(){}, true)
</script>
</body>
</html>
複製程式碼相容性ios5+、部分android 4+、winphone 8
要做到全相容的辦法，可通過繫結ontouchstart和ontouchend來控制按鈕的類名
<!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">
<style type="text/css">
a{-webkit-tap-highlight-color: rgba(0,0,0,0);}
.btn-blue{display:block;height:42px;line-height:42px;text-align:center;border-radius:4px;font-size:18px;color:#FFFFFF;background-color: #4185F3;}
.btn-blue-on{background-color: #357AE8;}
</style>
</head>
<body>
<div class="btn-blue">按鈕</div>
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
this.className = "btn-blue"
}
</script>
</body>
</html>
複製程式碼21.螢幕旋轉的事件和樣式
事件
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;
}
}
複製程式碼樣式
//豎屏時使用的樣式
@media all and (orientation:portrait) {
.css{}
}
//橫屏時使用的樣式
@media all and (orientation:landscape) {
.css{}
}
複製程式碼22.audio元素和video元素在ios和andriod中無法自動播放
應對方案：觸屏即播
$('html').one('touchstart',function(){
audio.play()
})
複製程式碼23.搖一搖功能
HTML5 deviceMotion：封裝了運動感測器資料的事件，可以獲取手機運動狀態下的運動加速度等資料。
24.手機拍照和上傳圖片
<input type="file">的accept 屬性
<!-- 選擇照片 -->
<input type=file accept="image/*">
<!-- 選擇視訊 -->
<input type=file accept="video/*">
複製程式碼使用總結：
- ios 有拍照、錄影、選取本地圖片功能
- 部分android只有選取本地圖片功能
- winphone不支援
- input控制元件預設外觀醜陋
25. 消除transition閃屏
.css{
/*設定內嵌的元素在 3D 空間如何呈現：保留 3D*/
-webkit-transform-style: preserve-3d;
/*（設定進行轉換的元素的背面在面對使用者時是否可見：隱藏）*/
-webkit-backface-visibility: hidden;
}
複製程式碼開啟硬體加速
- 解決頁面閃白
保證動畫流暢
.css { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } 複製程式碼
設計高效能CSS3動畫的幾個要素
- 儘可能地使用合成屬性transform和opacity來設計CSS3動畫，
- 不使用position的left和top來定位
- 利用translate3D開啟GPU加速
26. android 上去掉語音輸入按鈕
input::-webkit-input-speech-button {display: none}
複製程式碼框架1. 移動端基礎框架
- zepto.js 語法與jquery幾乎一樣，會jquery基本會zepto~
iscroll.js 解決頁面不支援彈性滾動，不支援fixed引起的問題~ 實現下拉重新整理，滑屏，縮放等功能~
underscore.js 該庫提供了一整套函數語言程式設計的實用功能，但是沒有擴充套件任何JavaScript內建物件。
- fastclick 加快移動端點選響應時間
animate.css CSS3動畫效果庫
Normalize.css Normalize.css是一種現代的、CSS reset為HTML5準備的優質替代方案
2. 滑屏框架
適合上下滑屏、左右滑屏等滑屏切換頁面的效果
3.瀑布流框架
工具推薦