【学习打卡】第六天 前端工程师2022版 响应式布局
2022/8/9 4:22:52
本文主要是介绍【学习打卡】第六天 前端工程师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媒体查询策略
无策略:随便写,用and
PC端优先:从大往小写,用后面的覆盖前面的,不用and
移动端优先:与pc相反,从小往大写,不用and
注:在写媒体查询时,只写一个and就行,不用写min-width
@media screen and (max-width:1100px){ p{color: red;} }
用js:字体等可以时时改变, 缺点是:性能差
用媒体查询:字体等在断点处跳转(算是缺点) 性能好· 字体不适合用rem(因为计算时会有很多小数)
一般用媒体查询来改变可以用rem配合媒体查询来更改字体(设置html字体大小在相应的尺寸发生跳转,使设置了rem的元素发生相应的跳转
课程收获:
学会了用响应式布局写慕课网首页,设置合适的断点来适应不同的布局,不再是一个布局用到底,语法上面用的还算熟练,编程作业第二题在断点处设置图片的宽度百分比没掌握好,问了老师才知道图片可以自己通过控制台调整。
今天学习课程共用了3小时,其中编程练习在设置图片宽度处浪费了太多时间,今天没有连续性学习,都是碎片时间,希望能够早日走上正轨,早点找工作!
这篇关于【学习打卡】第六天 前端工程师2022版 响应式布局的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享
- 2024-01-11前端系列:ES6-ES12新语法
- 2024-01-03前端 Git 使用约定