Html5+CSS3：第二讲：响应式布局基础

第二讲：响应式布局基础

一.预习笔记

1.工具使用(开发软件，浏览器)

浏览器：F12中的控制台，响应式

Hbuilder：

2. 大小单位的认知(px,%,em,rem)

px:绝对单位

%:相对单位，相对于父一级元素的百分比

em:相对于父一级元素的倍数

rem:相对于根元素的倍数

3.媒体查询

概念：为不同尺寸的屏幕设定不同的CSS样式

语法格式 @media only screen and (min-width:800px) and (max-width:1200px)

使用注意事项：

1.@media 这个关键字必不可少，它表示声明媒体查询

2.only也是一个关键字，表示只有(仅此一个),除此之外还有其它的关键字，例如not all等等，这些关键字结合后面的媒体类型表示指定媒体类型

3.screen也是一个关键字，表示媒体类型中的屏幕，除此之外还有print(打印设备)，speech(语音合成器等发声设备)，all(默认，所有媒体设备)

4.and 也是一个关键字，表示所有条件同时满足，一般使用and时就表示有多个条件

5.()里面是媒体属性值，常见的就是max-width与min-width(这两个是设置屏幕宽度的)，除此之外还有屏幕高度，屏幕方向(orientation方向，横屏landscape还是竖屏portrait)

二.课堂笔记

三.课后回顾

–行动是治愈恐惧的良药，犹豫拖延将不断滋养恐惧