天天看點
傳回

04-前端技術_移動端适配

目錄

​​一，媒體查詢​​

​​1，文法: ​​

​​二，rem​​

​​1，原理：​​

​​2，作用：​​

​​3，方案：​​

​​4，用法:​​

​​5，文法：​​

​​三，rem應用​​

​​四，實際應用​​

​​1，UI設計稿 : ​​

​​2，1rem背後代表的值 : ​​

​​3，具體如何做？ ​​

​​五，less應用​​

​​1，安裝​​

​​2，變量​​

​​3，嵌套​​

​​4，運算​​

​​六，解決方案​​

​​1，方案1 ：rem+媒體查詢+less 方案 ​​

​​2，方案2（推薦!!!） ：rem+flexible.js+less ​​

​​2.1 flexible.js 簡介：​​

​​2.2 1rem背後代表的值 ​​

​​2.3 步驟！！！ ​​

​​2.4 舉例​​

​​3，兩種方案對比​​

一，媒體查詢

感受到螢幕的變化；可以根據螢幕不同的寬，進而獲得不同的樣式，然後實作不同的樣式顯示；

  • 1. CSS3 新文法，是一個查詢螢幕的過程，通過查詢目前螢幕尺寸屬于哪個範圍，進而有哪個範圍的樣式生效；
  • 2. 感受螢幕變化，螢幕變化就是寬度的變化，通過預設定，當螢幕到了我已經預設定的變化的範圍，就會把我提前設定 好的樣式進行生效；

1，文法: 

CSS樣式：

/*
mediatype 查詢類型: 
----------------- 
all 所有裝置 
print 用于列印機和列印預覽 
screen 用于電腦螢幕，平闆電腦，智能手機等。 

條件: 
---- 
and 并且 not 不滿足 only 僅僅滿足 
media feature 查詢條件: 
---------------------- 
width,min-with,max-width */
@media mediatype and|not|only (media feature) { 
  CSS-Code; 
}

引用資源：(了解)

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

舉例：

适配需求： 

檔位1：w<320 px w <= 319 px; 

檔位2: w>=320px and w< 640px; 

檔位3: w>=640px

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 檔位1 w<320 w<=319 */
        @media screen and (max-width: 319px) {
            body {
                background: #000;
            }
        }

        /* 檔位2 w>320 and <640 */
        /* @media screen and (min-width: 320px) and (max-width: 639px) {
            body {
                background: blue;
            }
        } */
        /* 第二種方法 */
        @media screen and (min-width: 320px) {
            body {
                background: blue;
            }
        }

        /* 檔位3 w>640 */
        @media screen and (min-width: 640px) {
            body {
                background: yellow;
            }
        }
    </style>
</head>

<body>

</body>

</html>

二，rem

1，原理：

  • rem是一個相對機關，類似于em，
  • 不同的是rem的基準是相對于html元素的字型大小，em是父元素字型大小。

2，作用：

  • 讓一些不能等比自适應的元素，達到當裝置尺寸發生改變的時候，等比例适配目前裝置。

3，方案：

  • 使用媒體查詢根據不同裝置按比例設定html的字型大小，然後頁面元素使用rem做尺寸機關，當html字型大 小變化元素尺寸也會發生變化，進而達到等比縮放的适配。

4，用法:

  • rem機關，可以控制整個頁面所有元素有關PX類；（寬、高、padding、margin、top...）隻要是你設定數值 的地方都可以實作控制；
  • root: 1rem代表HTML的font-size大小；

5，文法： 

/* 1.根html 為 10px */ 
html { 
  font-size: 10px; 
}

/* 2.此時 div 的寬就是 150px */ 
div {
  width: 15rem; 
}

