移动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 (横屏模式全景)

☞课堂案例-微金所案例