HTML5教程

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

本文主要是介绍【学习打卡】第六天 前端工程师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. 无策略:随便写,用and

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

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

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

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

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

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

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

https://img2.sycdn.imooc.com/62efdd7b00013f0706580122.jpg

https://img1.sycdn.imooc.com/62efdd7b0001e51b18280766.jpg

课程收获:

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

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





这篇关于【学习打卡】第六天 前端工程师2022版 响应式布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!