【无标题】

开发工具与关键技术： Visual Studio Code

作者：林海威

撰写时间：2022/3/8

1.查询( Media Query )是CSS3新语法

@media可以针对不同的屏幕尺寸设置不同的样式

当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

目前针对很多苹果手机、 Android手机 ,平板等设备都用得到多媒体查询

首先进入Visual Studio Code新建文件夹，转化成html语言打入！按Tab键就可以

开始了

                                                                                                            

2媒体查询的步骤

    1，通过@media关键字定义媒体  2、选择媒体类型  3、关键字（and ont only）  4、媒体特性5、写你需要的样式 ，(media feature媒体特性必须有小括号包含) and :可以将多个媒体特性连接到一起，相当于“且”的意思，@media注意@符号.

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

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

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

                                                                                   

                                                                                                                                                                              

       

    3,max(大)，min(小)，宽度小于800px（像素）或大于800px(像素)时里面的样式会发生改变  , 我们有最大值max-width和最小值min-width都是包含等于的.。当屏幕大于时800px会黄色变成蓝色，小于800px时会从蓝色变成黄色

    注意:为了防止混乱,媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写,这样代码更简洁