01.媒体查询

Posted 2021-03-16 foreverluckystar

rem单位

rem(root em) 是一个相对单位，类似于em ，em是父元素字体大小。

不同的rem 的基准是相对于html元素的字体大小

比如，根元素(html)设置font-size=12px;非根元素设置width:2rem，则换成px表示就是24px;

优点：通过修改html里面的文字大小来改变页面中元素的大小可以整体控制

媒体查询

Media Query,是CSS3新语法

1.用@media开头 注意@符号

@media

2.mediatype 媒体类型

//不同终端设备划分成不同的类型，称为媒体查询
all 用于所有设备
print 用于打印机和打印预览
screen 用于电脑屏幕，平板电脑，智能手机等

@media screen

3.关键字 and not only

//关键字将媒体查询类型或多个媒体特性连接到一起做为媒体查询的条件
and : 可以将多个媒体特性连接到一起做为媒体查询的条件
not : 排除某个媒体类型，相当于'非'的意思，可以省略
only : 指定某个特定的媒体查询，可以省略

@media screen and

4.media feature 媒体特性 必须会有小括号包含

//每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，我们暂且了解三个
注意他们要加小括号包含
width： 定义输出设备中页面可见区域的宽带
min-width: 定义输出设备中页面最小可见区域宽度
max-width:定义输出设备中页面最大可见区域宽度

//在屏幕上 并且 最大的宽度是 800像素 设置我们想要的样式
@media screen and （max-width:800px){
    body{background:pink;}
 }
@media screen and （max-width:500px){
    body{background:green;}
 }

媒体查询+rem实现元素动态大小变化

rem 单位是跟着html 来走的，有了rem 页面元素可以设置不同大小尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化