認識移動端

<一個幼兒園小班的前端的成長隨筆,錯誤與不足之處,望各位大牛批評指點,謝謝!>

視口 | viewport

meta 標籤: 佈局視口的寬度應該與理想視口的寬度一致, 簡單理解就是設備有多寬. 咱們佈局的視口就多寬

1. 佈局視口 | layout viewport

2. 視覺視口 | visual viewport

3. 理想視口 | ideal viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">

物理像素 | 物理像素比

1. 物理像素: 即 分比率, iPhone8的物理像素是 750 | 在iPhone8裏面1px 開發像素 = 2個物理像素

2. background-size 背景縮放 : 長度 | 百分比 | cover | contain

   • cover 把背景圖像擴展至足夠大, 以使背景圖像徹底覆蓋背景區域

   • contain 把背景圖像擴展至最大尺寸, 以使其寬度和高度徹底適應內容區域

特殊樣式

1. 自定義輸入框input樣式，去除外觀高光 input {-webkit-appearance: none;}

2. 盒子模型 box-sizing: border-box; 即width || height + padding + border + margin

   • W3C標準盒子模型: content只是寬高內容部分

   • IE盒子模型: content包含的是 寬高內容 + padding + border

3. 禁止長按頁面彈出菜單 -webkit-touch-callout: none;

felx佈局

1. 父元素上:

   • display:flex

   • flex-direction: row || cloumn : 主軸方向: X軸 || Y軸

   • justify-content: flex-start || flex-end || center || space-around || space-between : 主軸上的子元素排列方式:

   • flex-wrap: nowrap || wrap 換行: 默認不換行,一行顯示

   • align-content:flex-start || flex-end || center || space-around || space-between : 側軸上的子元素排列方式(多行)

   • align-items: flex-start || flex-end || center || streth : 側軸上的子元素排列方式(單行)

2. 子元素上:

   • flex: 1 0 auto : 三值語法

     1. 參數一: 拉伸(無單位)

     2. 參數二: 縮放(無單位i)

     3. 參數三: px || % || auto

媒體查詢

• link元素中的CSS媒體查詢

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

 

• 樣式表中的CSS媒體查詢

1. 媒體查詢 Media Query : @media 能夠針對不一樣的屏幕尺寸設置不一樣的樣式

   • 用 @media 開頭 注意@符號

   • mediatype all || print || screen 媒體類型

   • 關鍵字 and not only

   • media feature 媒體特性 必須有小括號包含

   • 爲了防止混亂，媒體查詢咱們最喜歡的仍是從小到大來寫，這樣代碼更簡潔(具備層疊性)

  <style>
    /* 800px 之內的屏幕 body背景顏色爲pink */
    @media screen and (max-width:800px) {
      body {
        background-color: pink;
      }
    }
  </style>

 

2. rem : 能夠將rem理解爲scale 縮放倍數來理解，是以html的font-size的倍數來處理的 等比例適配當前設備

   • em: 對於父元素 的字體大小來講的

   • rem : 相對於 html元素 字體大小來講的

less

Less （Leaner Style Sheets 的縮寫） 是一門 CSS 擴展語言，也成爲CSS預處理器

1. less變量

   • 必須有@爲前綴

   • 不能包含特殊字符

   • 不能以數字開頭

   • 大小寫敏感

     // 只需改動聲明裏的值就能夠了
     @color: pink;
     //直接使用
     body{
     color:@color;
     }
     a:hover{
     color:@color;
     }

    

2. less編譯

   • 經過解析器, 編譯生成對應的 CSS 文件

3. less嵌套

     /* css */
     header.logo{
       width: 300px;
     }
     ​
     /* less */
     header {
       .logo {
         width: 300px;
       }
     }
     /* 1. 碰見（交集|僞類|僞元素選擇器） 利用&進行鏈接 */
     /* 2. 簡單來講就是直接套進去寫，方便簡潔 */

    

4. less運算

   • 乘號（*）和除號（/）的寫法

   • 運算符中間左右有個空格隔開 1px + 5

   • 對於兩個不一樣的單位的值之間的運算，運算結果的值取第一個值的單位

   • 若是兩個值之間只有一個值有單位，則運算結果就取該單位

響應式開發

響應式開發原理: 使用媒體查詢針對不一樣寬度的設備進行佈局和樣式的設置，從而適配不一樣設備

1. 設備劃分

   • 小於768的爲超小屏幕（手機）

   • 768~992之間的爲小屏設備（平板）

   • 992~1200的中等屏幕（桌面顯示器）

   • 大於1200的寬屏設備（大桌面顯示器）

2. 響應式須要一個父級作爲佈局容器 來配合子級元素來實現變化效果

   原理: 經過媒體查詢來改變這個佈局容器的大小，再改變裏面子元素的排列方式和大小，從而實 現不一樣屏幕下，看到不一樣的頁面佈局和樣式變化

 

部分參考: [ https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ]