移動端開發

移動端開發

一、

 

 有一個像素比：window.devicePixelRatio,像素比就是把一個像素放大至幾像素去顯示，好比說：像素比是2，一像素就會以2像素的形式顯示。

二、移動端禁止識別電話號碼和郵箱號碼

<meta name=」format-detection」 content=」telephone=no,email=no」>

若是有需求須要識別撥打電話，就能夠實現撥打電話功能了

<a href=」tel:電話號碼」 >

<a href=」mailto:郵箱地址」 >

在a input button標籤點擊時會有陰影顯示，在css中設置成全透明就能夠了

 

 在iOS系統中，按鈕會默認有圓角顯示，在css中去除

 

 字體設置Body{font-family：helvetica}

禁止文字縮放：body *{-webkit-text-size-adjust:100%;}

選中文字設置：body *{-webkit-user-select：none;}

 

其餘問題：

一、 font-boosting

二、 viewport適配

三、 rem適配

彈性盒模型

一、新版的彈性盒模型：是在父級標籤上添加display: flex;/*

老版彈性盒模型, 在父級標籤上要使用-webkit-box */display: -webkit-box;

二、 在父級標籤使用了彈性盒模型的時候，在父級標籤中會造成一條個主軸，x方向（主軸）和y方向（側軸）

三、 定義彈性盒模型主軸方向：

（新版）flex-direction:row/column

（老版）-webkit-box-orient:horizontal（水平方向）/vertical（垂直方向）

四、 主軸上元素的排列方向

（新版）flex-direction:row-reverse/column-reverse（逆向）從右邊（下邊）開始逆向排序

（老版）-webkit-box-direction:normal（正常），reverse（反向）從左邊（上邊）開始逆序排列

五、 主軸方向富裕空間處理（多出來的空間）

（新版）justify-content：flex-start（元素在主軸開始的位置，富裕空間在主軸結束位置）

（新版）justify-content：flex-end（富裕空間在主軸開始的位置，元素在主軸結束位置）

（新版）justify-content：center（元素在主軸中間的位置，富裕空間在兩側位置）

（新版）justify-content：space-between（富裕空間平均分配在每兩個元素之間）

（新版）justify-content：space-around（富裕空間平均分配在每一個元素兩側）

 

（老版）-webkit-box-pack:start（元素在主軸開始的位置，富裕空間在主軸結束位置）

（老版）-webkit-box-pack: end（富裕空間在主軸開始的位置，元素在主軸結束位置）

（老版）-webkit-box-pack: center（元素在主軸中間的位置，富裕空間在兩側位置）

（老版）-webkit-box-pack: justify（富裕空間平均分配在每兩個元素之間）

六、 側軸方向富裕空間管理

（新版）align-items:flex-start（元素在側軸開始的位置，富裕空間在側軸結束位置）

（新版）align-items:flex-end（富裕空間在側軸開始位置，元素在側軸結束的位置）

（新版）align-items:center（元素在側軸中間的位置，富裕空間在側軸兩側位置）

（老版）-webkit-box- align:start（元素在側軸開始的位置，富裕空間在側軸結束位置）

（老版）-webkit-box- align: end（富裕空間在側軸開始的位置，元素在側軸結束位置）

（老版）-webkit-box- align: center（元素在側軸中間的位置，富裕空間在兩側位置）

七、 彈性盒模型的彈性空間（加在本身身上的）

（新版）flex-grow：1,

（老版）-webkit-box-flex：1

子元素的寬度=盒子的寬度*（該子元素flex-grow的值/全部元素flex-grow的值的和）

八、 元素的具體位置的設置（加在本身身上的）

（新版）order：數值，值越小越靠前，能夠接受0和負值。

（老版）-webkit-box-ordinal-group：數值，值越小越靠前，接受0和負值默認處理爲1。

媒體查詢

一、全部媒體類型

 

a、在彩屏設備上，box的顯示背景爲紅色

@media screen {

          .box{background:red}

}

B、在全部設備上，box的顯示背景爲紅色

@media all {

          .box{background:red}

}

c、僅僅在彩屏設備下，寬度大於等於500的時候識別

@media only screen (min-width:500px ){

          .box{background:red}

}

d、僅僅在彩屏設備下，寬度小於等於500的時候識別

@media only screen (max-width:500px ){

          .box{background:red}}

 ！！！注意：screen和後面的括號要有一個空格才能夠識別

E、@media (orientation:protrait) {}在設備豎屏的時候識別，@media (orientation:landscape){}在設備橫屏的時候識別(原理是檢測可視區的寬高比，通常不用此方法識別)