舉例：舉例展示縮放效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* rem文法 在哪裡設定 設定什麼 */
        /* rem是個機關  現在 1rem就是10px  */
        html {
            font-size: 10px;
        }

        div {
            width: 15rem;
            height: 15rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

三，rem應用

rem布局的核心：rem+媒體查詢； 

媒體查詢：把螢幕劃分不同檔位，等待變化； 

  • 布局所有機關用rem，當 HTML字型大小發生改變，使用rem機關元素都會發生改變；
  • rem+媒體查詢加在一起：劃分螢幕，等待變化；變化誰？變化唯一控制 rem（HTML字型大小） 
@media screen and (min-width: 320px) { 
  html { 
    font-size: 20px; 
  } 
}
@media screen and (min-width: 640px) { 
  html { 
    font-size: 40px; 
  } 
}
div { 
  width:1rem; 
  height:1rem; 
}

舉例：實作不同尺寸，元素的縮放效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @media screen and (min-width: 320px) {
            html {
                font-size: 20px;
            }
        }

        @media screen and (min-width: 640px) {
            html {
                font-size: 40px;
            }
        }

        div {
            width: 1rem;
            height: 1rem;
            background: #000;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

rem布局核心總結： 

  • 媒體查詢：螢幕到達不同的範圍下，HTML的font-size大小會有不同的取值;
  • 1rem 背後的代表的px值 = 目前檔位 HTML 字型大小 所代表的大小
  • 那麼使用rem機關的元素就會發生等比的變化；

四，實際應用

1，UI設計稿 : 

尺寸不同，頁面在不同的尺寸下要等比縮放

裝置 常見寬度
iphone 4.5 640px
iphone 678 750px
Android

常見320px.360px. 375px. 384px. 400px. 414px. 500px、 720px

大部分4.7~5寸的安卓裝置為720px

檔位劃分：min-width 最小界值； 

約定：把UI各種設計稿，從小到大，目前我們檔位劃分開始點，起始點；

2，1rem背後代表的值 : 

在這裡，我們約定設定HTML的字型大小：按照每個檔位的最小界值，都劃分相同的份數，得到目前檔位的 HTML的font-size大小；

// 我們此次定義的劃分的份數 為 10 這個過程在計算 1個rem 在不同檔位下是多大； 
@media screen and (min-width: 320px) { 
    html {
        font-size: 32px; 
    } 
}
@media screen and (min-width: 360px) { 
    html {
        font-size: 36px; 
    } 
}
@media screen and (min-width: 540px) { 
    html {
        font-size: 54px; 
    } 
}

3，具體如何做？ 

檔位和根基設定按照約定設定好了； 

UI給的圖的已經拿到了，上面标注的是px機關； 

目标：把px機關換算 成rem機關； 

如何做：選擇目前設計稿在檔位下的rem背後代表的值進行計算； 

  • 如果給你的540px寬度設計稿怎麼換算rem，寬度=540px = 540/54 rem；

五，less應用

less : 讓你寫更少的代碼，實作相同的效果； 

less :是一門 CSS 擴充語言，它擴充了CSS的動态特性。 CSS 預處理言語。 

常見的CSS預處理器：Sass、Less、Stylus 。 

Less中文網址：http://lesscss.cn/

1，安裝

vscode插件安裝： 

  • 搜尋 Easy LESS
  • 安裝完畢插件，重新加載下 vscode。
  • 測試：儲存一下 .less 檔案，會自動生成 .css 檔案
04-前端技術_移動端适配
04-前端技術_移動端适配
04-前端技術_移動端适配

2，變量

變量是指沒有固定的值，可以改變的。 

我們CSS中的一些顔色和數值等經常使用，可以設定為變量； 

文法：

//@變量名:值; 
@bg:#333; 
.box_1 { 
  background-color: @bg; 
}
.box_2 { 
  background-color: @bg; 
}

命名規則:

  • 必須有@為字首
  • 不能包含特殊字元~=+、不能以數字開頭
  • 大小寫敏感區分; .

3，嵌套

類似HTML一樣寫less結構； 

文法：

/* css 寫法 */ 
#header .logo { 
    width: 300px; 
}
/* less 寫法 */ 
#header { 
    .logo { 
        width: 300px; 
    } 
}

交集|僞類|僞元素選擇器，文法 

/* css寫法 */ 
a:hover{ 
    color:red; 
}
/* less寫法 */ 
a{
    &:hover{ 
        color:red; 
    } 
}

4，運算

任何數字、顔色或者變量都可以參與運算。

Less提供了加（+）、減（-）、乘（*）、除（/）算術運算。 

文法：

// 數字 
width: 200px - 50; 
// 顔色 
background-color: #666 - #222; 
// 注意：運算符中間左右有個空格隔開 1px * 5

機關選擇： 

  • 如果兩個值之間隻有一個值有機關，則運算結果就取該機關
  • 對于兩個不同的機關的值之間的運算，運算結果的值取第一個值的機關

六，解決方案

1，方案1 ：rem+媒體查詢+less 方案 

