移動前端開發/移動端web開發

一、視口

1. 概念
   • 視口：浏覽器顯示頁面内容的螢幕區域。
   • 分成3種：布局視口（layout viewport）、視覺視口（visual viewport）、理想視口（ideal viewport）
2. meta視口标簽實作理想視口

   

二、二倍圖

1. 實體像素&實體像素比
   • 移動端的實體像素與px并不是一一對應的關系，存在一個像素比，每款手機的像素比不一樣。
   • 視網膜螢幕技術把更多的像素點壓縮至一個螢幕裡，進而提高分辨率
2. 移動端檢視圖檔模糊的問題
   • 移動端會導緻圖檔變得模糊。當用到圖檔時，使用原圖的兩倍甚至更多倍，然後再用css技術把圖檔控制在想要的大小内，這樣在移動端可以顯示更清晰的圖檔。
3. 背景縮放
   • background-size

三、CSS3盒子模型

1. PC端對css3有相容性問題,移動端沒有,統一使用css3

   

四、特殊樣式

五、移動端常用布局

1. 常用布局
   • 流式布局 ( 百分比布局 )
     • max-width 設定最大寬度
     • min-width 設定最小寬度,當超過設定的寬度,則不會再伸縮
   • flex布局
   • less+rem+媒體查詢布局
   • 混合布局
2. 移動端技術選型

   

六、flex布局

1. flex原理
   • flex也叫伸縮布局 彈性布局等,用來為盒子提供最大的靈活性,任何容器都可以使用flex布局
   • 當我們為父盒子設定flex布局以後,子元素的float clear 和 vertical-align屬性将失效
   • 采用flex布局的元素稱為flex元素,子元素稱為項目
   • 原理 : 通過給父盒子添加flex屬性,來控制子盒子的位置和排列方式

2. 常見父項屬性

   ​ (1) flex-direction 設定主軸的方向

   • 主軸和側軸
     • 主軸 : x軸 , 水準向右
     • 側軸: y軸 , 垂直向下
   • 屬性值

     

   (2) justify-content 設定主軸上的子元素排列方式

   

   (3) flex-wrap 設定子元素是否換行
   • 預設是不換行的,如果顯示不下,會自動修改子元素的寬度
   • 屬性值

     

   (4) align-items 設定側軸上子元素的排列方式 ( 子元素隻有一行時才有效果 )
   • 屬性值

     

   (5) align-content 設定側軸上子元素的排列方式 ( 子元素有多行時才有效果 )
   • 屬性值

     

   (6)

   

   (7) flex-row 是 flex-diraction和flex-wrap屬性的複合屬性

3. 常見子屬性

   （1）flex：配置設定子項目的剩餘空間

   （2）align-self：控制子項自己在側軸上的排列方式

   （3）order：定義項目的前後順序，預設是0，如果設定為-1則會往前移動。

七、rem适配布局

1. rem基礎

   （1）rem機關：是一個相對機關，跟em類似，em是父元素的字型大小。rem是相對于html的字型大小。

   例如，em = 12px ，則10em = 120px 。

   （2）rem優勢：可以通過html标簽裡面設定的字型大小來控制整個頁面的大小。

2. 媒體查詢

   （1）文法規範：@media mediatype and|not|only (media feature){

   css code;

   }

   （2）示例：@media screen and (max-width:800px){}

   （3）引入資源：當樣式比較多時，可以針對不同的媒體使用不同的css檔案。原理就是在link中判斷裝置的尺寸，然後引用不同的css檔案。示例:

<link rel = "stylesheet" href = "style320.css" media="screen and (min-width:320px)">
           

1. less基礎

   （1）Less介紹：Less是css的擴充語言，也稱為css預處理語言。他在css基礎引入了變量、運算以及函數等功能。

   （2）Less安裝：cnpm install -g less

   （3）檢視Less版本：lessc -v

   （4）Less使用： 1. 變量：@變量名：屬性值。示例：@color:pink; 定義好之後，後面的屬性都可以使用這個變量。

   （5）Less編譯：VScode安裝插件：easy less，安裝這個插件之後，隻要在less檔案中儲存就可以生成css檔案。

   （6）Less嵌套：在css的花括号裡面可以繼續添加花括号來定義子元素的樣式。如果要嵌套僞類，則可以在僞類的選擇器前面加一個&符号，否則會預設定義成父選擇器的兒子。

   （7）Less運算：可以對數字進行四則運算。運算符前後要空格。如果運算符左右兩個參數隻有一遍有機關，則以那個機關為準；如果兩邊都有參數，則以第一個機關為準。

2. rem适配方案