響應式布局

?核心知識點

• less
• 媒體查詢

學習目標

• 掌握less基本語法
• 能夠使用less編寫css代碼
• 能夠掌握媒體查詢
• 能夠使用媒體查詢實現響應式布局

Less介紹

維護CSS的弊端

CSS本質上不是一門語言,是一個簡單的樣式表.代碼維護相對老套,不夠靈活.

LESS介紹

?LESS預處理器: 依然使用CSS語法，引入了變量，混合，運算, 嵌套等功能，大大簡化了 CSS 的編寫，并且			  降低了 CSS 的維護成本?常見的CSS預處理器:  Less  | SASS  | Stylus[sta?l?s] 等https://less.bootcss.com/
https://www.sass.hk/install/
https://www.zhangxinxu.com/jq/stylus/

開發工具配置

VSCode需要安裝插件:  Easy Less  安裝成功后  Ctrl+s保存即可

Less語法

• 變量

?@自定義變量名: 值;例如:@nav_bgcolor: red;nav {color: @nav_bgcolor;}?變量的運算:@width: 10;nav {width: @width * 3px;}

混合

? 定義一個公共的樣式(可以式類選擇的語法,可以是ID選擇器的語法)例如:.test() {width: 50px;height: 50px;}nav {.test();}header {.test();}

嵌套

例如:
nav {ul {li {}}
}

在瀏覽器中預覽LESS文件(了解)

1. HTML頁面直接溝通link標簽引用 less文件
<link rel="stylesheet/less" type="text/css" href="less文件.less">2. HTML頁面中引用用來解析less文件的一個js文件
<script type="text/javascript" src="less.js"></script>備注:
1. 以上執行過程需要在服務器環境下進行
2. webstorm開發工具下,可以執行運行,因為webstorm自帶一個服務器環境

媒體查詢

1.概念

媒體查詢可以讓我們根據設備顯示器的特性（如視口寬度、屏幕比例、設備方向：橫向或縱向）為其設定CSS樣式，媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有 width 、 height 和 color （等）。使用媒體查詢，可以在不改變頁面內容的情況下，為特定的一些輸出設備定制顯示效果。

2.組成

• 媒體類型
  • all (所有的設備)
  • print (打印設備)
  • screen(電腦屏幕,平板電腦),智能手機
• 媒體特性
  • width
  • height
  • max-width / max-height
  • min-width / min-width
  • orientation: portrait (豎屏模式肖像) | landscape (橫屏模式全景)
• 語法關鍵字
  • and 可以將多個媒體特性鏈接到一塊,相當于且
  • only 指定某個特定的媒體類型, 可以省略

3.語法

@media only screen and (width: 320px) {css代碼
}

4.設備劃分

超小屏幕 手機 (<768px)

@media only screen and (min-width: 320px) and (max-width: 767px) {}

小屏幕 平板 (≥768px)

@media only screen and (min-width: 768px) and (max-width: 991px) {}

中等屏幕 桌面顯示器 (≥992px)

@media only screen and (min-width: 992px) and (max-width: 1199px) {}

大屏幕 大桌面顯示器 (≥1200px)

@media only screen and (min-width: 1200px) {}