移動端

時間 2019-11-09

標籤移動欄目無線简体版

原文原文鏈接

移動端指運行在移動設備瀏覽器（或webview）中的h5頁面；在移動端沒有IE瀏覽器的兼容性問題，可使用新技術

原生App 直接運行在操做系統中的應用

優點運行流暢下載一次永久使用
劣勢可移植性差 IOS 和 Android 不通用時效性差升級在用戶手裏

web app

優勢開發效率高沒有平臺限制服務供應商擁有更新主動權

Hybrid App
1. 原生app中中嵌 webview(相似瀏覽器的東西)，業務功能使用html+js完成

HTML5 新增的標籤

經常使用標記
- 塊級元素 div p h1-h6 ul li ol table form
- 行內 span a label i br
- 行內塊 input img button
h5 新增標籤的語義化
- header 頭
- nav 導航
- section 塊
- footer 底部
- figcation 圖片描述
- article 文章
- mark 高亮
- audio 音頻
- video 視頻

less 預編譯語言讓css具有面向對象編程思想，有變量、有函數、有做用域，是瀏覽器不能識別和渲染less代碼所以在使用時先編譯成CSS再進行使用

修改link標籤的rel屬性
引入編譯JS的文件開發環境編譯

less 中的變量

聲明一個變量 @變量名

@bg-src:"../img/";  /*使用圖片資源變遷引入 變量存儲，以及拼接*/
@link-color: #000; /* 可使用 - */
@wid: 200px;
複製代碼

less中的嵌套語法

less中使用嵌套表示層級

<div class="outer">
  <div class="inner">
    <div class="center"><a href="" class="link"></a></div>
  </div>
</div>

.outer {
  .inner {

    .center {
      a {

      }
    }
  }
}
複製代碼

在less的嵌套語法中使用 &表示花括號外面的選擇器後面緊跟着XX

.pub{
    .bg{
        //後代選擇器
    }
    & > .bg{
       //子級選擇器 
    }
    &.bg{
        //交集選擇器
    }
    &:hover{
        //僞類選擇器
    }
}
複製代碼

less嵌套會造成做用域
less中使用函數 less中能夠聲明函數

.transition(@property: all, @duration: .5s, @timing-function: linear, @delay: 0s) {
  transition: @arguments;
}

.cc {
  .transition; /*啥也不傳時使用默認值*/
  .transition(@duration: 1s); /*只修改duration*/
}
複製代碼

CSS3新增的特性

border-redius
bbox-shadow :[h 陰影水平偏移值 ,v 陰影豎直偏移值,blur 模糊尺寸（可選）,spread 陰影尺寸（可選）,color 陰影顏色（可選） inset 內置陰影（可選）]
text-shadow: h-shadow v-shadow blur color;
background-size :[100px 100px 具體值,100% 100% 寬高百分比（相對於所在容器）,cover 以合適的比例把圖片整個容器覆蓋，可是容器不必定漏出整個圖片,contain 保證圖片縱橫比例不變鋪滿容器的尺寸較小一個方向，另外一邊根據圖片綜合比例計算（當一邊鋪滿後，另外一邊不必定鋪滿）]
background-clip :[border-box 裁切到邊框,padding-box 裁切到padding,content-box 裁切到內容區域,text 只填充文本（須要-webkit）]

CSS 過渡動畫

transition屬性
- transition-property: 要過渡的屬性，默認all
- transition-duration: 過渡時間
- transition-timing-function: 過渡效果，默認linear
- transition-delay: 動畫延遲時間

CSS3變形動畫

transform屬性
- scale: 縮放
- translate: 平移
- rotate: 旋轉
- skew: 傾斜
ransform-origin: 設置旋轉動畫的中心點位置
- 水平： left center right
- 豎直：top center bottom*

關鍵幀動畫 @keyframes 定義使用animation屬性調用

@keyframes 動畫名{ 0%{ transfrom: } . . . . . .css

100%{ transfrom: } }html
animation屬性web
- animation-name: 運動軌跡名稱 @keyframes 定義一個軌跡名稱
- animation-duration: 運動軌跡運動時間
- animation-timing-function: 運動效果 (linear ease-in ease-out..)
- animation-delay: 延遲時間
- animation-iteration-count: 動畫執行次數，默認1，infinite 無數次

3D變換

transform: translate3d(x, y, z) 設置在x、y、z軸上的偏移距離
transform: translateZ(z) 設置元素在z軸的偏移距離
transform: rotateX(deg) 設置元素繞着x軸轉動的角度，角度爲正上邊緣向屏幕內轉動
transform: rotateY(deg) 設置元素繞着y軸轉動的角度，角度爲正右側向屏幕內轉動
transform: rotateZ(deg) 設置元素繞着Z軸轉動的角度，角度爲順時針轉動

perpective 和 transform-style:preserve-3d

perspective: 視距，眼睛到元素的距離（透視的概念），默認值是0，有了視距值之後纔能有近大遠小的效果 沒有視距就沒有3d效果
transform-style: preserve-3d; 保留元素的3d視圖，默認狀況下瀏覽器不保留

字體圖標的使用

下載字體圖標
將字體圖標放到項目目錄中
使用@font-face建立字體

在頁面中引入css文件

在須要的地方使用字體圖標

使用僞類 font-family: iconfont;
引入圖標字體的CSS文件使用類名引用字體圖標
在須要的地方給元素添加iconfont i-字體圖標名稱

媒體查詢

查詢不一樣的媒體類型，根據不一樣的寬度，是不一樣樣式生效；常常應用PC端處理不一樣屏幕的分辨率編程

