移動(dòng)端開發(fā)筆記

一. 移動(dòng)端基本環(huán)境

視口 基于設(shè)備坐標(biāo)

  • viewport 視口 默認(rèn)不設(shè)置在移動(dòng)端是980
  • width (number||device-width)
  • user-scalable =no
  • initial-scale
  • maximum-scale
  • minimum-scale

二. 移動(dòng)端常見的一些問題

  • 清除點(diǎn)擊陰影 : -webkit-tap-highlight-color:rgba(0,0,0,0)
  • 消除圓角按鈕 : -webkit-appearance:none
  • 選中文字設(shè)置 :-webkit-user-select：none //(安卓不兼容)
  • 禁止文字縮放 :-webkit-text-size-adjust：100%
適配
  • viewport
  • 百分比
  • rem適配
  • 彈性盒模型(box版和flex版)
(function(){
  var w = window.screen.width;
    var targetW = 320;
    var scale = w/targetW; //當(dāng)前尺寸/目標(biāo)尺寸
    var meta = document.createElement("meta");
    meta.name = "viewport";
    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+""
    //console.log(scale);
    document.head.appendChild(meta);
})()

三.移動(dòng)端布局

rem計(jì)算
  • 設(shè)計(jì)圖選取 建議最小750
  • 利用less計(jì)算rem
  • 怪異盒模型
  • font-face
  • boodstrap字體組件
Less搭建環(huán)境

Less 的語法不能直接被瀏覽器解析需要 編譯器 -->轉(zhuǎn)換css

(1) 在客戶端使用less

在HTML頁面中引入.less文件,再引入一個(gè)Less轉(zhuǎn)換程序(是一個(gè).js文件),讓客戶端同時(shí)下載html/less/js 轉(zhuǎn)換器,在客戶端運(yùn)行.js把less轉(zhuǎn)換成css樣式

 <link rel="stylesheet/less" href="css/index.less"/>
 <script src="js/less.min.js"></script>
(2) 在服務(wù)器端使用less(推薦使用)

開發(fā)人員使用一個(gè)命令行工具(less編譯器),把.less編譯為.css,在HTML頁面中,直接引入編譯好的.css文件即可

less用法1 - 服務(wù)器端使用npm在線安裝less編譯器.png

(1)下載并安裝一款服務(wù)器端的JS解釋器:Node .JS(獨(dú)立于瀏覽器的V8引擎解釋器,用來運(yùn)行js腳本)
(2)下載并安裝Less編譯器程序:lessc(Compiler)--是一個(gè)運(yùn)行在服務(wù)器端的JS腳本程序
(3)運(yùn)行Node,執(zhí)行l(wèi)essc轉(zhuǎn)換程序,把一個(gè).less文件編譯為一個(gè).css即可

  • 直接在命令行中執(zhí)行l(wèi)essc xx.less
  • 把lessc 編譯器配置為webStorm中的FileWatcher,只要用戶在WS中創(chuàng)建/保存一個(gè).less文件,即會(huì)自動(dòng)編譯出對(duì)應(yīng)的.css文件(推薦)
webStorm配置示例.png

webStorm設(shè)置監(jiān)聽less文件自動(dòng)轉(zhuǎn)化css -----> settings==>Tools==>file watcher ==> +less

保存后,修改任意的.less文件并保存,即可自動(dòng)生成一個(gè).css文件
提示:若無法生成,檢查npm配置步驟,重啟WebStorm,再次檢查上述幾步過程,再次嘗試
less中文網(wǎng): http://lesscss.cn/

關(guān)于rem的介紹以及l(fā)ess動(dòng)態(tài)計(jì)算

//可以引用這句話
document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth+"px";

但是再寫的完成一些 相當(dāng)于jq里的$.ready() 至于DOMContentLoaded的兼容性問題 還可以再研究一下

(function () {
    document.addEventListener('DOMContentLoaded', function () {
       document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth+"px";
    }, false);
})();

rem--em | r-->rood 根據(jù)根節(jié)點(diǎn)字體大小計(jì)算 | em 根據(jù)父元素計(jì)算單位
來了
1.html中默認(rèn)的 font-size:16px; 也就是 1rem = 16px
2.以設(shè)計(jì)寬度為750px為例，那么定義 font-size:50px; 那么 1rem = 50px，比例為：750/50=15
3.定義頁面中的尺寸，就是: 寬度/50 rem（比例為15）。例如：設(shè)計(jì)稿中dom（20px）的尺寸為：20px/50=0.4rem
4.針對(duì)不同屏幕尺寸，按同比例設(shè)置font-size（比例仍為15）。相當(dāng)于1rem 變成對(duì)應(yīng)大?。╢ont-size變小多少，1rem就同比例變小多少）。
5.例如：
屏幕寬度為750px，則html設(shè)置的font-size為：750/15 = 50，設(shè)計(jì)稿中dom（20px）的尺寸為：20px/50=0.4rem，1rem = 50px
屏幕寬度為320px，則html設(shè)置的font-size為：320/15 = 21.33....，設(shè)計(jì)稿中dom（20px）的尺寸依然為：20px/50=0.4rem，1rem = 320/750*50px


rem比例公式.png
//配置好less監(jiān)聽,了解rem就可以開始寫啦!要配置一樣根節(jié)點(diǎn)的字體大小
  document.getElementsByTagName("html")[0].style.fontSize=document.documentElement.clientWidth/15+"px";
//可以在less文件里這樣寫 聲明變量,然后計(jì)算
@r:50rem;
#header{height:120/@r;font-size:14/@r;width:750/@r;}

