H5第三天（1）
響應式布局
?核心知識點
- 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語法
- 變量
混合
? 定義一個公共的樣式(可以式類選擇的語法,可以是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) {}總結