@media screen and (max-width: 400px){ /*當屏幕寬度小於400時生效的樣式*/
    .box {
        width: 400px;
        height: 400px;
        background: #000;
    }
}

@media all and (max-width: 375px) {
    .box {

    }
}

複製代碼

響應式佈局根據設備不一樣的移動設備的尺寸開發一套能夠適應各類尺寸的頁面

常見響應式佈局方法
- 媒體查詢
- rem佈局
- flexBox
- 流式佈局

flex佈局彈性佈局爲盒子模型提供了最大的靈活性

容器指定爲flex佈局 display:flex;
行內元素使用flex佈局 display:inline-flex 使用flex佈局後子元素的float clear vertical-align 屬性自動失效

基本概念

主軸和交叉軸
- 默認主軸是水平的交叉軸是垂直的
- 主軸開始的位置與邊框的交叉點叫作 main start 結束位置叫 mian end
- 交叉軸開始的位置叫作 cross start 結束位置叫作cross end
  項目默認主軸排列單個項目佔主軸空間叫 mian size 佔交叉空間叫 cross size

容器屬性

flex-direction: 設置主軸方向；可選值：
- row(默認值) 主軸爲水平方向，起點在左端
- row-reverse: 主軸爲水平方向，起點在左端
- column: 主軸爲垂直方向，起點在上沿
- column-revers: 主軸爲垂直方向，起點在下沿。
flex-wrap : 設置項目拍不下時如何換行
- nowrap 默認值不換行，壓縮item的尺寸來實現
- wrap: 換行，第一行在上方
- wrap-reverse: 換行，第一行在下方
flex-flow 是 1和2 的簡寫
justify-content 設置項目在主軸上的對齊方式
- flex-start: 默認值，左對齊
- flex-end: 右對齊
- center: 居中
- space-between: 兩端對齊，項目之間間隔相等
- space-around: 每一個項目兩側間距相等，因此項目之間的距離比項目和邊框之間的距離大一倍
align-items 設置項目在交叉軸上對齊方式
- flex-start: 交叉軸起點對齊
- flex-end: 交叉軸終點對齊
- center: 交叉軸的終點對齊
- baseline: 項目第一行文字基線對齊
- stretch: 默認值，若是項目未設置高度或者設爲auto，將佔滿整個容器的高度

項目屬性

order 屬性定義項目的排列順序，數值越小越靠前，默認爲0
flex-grow 屬性：定義項目的放大比例，默認爲0，若是剩餘空間也不會放大；若是全部的項目的flex-grow都爲1，則他們等分剩餘空間，若是某一個的flex-grow 爲2，其他的都爲1，爲2的那個佔據的剩餘空間比其餘的大
flex-shrink 屬性定義了項目的縮小比例，默認爲1，即空間不足，該項目將縮小；若是全部的項目的flex-shrink都爲1，當空間不足時，都將等比縮小；若是一個項目的flex-shrink爲0，其餘的都爲1時，前者不縮小；(若是容器設置了flex-wrap無效了)
align-self: 容許單個項目與其餘項目的對齊方式不一樣，能夠覆蓋容器的align-items屬性；默認值auto，表示繼承父元素的align-item屬性，若是沒有stretch

rem 佈局解決適屏問題

使用以前如今HTML開頭添加一個mate標籤 name 是 viewport數組

<meta name="viewport" content="width=device-width, initial-scale=1.0">
複製代碼

rem 是和px同樣都是單位 rem 是相對單位 px 是絕對單位是相對於html標籤的字體大小來的，html標籤的字體大小 font-size就是1rem；
真實項目中通常設計稿的經常使用寬度爲 640 和 750
接下來寫樣式，把測量出來的px都除以100變爲rem，全部的單位都基於rem來寫； => 假設設計稿是750px，至關於在750的設備下，1rem = 100px

rem 計算方法

function computedFont() {
    let winW = document.documentElement.clientWidth || document.body.clientWidth;
    let desW = 750;
    document.documentElement.style.fontSize = 100 * winW / 750 + 'px';
  }
  computedFont();
  window.addEventListener('resize', computedFont)
複製代碼

移動端事件有觸摸事件通常不用click 在移動端有延遲

touchstart 觸摸元素時觸發
touchmove 在元素上滑動時觸發
touchend 當手指離開元素時觸發

swiper插件的使用

//先引入
<link rel="stylesheet" href="swiper/swiper.min.css">

//初始化swiper
var mySwiper = new Swiper('.swiper-container', {
    direction: 'horizontal', // 垂直切換選項
    loop: true, // 循環模式選項
    effect: 'fade',
    autoplay: true,
    // 若是須要分頁器
    pagination: {
      el: '.swiper-pagination',
    },

    // 若是須要前進後退按鈕
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    }
  })
複製代碼

vm vh佈局新增長的單位將視口分爲100份 1份寬叫作1vw；高分爲100份，每份高叫作1vh。

做用讓一個盒子充滿屏幕

數組方法補充

數組.filter(function (item, index) {return 條件})過濾，把知足條件，即回調函數return true的項拿出來組成一個新數組；原數組不變；
數組.every(function (item, index) {return 條件}):用來驗證數組的每一項是否知足某個條件（條件就是回調函數返回值），若是每個都知足條件就會返回true，不然返回false；
數組.some(function (item, index) {return 條件})：驗證數組中是否有一些向知足條件，知足就會返回true，不然false；
數組.find(function (item, index) {return 條件})：查找數組中知足條件的第一項，找到第一個就返回，若是有多個都知足條件也只是獲取第一個；若是沒找到返回undefined【注意找到返回數組項，不是新數組】