一 media媒體查詢

CSS @media 規(guī)則 (w3school.com.cn)

• 用法: 用于為不同的媒體類型/設(shè)備應(yīng)用不同的樣式
  由于移動端手機(jī)的屏幕大小不一致 所以通過媒體查詢可以獲取當(dāng)前頁面的大小

@media (查詢條件){
        選擇器{
        css樣式}
}

當(dāng)頁面大小為980px時(shí)  將html根字體的字號設(shè)置為98px
@media (width:980px){
      html{
          font-size:98px;
      }    
}
當(dāng)屏幕的寬度為375px時(shí)   將.box盒子背景顏色改為blue
@media(width:375px){
    .box{
        background-color:blue;
      }
}

• 通常情況下 移動端的html根字體設(shè)置為頁面寬度的1/10;

二 rem 相對單位:

• 語法: rem是相對于html根字號大小設(shè)置大小的 通常1rem= 根字號的大小

• 作用: ：實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果
  例: 根字號大小為 75px 則1rem=75px; 根字號一般設(shè)置為屏幕寬度的1/10

• 2.2 flexible.js

1. 是手淘開發(fā)出的一個用來適配移動端的js框架。 l
2. 核心原理就是根據(jù)不同的視口寬度給網(wǎng)頁中html根節(jié)點(diǎn)設(shè)置不同的font-size。
   使用flexible js配合rem實(shí)現(xiàn)在不同寬度的設(shè)備中，網(wǎng)頁元素尺寸等比縮放效果

-----媒體查詢+rem
----flexible+rem

2.2 vw+vh:

不需要引入任何的js文件 也不需要像rem一樣去vscode配置字體大小

• 1vw= 視口寬度的1/100;1vh=1/100 視口高度
  vw是一個可以直接拿來用的單位

例如: 375px設(shè)備 1vw=3.75px;

三 移動適配

• 3.1 基礎(chǔ)插件

  1. px to rem 通過alt+z 快速將px固定像素轉(zhuǎn)換為rem相對單位
  2. Easyless 插件---css的預(yù)處理插件 less sass stylus(語法格式不合理 )

• 3.2 easyless

css是一種非程式語言 沒有變量函數(shù)作用域等概念,代碼冗余度高 不便于維護(hù),不能進(jìn)行運(yùn)算 ; 所以引入less等css預(yù)處理文件 ,但是瀏覽器是不認(rèn)識.less文件 所以將.less文件編譯后 在HTML頁面中仍然還是引用.css文件

2. • 用法: 創(chuàng)建.less 文件 編寫保存 會生成對應(yīng)的.css文件
   • 當(dāng)出現(xiàn)重大語法錯誤 保存并不會生成對應(yīng)的css文件

less注釋語法:

• (1) 單行注釋: '//一行代碼' 這個不顯示在css文件里 ctrl+/
• (2)多行注釋: '/* 塊級注釋 */' 這個代碼會顯示在編譯后的css文件里
  shift+alt+a

運(yùn)算

• 加 +,減 -, 乘 *,除 (a/b)
• 單位:
  1 單位沒有順序之分 如果出現(xiàn)多個單位 以第一個單位為準(zhǔn)
  2. 運(yùn)算符前后 要么都加空格 要么一個都不加

嵌套: 后代 子代 偽類 偽元素 交集 并集

• 3.21 后代選擇器

less后代選擇器語法

• 3.22 子代選擇器

less子代選擇器語法

• 3.23 交集選擇器

less語法交集選擇器

• 3.24 并集選擇器:

image.png

• 3.25偽類選擇器:

image.png

• ########32.6 偽元素

  
  
  image.png

• 3.3 變量:

  1. @變量名:變量值;
  2. 注意點(diǎn): 變量名大小寫敏感 不能以數(shù)字開頭 不能有特殊字符

• 3.4 導(dǎo)入.less文件 @import

  1. 語法: 在.less頁面中導(dǎo)入.less文件
  2. 格式:
     (1) @import url();
     (2) @import .less;

• 3.5 導(dǎo)出.less文件 //out:

  1. 語法: 導(dǎo)出對應(yīng)的.css文件
  2. 格式:
     (1) //out: '../css/'; : out: 后面是目標(biāo)文件的保存路徑
     表示導(dǎo)出對應(yīng)的css文件到當(dāng)前目錄的上一級文件夾--css文件夾中 如果沒有會生成對應(yīng)的css文件夾

• 注意:

1. 如果 ../css/ 沒有'/' 會把這個css當(dāng)成生成.css文件的名稱 而不是文件夾;
2. ??less 的配置文件一定要放在第一行

全局配置

        settings.json文件 光標(biāo)定位的位置 添加以下代碼
        "less.compile": {
                "out":"../css/"
            }, 
        生成的.css文件會自動保存在當(dāng)前文件的上級目錄下的css文件下

• 3.6 禁止導(dǎo)出: //out:false

• 3.7 壓縮導(dǎo)出: // compress:true

1.節(jié)約成本 讓網(wǎng)頁渲染更快,壓縮的文件顯示在同一行 行號只有1

// out: ../css3/, compress:true 多個配置文件要一起寫 配置與配置之間英文','隔開;

!!! lib文件夾 存放第三方的文件庫