//解注: 以設(shè)計(jì)圖為750為例,不然可以直接在變量處寫成750 ,但是算下來小數(shù)位太長(zhǎng)了,所以設(shè)置根節(jié)點(diǎn)的時(shí)候除15 (等同于15*50=750) 這樣應(yīng)該會(huì)提高性能吧~~

四.彈性盒模型 即flex布局

布局的傳統(tǒng)解決方案，基于盒狀模型，依賴 display屬性 + position屬性 + float屬性。它對(duì)于那些特殊布局非常不方便，比如，垂直居中就不容易實(shí)現(xiàn)。
2009年，W3C提出了一種新的方案—-Flex布局，可以簡(jiǎn)便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性。
任何一個(gè)容器都可以指定為Flex布局。

注意，設(shè)為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。
詳細(xì)了解flex教程

Flex布局.png

舉個(gè)栗子:

移動(dòng)端淘寶布局.jpg
  <div class="wrap">
    <div><a href="javascript:;">天貓</a></div>
    <div><a href="javascript:;">聚劃算</a></div>
    <div><a href="javascript:;">天貓國(guó)際</a></div>
    <div><a href="javascript:;">外賣</a></div>
    <div><a href="javascript:;">天貓超市</a></div>
    <div><a href="javascript:;">充值中心</a></div>
    <div><a href="javascript:;">飛豬旅行</a></div>
    <div><a href="javascript:;">領(lǐng)金幣</a></div>
    <div><a href="javascript:;">充值中心</a></div>
    <div><a href="javascript:;">拍賣</a></div>
</div>

沒有給"項(xiàng)目div"設(shè)置任何寬度高度,完全是圖片撐起來的

示例.png
//示例css代碼 利用偽類可以減少HTML代碼的干預(yù) 一般還是習(xí)慣上img標(biāo)簽吧
.wrap{display:flex;display:-webkit-flex;flex-wrap:wrap;}
.wrap div{flex-grow:1;text-align: center;}
.wrap a{font-size:15/@a;display:block;}
.wrap a:before{content:"";display:block;width:150/@a;height:3rem;}
.wrap div:nth-child(1) a:before{background:url(../img/t1.png) no-repeat 0 center / 100%;}
.wrap div:nth-child(2) a:before{background:url(../img/t2.png) no-repeat 0 center / 100%;}
.wrap div:nth-child(3) a:before{background:url(../img/t3.png) no-repeat 0 center / 100%;}

如果是一排的話 flex-grow:1;可以直接平均分div

五.移動(dòng)端事件

移動(dòng)端三大事件:
手指按下: ontouchstart
手指移動(dòng): ontouchmove
手指離開: ontouchend
<small>注意: 在移動(dòng)端開發(fā)的時(shí)候,瀏覽器的模擬器時(shí)好時(shí)壞,一般不用on的方式綁定事件函數(shù),要用事件綁定的方式(addEventListener)</small>
<small>PC端的事件比移動(dòng)端的事件略慢,大概在300ms左右</small>

移動(dòng)端的點(diǎn)透: 當(dāng)上層元素發(fā)生點(diǎn)擊的時(shí)候,下層元素也有焦點(diǎn)特性,在300ms之后,如果上層元素消失或隱藏,目標(biāo)點(diǎn)就會(huì)"漂移"到下層元素身上,就會(huì)觸發(fā)點(diǎn)擊行為.
解決:
<small>1.下層不要使用有點(diǎn)擊(焦點(diǎn))特性的元素
2.阻止PC事件</small>

document.addEventListener("touchstart",function(ev){
          ev.preventDefault();//阻止掉之后就盡量不要用PC端的事件了
})
  • 禁止用戶縮放meta設(shè)置在ios10不生效,就可以加上以上語句
  • 解決ios10溢出隱藏的問題
  • 精致系統(tǒng)默認(rèn)的滾動(dòng)條,阻止橡皮筋效果
  • 禁止長(zhǎng)按選中文字,選中圖片,系統(tǒng)默認(rèn)菜單
  • 解決點(diǎn)透問題
  • 也阻止了焦點(diǎn)行為(要正產(chǎn)更實(shí)用,ev.stopPropagation()阻止冒泡 )

<small>呼~~ 為什么我覺得它能阻止一切...</small>

移動(dòng)端事件對(duì)象
當(dāng)給某個(gè)元素加上了事件綁定函數(shù)之后，事件函數(shù)默認(rèn)的第一個(gè)參數(shù)就是事件對(duì)象
事件對(duì)象：當(dāng)用戶在瀏覽器下觸發(fā)了某個(gè)行為，事件對(duì)象會(huì)記錄用戶操作時(shí)一些細(xì)節(jié)信息。
touches 當(dāng)前位于*屏幕*上的所有手指的一個(gè)列表
targetTouches 位于當(dāng)前DOM元素上的手指的一個(gè)列表
changedTouches  涉及當(dāng)前事件的手指的一個(gè)列表(正在滑動(dòng)的手指)

六.Transform詳解

div.style.WebkitTransform=div.style.transform="translate(100px)";

  • transform-origin:center center;
  • rotate(deg) 旋轉(zhuǎn)
  • skew(deg) 斜切 skewX skewY
  • scale(num) 縮放(原來的多少倍)scala(x,y) scaleX scaleY
  • translate(100px) 位移 px 寫法同上

<small>

3d變換

perspective 景深(我在多元之外來看這個(gè)元素)加載要寫在3d變換的父級(jí)

  • transform-style 元素在做3d變換時(shí),是否保留子元素的3d變換
  • flat不保留
  • preserve-3d保留子元素3d變換
  • perspective-origin:center center;

</small>

//父級(jí)
-webkit-perspective: 200px;
perspective: 200px;
//元素上
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容