CSS - 响应式布局/自适应 - 学习/实践

小咪咪 2022-12-08 12:55 355阅读 0赞

1.应用场景







主要用于学习了解掌握响应式布局及其原理，

快速进行响应式布局开发.

2.学习/操作







背景：

工作需要，于是就只能静下心来去认真学习下, 也借着这个机会将前端CSS布局掌握，往全栈开发迈进一步.

 

1.介绍

简单说，响应式布局即可以同时适配多个屏幕设备.

常见的即： PC/Mobile

 

2.文档/视频教程

https://blog.csdn.net/william_n/article/details/104017944  //CSS 资源 - 收集

 

https://www.bilibili.com/video/BV18J411S7tZ?from=search&seid=6372014415107347555  //一天学会DIV+CSS布局

https://search.bilibili.com/all?keyword=bootstrap%20&from_source=nav_search_new

https://www.bilibili.com/video/BV1YW411T7yy?from=search&seid=3463752165082141581 //尚硅谷Bootstrap教程(bootstrap框架讲解)   —- 推荐

 

https://www.bilibili.com/video/BV14J4114768?from=search&seid=6372014415107347555  //黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem

https://www.bilibili.com/video/BV1N54y1i7dG?p=1    —— 推荐

 

https://www.bilibili.com/video/BV1uE411Q7tx?p=1  //【干货分享】清晰的CSS 3媒体查询响应式布局，bootstrap 框架原理实战   — 推荐

 

3.重要知识点

DIV+CSS —- 传统布局方式

Flex弹性布局 — 新的布局方式

栅格系统

     —- bootstrap

     —- 基于bootstrap自行实现栅格系统

     —- 基于flex实现栅格系统

 

4.工具辅助类

https://blog.csdn.net/william_n/article/details/108661396  //前端开发工具 - 收集

 

5.练习/实践demo

TBD

 

 

Note:

所有实践后的demo, code将会放到GitHub/Gitee

 

后续补充

…

3.问题/补充







TBD

4.参考







见上面链接.

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html  //阮一峰 - Flex 布局教程：语法篇

后续补充

…

发表评论

表情：
评论列表 （有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

    相关 自适应布局和响应式布局

    我根据个人理解描述一下： 一套程序在多种终端设备展示，页面布局有2种：自适应布局和响应式布局。这二者有啥区别呢？ 自适应布局，就是页面在多种终端设备，不同分辨率下，能够正常

    柔情只为你懂柔情只为你懂/ 0 赞/ 308 阅读

    相关 响应式布局与自适应布局

    自适应布局 为不同的设备提供不同的网页，比如专门写一个mobile / iPhone / iPad版本。虽然解决了适配，但是比较麻烦，同时要维护好几个版本，而且如果一个网

    女爷i女爷i/ 0 赞/ 347 阅读

    相关 CSS自适应布局

    什么是布局，其实就是用定位和尺寸相关的属性来完成布局，布局会用到的有：普通流、浮动、绝对定位三种定位机制，CSS3中的transform、flex等 先来说float浮动，现

    朱雀朱雀/ 0 赞/ 396 阅读