移動端網站開發前端學習總結

1.關於適配:

移動端適配可使用lib-flexible（也可配合百分比寬度一塊兒使用）十分適用於webapp適配

Font-size默認爲12px 以rem爲單位。

關於lib-flexible詳解：http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html

 

注意：應用lib-flexible與響應式佈局(媒介查詢應用不一樣的樣式)難以兼容，由於lib-flexible會改變媒體查詢關鍵的width屬性 使其不許確 參考

lib-flexible的問題研究：http://www.javashuo.com/article/p-veekudef-gy.html

 

.container設置max-width: 640px；width: 100%;。應用lib-flexible時也可設置爲固定寬度width:10rem;overflow: hidden;（兩者都是將屏幕的width等分出來的單位，顯示效果通常無二）

 

2.webapp的1px邊框過粗問題（還沒發現簡單可靠的方案）

如今大部分手機的分辨率很高，一個css像素1px，可能至關於2個甚至3個物理分辨率像素

致使1px會比實際的粗（雖然使用lib-flexible，但在在安卓設備下，此問題依然存在）

解決方法(利用transform達到零點幾px的效果)：

https://www.cnblogs.com/lunarorbitx/p/5287309.html

 

2.input 有placeholder狀況下不要設置行高，不然會偏上

placeholder屬性會使文本位置偏上時解決辦法：line-height: （和input框的高度同樣高）---pc端解決方法 line-height：normal ---移動端解決方法

 

3.爲了更好的兼容，會使用完整的viewport設置（<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />）

 

viewport也可做爲寬度單位，一些參數設定，width viewport 寬度(數值/device-width)，height viewport 高度(數值/device-height)，initial-scale 初始縮放比例，user-scalable 是否容許用戶縮放(yes/no)。

 

關於meta：http://www.cnblogs.com/libin-1/p/5979300.html

 

1. Display:flex;能夠達到很好的佈局效果，自適應效果不錯 注意：定義了flex、align-items等 後 子元素magain 和 float屬性受影響甚至失效

 Flex彈性佈局詳解：https://www.cnblogs.com/nuannuan7362/p/5823381.html

 

5.有表單元素的地方通常須要外面加上form元素作父容器，並加上submit

 

6.在input框得到焦點時文字被清空用value 在input框輸入文字時被清空用placeholder

 

7.當border對佈局產生影響時（border會致使容器所佔面積變大），可用屬性box-sizing:border-box解決（border在元素內部了，不會在外面佔空間）

 

8.webkit表單元素的默認外觀怎麼重置

.css{-webkit-appearance:none;}

清除input默認樣式

.Input{border-color:transparent;outline:none;;border-width 0;:padding:0 0；}

 

9.媒體查詢：給不一樣屏幕大小的手機設置特殊樣式

@media only screen  and (min-device-width : 320px)  and (max-device-width : 375px){}

 

1. 可用於圖片適配查詢devicePixelRatio＝2，採用2x的背景圖（background-size:contain）

高清屏及適配不一樣設備的方案總結：https://www.cnblogs.com/sese/p/5977486.html

 

11.用aftet僞類和定位能夠對盒子達到特殊的修飾效果

爲盒子底部加上一條寬度爲96%的邊框

.div:after{

    position: absolute;

    bottom: 0;

    left: 4%;

    content: '';

    display: block;

    height: 1px;

    width: 96%;

    

}

 

12.input::-webkit-input-placeholder{ color: #******;}//改變提示字體的顏色，不會改變用戶輸入字的顏色（pc端頁面還要寫兼容性）

 

13.font-family: 'Microsoft YaHei','Cabin', 'Arial', 'STXihei', '華文細黑', 'SimSun', '宋體', 'Heiti', '黑體', 'STSong';（默認微軟雅黑，若是沒有微軟雅黑再用其它的字體，電腦端也是同樣）

 

1. 父元素若是有旋轉屬性或者scare放大縮小屬性都會使得pisition:flex失靈變成pisition：absolute的效果

大神的解釋：https://www.zhangxinxu.com/wordpress/2015/05/css3-transform-affect/

 

15.用p標籤與高度相關時必須要設置line-hight(沒有特殊要求時設爲font-size的值)，由於p標籤會默認行高爲字體大小加上下留的空白高度（默認上下留白）

 

16.去除-webkit-的滾動條

#content::-webkit-scrollbar{ display：none; }

設置滾動條樣式

/*滾動條寬度*/

#content::-webkit-scrollbar{ width:5px; }

/*滾動條滑塊*/

#content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.25); border-radius:3px; }

/*滾動條的整個背景*/

#content::-webkit-scrollbar-track-piece{ background:#eee; }

 

1. text-align:justify規定如何對齊行文本進行對齊和分隔，對於長文本行內整齊效果好

注意（多行使用時當文字兩端佔滿整行寬度時纔有效.）

 

18.阻止旋轉屏幕時自動調整字體大小html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

 

19.禁止用戶選中文字

 -webkit-user-select:none

 

20.flex佈局兼容性問題(移動端兼容性較爲良好)

Android ;2.3 開始就支持舊版本 display:-webkit-box;4.4 開始支持標準版本 display: flex;

IOS： 6.1 開始支持舊版本 display:-webkit-box;，7.1 開始支持標準版本display: flex;

 

1. 移動端字體小於12px使用四周邊框或者背景色塊，可能出現安卓文字偏上bug問題，可使用總體放大1倍再縮放scale，並且字體不要是奇數

 

不足：改用a標籤（有連接跳轉的地方）， 像最左、最右、居中此類有特色的位置要保證在任何狀況下都能保持特色（好比居中用百分比定位，左右用flex佈局屬性、margin-最左用left、或者浮動），  不要只考慮展現效果（也要爲交互便捷考慮好比有兩個地方應用input range和select）， 瞭解webkit對標籤或input控件的渲染效果，內部的標籤要活用不要只用div減小識別性和快捷性，關於文件放置相同功能模塊的網頁和css放在一個文件夾下面，index，login等跳轉功能較多或模塊的主體頁面放在最外層，要寫各類機型的兼容HTC、三星等（騰訊gituht上有）