移動web響應式布局

?知識點-回顧

1. 什么是彈性盒子(伸縮布局)
2. 伸縮布局解決了什么問題
3. 伸縮盒子特點

1. 有一條默認水平顯示的主軸
2. 有一條始終要垂直于主軸的側軸

4.重點掌握的屬性

設置伸縮盒子

 display: flex;

設置主軸對齊方式

justify-content

設置側軸對齊方式

align-items

設置主軸方向

flex-direction: row | column;

5.其他了解屬性

設置是否可以換行

1.注意:在伸縮盒子中,默認盒子是不換行顯示的flex-wrap: wrap;

設置換行后的對齊方式(多行)

align-content

設置子元素flex屬性

1. flex屬性如果給子元素設置,那么就必須要保證父元素是彈性盒子
2. flex屬性給子元素設置后,用來設置子元素占父元素剩余寬度(高度)的比例

設置子元素的order屬性

1. 設置排序的,order屬性是子元素設置的,不是給父元素設置的.2. order屬性設置的值越小,標簽在html結構中就越靠前顯示

?案例-知識點鋪墊

1.max-width | min-width屬性介紹

max-width:讓元素隨著視口的改變而改變如果視口的大小大于500px,那么當前盒子的寬度就是視口的寬度如果視口的大小小于500px,那么當前盒子的寬度就是500px實際大小 >= 500px
min-width:讓元素隨著視口的改變而改變 規定的當前元素的最大寬度是500px如果視口比500px還要大,那么當前這個盒子的寬度就是500如果視口比500px還要小,那么當前整個盒子的寬度就是視口的寬度實際寬度 <= 500width: 是一個固定的大小,不會隨著視口的改變而改變

2.線性漸變設置

線性漸變本質: 通過一段css代碼,模擬一個具有漸變效果的背景圖片線性漸變的屬性: background  | background-image;

• 線性漸變的組成
  • 開始顏色和結束顏色
  • 漸變的方向
• 線性漸變的語法

background: linear-gradient(/* 1.設置漸變的方向  to + 方位名稱*/to right,/* 2. 設置開始顏色和結束顏色 */red,blue
);或者:background-image: linear-gradient(/* 1.設置漸變的方向  to + 方位名稱*/to right,/* 2. 設置開始顏色和結束顏色 */red,blue
);
注意:1. 在線性漸變中,顏色可以是預定義寫法(red, blue), 還可以是十六進制,或者 rgb的方式2. 線性漸變的方向就是上,下,左,右(可以是角度)

線性漸變的其他補充

1. 0deg  -----> 代表漸變是從下向上漸變
2. 90deg -----> 代表漸變是從左向右

3.修改背景圖片大小

background-size:   修改背景圖片大小的,不能修改img標簽大小1. 設置具體的值
background-size: 100px 100px;   --->將背景圖片修改寬度為100 高為1002. 設置具體值 + auto
background-size: 100px auto;   ----> 將背景圖片寬度修改為100px, 高度會按照寬度動態的計算3. 設置cover
background-size: cover;   ----> 讓背景圖片沾滿整個容器4. 設置contain
background-size: contain;  --->讓背景圖片按照比例顯示,不一定沾滿整個盒子

?新知識點-Less

01. 知識點-Less介紹

less的作用是什么？

我們可以使用less  去寫 CSS代碼使用less去寫CSS代碼的優勢1.less中可以進行數學運算 （+ - 乘 除）2.less中可以支持選擇器中嵌套選擇器

知識點-less-的概念

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展

• less是用來處理css的一個工具
• less又擴展了css(less支持css不支持的寫法)
• less中增加了（變量，數學計算，函數等寫法）

安裝less插件（easyLess）

將當前的less文件編譯成css文件目的： 為了將less中的代碼編譯成css代碼安裝完成后，建議將vscode重新

02.知識點-Less使用步驟

1. 知識點-新建less文件
2. 知識點-Less按照CSS語法編寫
3. Less-語法
   1. 知識點-less-嵌套語法【掌握】
   2. 知識點-less-變量使用【掌握】
      1. 定義變量
      2. 給變量賦值
   3. 知識點-less-混合寫法【了解】
   4. 知識點-less-數學運算【掌握】

?新知識點-響應式布局

知識點-什么是響應式布局

同一個網頁在不同設備中網頁布局是不一樣的 

怎么能夠通過代碼監測到是不同的設備

• 監測不同的設備(屏幕大小不一樣)
• 怎么通過代碼去監測設備屏幕的寬度?

通過媒體查詢的方式,監測(獲取,判斷)當前屏幕的大小

知識點-響應式布局實現的核心

• 響應式布局實現的核心原理就是通過: 媒體查詢獲取設備屏幕的大小
• 什么是媒體查詢

媒體查詢: 本質上就是一段帶有條件性質的css代碼.

媒體查詢語法[語法]

@media  only  screen and (條件) {css代碼...
}注意:1. 媒體查詢語法中的條件,一般都是用來判斷設備的寬度2. 媒體查詢中每一個單詞之間都需要加一個空格

• 媒體查詢語法詳解
  • only 關鍵詞可以省略的 (只,僅僅)
  • screen 代表的是一種媒體類型(帶有屏幕的媒體類型)
    • print也是一種媒體類型(打印設備)
    • all 代表的是所有的媒體類型(默認值)
  • and 關鍵詞 用來連接條件的
• 知識點-關于媒體查詢中條件的一些設置情況
  • 可以設置具體的條件

@media only screen and (width : 320px)

還可以設置一個表示范圍的條件

通過移動設備舉例:只要當前設備的最小寬度是320px 最大設備寬度是767px@media screen and (min-width: 320px) and (max-width: 767px) {}

orientation: portrait (豎屏模式肖像) | landscape (橫屏模式全景)

?課堂案例-微金所案例