第二讲:响应式布局基础
一.预习笔记
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)
二.课堂笔记
三.课后回顾
–行动是治愈恐惧的良药,犹豫拖延将不断滋养恐惧