【学习打卡】第六天 前端工程师2022版 响应式布局

课程名称： 前端工程师2022版

课程章节：响应式布局

主讲老师：Alex

课程内容：

今天学习的内容包括：

2-2.断点和书写位置

    1.如何设置断点Breakpoint

        1.1经验总结

            Bootstrap的断点

            xs:<576px超小屏

            sm:576px-768px

            小屏md:768px-992px

            中屏lg:992px-1200px

            大屏xl:>=1200px

        1.2超大屏改变屏幕的大小，当页面显示不正常（或不符合要求）的时候，就需要设置断点了

    2.媒体查询的书写位置

        2.1样式表（style标签或单独的CSS文件)中（推荐）

        2.2样式外链Link中（不推荐）(不能达到按需下载，会下载多份样式，会浪费带宽）

        开发时样式分开写，打包时用webpack打包到一起

    2-3媒体查询策略

1. 1. 无策略：随便写，用and

   2. PC端优先:从大往小写，用后面的覆盖前面的，不用and

   3. 移动端优先:与pc相反，从小往大写，不用and

注：在写媒体查询时，只写一个and就行，不用写min-width

@media screen and (max-width:1100px){
            p{color: red;}
        }

用js：字体等可以时时改变，  缺点是：性能差

用媒体查询:字体等在断点处跳转(算是缺点）   性能好·  字体不适合用rem(因为计算时会有很多小数） 

一般用媒体查询来改变可以用rem配合媒体查询来更改字体（设置html字体大小在相应的尺寸发生跳转，使设置了rem的元素发生相应的跳转

课程收获：

学会了用响应式布局写慕课网首页，设置合适的断点来适应不同的布局，不再是一个布局用到底，语法上面用的还算熟练，编程作业第二题在断点处设置图片的宽度百分比没掌握好，问了老师才知道图片可以自己通过控制台调整。

今天学习课程共用了3小时，其中编程练习在设置图片宽度处浪费了太多时间，今天没有连续性学习，都是碎片时间，希望能够早日走上正轨，早点找工作！