web移動端與Hybird開發知識整理
meta篇
1.視窗寬度
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
- 其中 width=device-width 是設定視窗寬度為裝置視窗寬度,還可以固定寬度,例如: width=640
則是640px的寬度(常見於微信); - initial-scale=1.0 :設定縮放比例為1.0;
- minimum-scale=1.0 和 maximum-scale=1.0 :最小縮放比例和最大縮放比例;
- user-scalable=no :禁止使用者自由縮放,user-scalable 預設值為 yes 。
提示:剛剛那個是帶全部引數的,一般常用的,有 user-scalable=no 就不用使用 minimum-scale=1.0 和 maximum-scale=1.0 來強制禁止縮放了。
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
2.自動識別格式
<meta name="format-detection" content="telephone=no"/>
content 裡面的引數:telephone=no 是禁止瀏覽器自動識別手機號碼,email=no 是禁止瀏覽器自動識別Email。
3.完整模板
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/> <meta name="format-detection" content="telephone=no"/> <meta name="format-detection" content="email=no"/>
CSS篇
body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用無襯線字型*/ } a, img { -webkit-touch-callout: none; /*禁止長按連結與圖片彈出選單*/ } html, body { -webkit-user-select: none; /*禁止選中文字*/ user-select: none; } button,input,optgroup,select,textarea { -webkit-appearance:none; /*去掉webkit預設的表單樣式*/ } a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button點選時的藍色外邊框和灰色半透明背景*/ } input::-webkit-input-placeholder { color:#ccc; /*修改webkit中input的planceholder樣式*/ } input:focus::-webkit-input-placeholder { color:#f00; /*修改webkit中focus狀態下input的planceholder樣式*/:#f00; /*修改webkit中focus狀態下input的planceholder樣式*/ }} body {{ -webkit-text-size-adjust: 100%!important; /*禁止IOS調整字型大小*/-webkit-text-size-adjust: 100%!important; /*禁止IOS調整字型大小*/ }} input::-webkit-input-speech-button {::-webkit-input-speech-button { display: none; /*隱藏Android的語音輸入按鈕*/: none; /*隱藏Android的語音輸入按鈕*/ }}
Flex基礎篇
這裡假設flex容器為 .box ,子元素為 .item 。
1.定義容器為flex佈局
.box{ display: -webkit-flex; /*webkit*/ display: flex; } /*行內flex*/ .box{ display: -webkit-inline-flex; /*webkit*/ display:inline-flex; }
2.容器樣式
.box{ flex-direction: row | row-reverse | column | column-reverse; /*主軸方向:左到右(預設) | 右到左 | 上到下 | 下到上*/ flex-wrap: nowrap | wrap | wrap-reverse; /*換行:不換行(預設) | 換行 | 換行並第一行在下方*/ flex-flow: flex-direction flex-wrap|initial|inherit; /*flex-direction :row | row-reverse | column | column-reverse | initial | inherit | 預設值是 "row"。*/ /*flex-wrap: nowrap | wrap | wrap-reverse | initial | inherit | 預設值是 "nowrap"。*/ /* initial 設定該屬性為它的預設值。*/ /* inherit 從父元素繼承該屬性。*/ /*主軸方向和換行簡寫*/ justify-content: flex-start | flex-end | center | space-between | space-around; /*主軸對齊方式:左對齊(預設) | 右對齊 | 居中對齊 | 兩端對齊 | 平均分佈*/ align-items: flex-start | flex-end | center | baseline | stretch; /*交叉軸對齊方式:頂部對齊(預設) | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/ align-content: flex-start | flex-end | center | space-between | space-around | stretch; /*多主軸對齊:頂部對齊(預設) | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 上下平均分佈*/ }
3.子元素樣式
.item{ order: <integer>; /*排序:數值越小,越排前,預設為0*/ flex-grow: <number>; /* default 0 */ /*放大:預設0(即如果有剩餘空間也不放大,值為1則放大,2是1的雙倍大小,以此類推)*/ flex-shrink: <number>; /* default 1 */ /*縮小:預設1(如果空間不足則會縮小,值為0不縮小)*/ flex-basis: <length> | auto; /* default auto */ /*固定大小:預設為0,可以設定px值,也可以設定百分比大小*/ flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] /*flex-grow, flex-shrink 和 flex-basis的簡寫,預設值為0 1 auto,*/ align-self: auto | flex-start | flex-end | center | baseline | stretch; /*單獨對齊方式:自動(預設) | 頂部對齊 | 底部對齊 | 居中對齊 | 上下對齊並鋪滿 | 文字基線對齊*/ }
小技巧篇
1.自定義蘋果圖示
在網站檔案根目錄放一個 apple-touch-icon.png 檔案,蘋果裝置儲存網站為書籤或桌面快捷方式時,就會使用這個檔案作為圖示,檔案尺寸建議為:180px × 180px。
2.自定義favicon:
<link rel="icon" href="favicon.ico" mce_href="favicon.ico" type="image/x-icon">
3.定義瀏覽器點選行為:
<a href="tel:020-10086">打電話給:020-10086</a> <a href="sms:10086">發簡訊給: 10086</a> <a href="mailto:[email protected]">傳送郵件: [email protected]</a>
4.定義上傳檔案型別和格式
<input type=file accept="image/*">
上面的檔案上傳框中,accept 可以限制上傳檔案的型別,引數為 image/ 是所有圖片型別,點選會彈出相簿,也可以指定圖片格式,引數設定成 image/png 則可以限制圖片型別為png;引數如果為 video/ 則是選擇視訊的意思;accept 還可以設定多個檔案格式,語法為 accept="image/gif, image/jpeg" ;
5.使用box-shadow改變(擋住)表單自動填充後的黃色
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ box-shadow:inset 0 0 0 1000px #fff; }
6.用CSS實現省略號文字截斷
white-space: nowrap; text-overflow: ellipsis; 相容參考:[連結描述][1]
7.使用border繪製小三角
原理是:上下和左右的邊框對接其實是個斜角,利用這個特性,使其中一邊的邊框透明,另外一邊寫成想要的顏色並隱藏對邊,就可以變成小箭頭形狀。
border-width: 10px 10px 10px 0; //左箭頭 border-color: transparent #fff; border-style: solid; width: 0;
Tootip寫法:
<!--html--> <div class="box">嗨!</div> /*--css--*/ .box{ position: relative; padding: 0 20px; width: 380px; height: 80px; border-radius: 8px; background: #efefef; font-size: 18px; line-height: 80px; } .box:after{ position: absolute; top: 50%; left: -15px; z-index: 1; display: block; margin-top: -15px; width: 0; border-color: transparent #efefef; border-style: solid; border-width: 15px 15px 15px 0; content: ""; }
;
【文章來源:移動WEB前端開發資源整合 - 兮兮】