移動端佈局的心得

1.字體大小 font-sizepx/em/rem

• px像素
• em:根據父級的字體大小有關,1em表示是父級字體大小一致
• rem:根據html標籤的字體大小有關,1rem表示和html標籤字體大小一致,默認16px,
• rem:設置 nrem.表示把字體大小設置成和html標籤的字體大小n陪,若是html沒有設置則默認font-size:16px;

2.自定義字體：字體名字2字體src:url+format

<style>
     @font-face{
font-family:"demo字體";
src:url("路徑地址") fromat("truetype"');
       }
     .customFont{
       font-family:"demo字體";
     }

</style>
<p>one</p>
<p class='customFont'>two</p>

3.  居中適配的問題

//第一種方法

.box{

//先寫舊版flex,在適配新版

  display: -webkit-box;

//設置水平居中

  -webkit-box-pack: center;

//設置垂直居中

  -webkit-box-align: center;

  //適配新版flex

  display: -webkit-flex;;

  display: flex

//設置水平居中

  -webkit-justify-content: center;

  justify-content: center;

//設置垂直居中

  -webkit-align-items: center;

  align-items: center;

/* 在移動web中,使用flex佈局的時候,爲了讓渲染效果更好,先寫舊版flex,再適配新版 */

  }

 

第二種：calc是css3的屬性，可是在安卓UC瀏覽器中兼容很差，通常再也不移動web中使用

 父級設置relative

.son{

  position: absolute;

  left: -webkit-calc(50% - 50px);

  left: -moz-calc(50% - 50px)

  left: calc(50% - 50px)

  top: -webkit-calc(50% - 50px);//須要注意的是，運算符先後都須要保留一個空格；

  top: -moz-calc(50% - 50px)

  top: calc(50% - 50px)

}

 

第三種：父級設置relative

box{

  position: absolute;

  width: 100px;

  height: 100px;

  left:50%;

  top:50%;

-webkit-transform: translate(-50% -50%);
-moz-transform: translate(-50% -50%);
-ms-transform: translate(-50% -50%);
-o-transform: translate(-50% -50%);
transform: translate(-50% -50%);
}

 

第四種：

box{

  position: absolute;

  width: 100px;

  height: 100px;

  left:50%;

  top:50%;

  margin-top:-50px;

  margin-left:-50px;

  }

注意：在定位的時候，必定不要忘了寫top、left、right、bottom的值。雖然在有些手機上不寫樣式不會亂掉，看起來沒問題。可是爲了確保萬一，必定要寫上。不要犯這種低級錯誤。

以前在寫移動端的頁面的時候就時忘了寫這幾個屬性的值，而是直接用margin-left、margin-top直接定位，結果在發如今蘋果手機上出現了樣式排版偏移的問題。

  position: absolute/fixed/relative;
     left: 0;
     right: 0;
     bottom: 0;
     top: 0;

4.重點說說彈性佈局flex的兼容問題:

彈性佈局雖然好用，但兼容性並不太好，除了瀏覽器實現有差別外,PC與移動端也有差別。

display: flex 與 display: box都用於彈性佈局。display: box是2009年的命名，display: flex是2012以後的命名。但display: flex不能徹底的向後兼容，有些瀏覽器不支持。（display: box 不多用）

div{
//2009後的瀏覽器生效
 display:-webkit-box;
//2011後的瀏覽器生效
 display:-webkit-flex;
//2012後的瀏覽器生效
 display:flex;
}

display:flex

PC端：Chrome和Firefox支持度都很好，IE不支持。 

移動端：

• iOS Safari支持，UC支持，微信瀏覽器不支持
• Android 原生瀏覽器 UC 微信都不支持

display:box

PC端：Chrome和Firefox支持度都很好，IE不支持。 

 移動端：

• iOS Safari支持，UC支持，微信瀏覽器不支持
• Android 原生瀏覽器 UC 支持

總結起來：IE都不支持，所以這個技術用於移動端是比較理想的，由於移動端的瀏覽器內核基本爲webkit。

.container{
display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
display: -moz-box; /* Firefox 17- */
display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
display: -moz-flex; /* Firefox 18+ */
display: -ms-flexbox; /* IE 10 */
display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
}

5.文本溢出隱藏顯示省略號

單行語法：

.text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;    
}

多行語法：

.text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

直接用css屬性設置(只有-webkit內核纔有做用)

移動端瀏覽器絕大部分是WebKit內核的，因此該方法適用於移動端；

• -webkit-line-clamp 用來限制在一個塊元素顯示的文本的行數,這是一個不規範的屬性（unsupported WebKit property），它沒有出如今 CSS 規範草案中。
• display: -webkit-box 將對象做爲彈性伸縮盒子模型顯示 。
• -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式 。
• text-overflow: ellipsis 以用來多行文本的狀況下，用省略號「…」隱藏超出範圍的文本

6. 移動web觸動事件

6.1on和addEventListener

1.寫法上addEventListener中的相應事件不用加on前綴(onclick-->click)

2.on事件屢次添加,以後執行最後一次,addEventListener事件每次添加都會生效

3.addEventListener:執行順序是冒泡規則,:從小到大(從兒子到祖宗)

4.addEventListener:事件捕獲順序規則:從大到小(從祖宗到兒子)

addEventListener的參數講解:

element.addEventListener(event, function, useCapture)

參數1:必須,字符串,指定事件名稱,不需加on

參數2:必須,function,指定要事件觸發時執行的函數

參數3:可選,布爾值,指定事件是否捕獲或者冒泡階段執行

true:事件句柄在捕獲階段執行

false:默認,事件在冒泡階段執行

這篇 文章講的很詳細二者的區別

 

6.2使用addEventListener添加事件監聽

 

addEventListener('touchstart',function(e){})

表示手觸碰到屏幕是觸發,無論當前有多少隻手指

 

addEventListener('touchmove',function(e){})

表示手觸動在屏幕上滑動時觸發e.preventDefault()來阻止默認觸發的頁面滾動事件

 

addEventListener('touchend',function(e){})

表示手離開屏幕時觸發

 

addEventListener('touchmove',function(e){
console.log(e.target); //表示手觸動的當前元素對象
console.log(e.touches); //頁面上的全部觸摸點
console.log(e.touches[0]); //touches[0]觸摸點的第一個元素有許多可使用的參數
})

 

event事件的參數

targetTouches 目標元素的全部當前觸摸點

changedTouches 頁面上最新更改的全部觸摸點

touches 頁面上的全部觸摸點

touches[0]裏面有如下屬性

在每一個觸摸點中咱們能夠獲取如下屬性

- clientX:觸摸目標在視口中的X座標。

 

- clientY:觸摸目標在視口中的Y座標。

 

- pageX：觸摸目標在頁面中的x座標。

 

- pageY：觸摸目標在頁面中的y座標。

 

- screenX:觸摸目標在屏幕中的x座標。

 

- screenY:觸摸目標在屏幕中的y座標。

 

- target:觸摸的DOM節點座標