750px 操作過程： 

第一步：

  • 原稿實作：先拿到設計稿:750px ; 頁面上所有的元素，在750px設計稿上進行測量，代碼實作；

第二步：

  • 準備各個檔位下的rem ：提前準備好各個檔位下的HTML 的font-size大小；
  • 拿到目前尺寸的rem：因為我現在是750px的設計稿，是以可以得到750px這個尺寸屬于的檔位下的 HTML 的font-size大小，也就是750px設計稿下的1rem值。
  • 計算比例：把頁面剛才所有的元素的PX值替換為 rem
  • 達到目标：那麼，屏變化時，1rem(基礎塊)也會變化，自然就是等比縮放；

2，方案2（推薦!!!） ：rem+flexible.js+less 

和上個方案實作原理一樣，都是通過改變1rem(基礎塊)大小實作頁面整體元素改變； 

2.1 flexible.js 簡介：

手機淘寶團隊出的 簡潔高效 移動端适配庫；和flex布局沒有任何關系 

github位址：https://github.com/amfe/lib-flexible 

不是通過設定CSS媒體查詢設定font-size，通過 JS 設定font-size，效果是螢幕變化一點，就有一個rem重新計算；

2.2 1rem背後代表的值 

  • 劃分10份；
  • 設定在HTML标簽上； 
function setRem () { 
// docEl.clientWidth JS擷取目前螢幕的寬度 
// 除以10,得到基礎塊 
    var rem = docEl.clientWidth / 10; 
    docEl.style.fontSize = rem + 'px' 
}

2.3 步驟！！！ 

假如設計稿430px 

拿到UI設計稿，原稿實作；頁面上所有的元素，在設計稿上進行測量，代碼實作；（流式、flex）隻要是UI給圖上有标注，就是寫出來；先全部實作出來，一會統一替換； 

  • 在哪裡寫？less檔案
  • 需要把生成的css檔案進行引入index.html；

設計稿寬度/10 ：1rem=43px； 

統一替換：100px=100/43rem;

2.4 舉例

06.less

div {
    width: 100/43rem;
    height: 100/43rem;
    background: #000;
}

flexible.js

(function flexible(window, document) {
  var docEl = document.documentElement
  var dpr = window.devicePixelRatio || 1

  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = (12 * dpr) + 'px'
    } else {
      document.addEventListener('DOMContentLoaded', setBodyFontSize)
    }
  }
  setBodyFontSize();


  // 750 100px 100rem / 75 
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10
    docEl.style.fontSize = rem + 'px'
  }

  setRemUnit()

  // reset rem unit on page resize
  window.addEventListener('resize', setRemUnit)
  window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
      setRemUnit()
    }
  })

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement('body')
    var testElement = document.createElement('div')
    testElement.style.border = '.5px solid transparent'
    fakeBody.appendChild(testElement)
    docEl.appendChild(fakeBody)
    if (testElement.offsetHeight === 1) {
      docEl.classList.add('hairlines')
    }
    docEl.removeChild(fakeBody)
  }
}(window, document))

demo.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./flexible.js"></script>
    <link rel="stylesheet" href="./06.css">
</head>

<body>
    <div></div>
</body>

</html>

3，兩種方案對比

相同：

  • 都是對font-size實作控制，1rem（基礎塊）變化，實作等比效果；

不同：

  • rem+媒體查詢+less：通過設定不同的檔位下，設定不同的1rem值；效果為階梯式變化；
  • flexible.js+rem：通過js設定不同的1rem值，效果為連續變化；這個看起來更為連貫，适配任何螢幕。

章節彙總在這裡（づ￣3￣）づ╭❤～​​@&再見螢火蟲&【04-前端技術】​​

對學習Java感興趣的同學歡迎加入QQ學習交流群：1126298731

有問題歡迎提問，大家一起在學習Java的路上打怪更新！(o゜▽゜)o☆[BINGO!]

前端技術 移動端适配 Java開發工程師 html css
上一篇: uinty SkinnedMeshRenderer 實作換裝系統 （更換模型節點）
下一篇: java測試類pet_定義一個寵物類(Pet),它有個方法:叫cry(),吃東西eat(),定義寵物的子類狗(Dog),貓(Cat),覆寫父類的cry(),eat()方法,裡面寫“貓吃魚”這樣的列印語...

繼續閱讀