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

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

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于学习了解掌握响应式布局及其原理， 快速进行响应式布局开发. </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 背景： 工作需要，于是就只能静下心来去认真学习下, 也借着这个机会将前端CSS布局掌握，往全栈开发迈进一步. &nbsp; 1.介绍 简单说，响应式布局即可以同时适配多个屏幕设备. 常见的即： PC/Mobile &nbsp; 2.文档/视频教程 <a href="https://blog.csdn.net/william_n/article/details/104017944" rel="nofollow">https://blog.csdn.net/william_n/article/details/104017944</a>&nbsp; //CSS 资源 - 收集 &nbsp; <a href="https://www.bilibili.com/video/BV18J411S7tZ?from=search&amp;seid=6372014415107347555" rel="nofollow">https://www.bilibili.com/video/BV18J411S7tZ?from=search&amp;seid=6372014415107347555</a>&nbsp; //一天学会DIV+CSS布局 <a href="https://search.bilibili.com/all?keyword=bootstrap%20&amp;from_source=nav_search_new" rel="nofollow">https://search.bilibili.com/all?keyword=bootstrap%20&amp;from_source=nav_search_new</a> <a href="https://www.bilibili.com/video/BV1YW411T7yy?from=search&amp;seid=3463752165082141581" rel="nofollow">https://www.bilibili.com/video/BV1YW411T7yy?from=search&amp;seid=3463752165082141581</a>&nbsp;//尚硅谷Bootstrap教程(bootstrap框架讲解)&nbsp; &nbsp;--- 推荐 &nbsp; <a href="https://www.bilibili.com/video/BV14J4114768?from=search&amp;seid=6372014415107347555" rel="nofollow">https://www.bilibili.com/video/BV14J4114768?from=search&amp;seid=6372014415107347555</a>&nbsp; //黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem <a href="https://www.bilibili.com/video/BV1N54y1i7dG?p=1" rel="nofollow">https://www.bilibili.com/video/BV1N54y1i7dG?p=1</a>&nbsp; &nbsp; ---- 推荐 &nbsp; <a href="https://www.bilibili.com/video/BV1uE411Q7tx?p=1" rel="nofollow">https://www.bilibili.com/video/BV1uE411Q7tx?p=1</a>&nbsp; //【干货分享】清晰的CSS 3媒体查询响应式布局，bootstrap 框架原理实战&nbsp; &nbsp;-- 推荐 &nbsp; 3.重要知识点 DIV+CSS --- 传统布局方式 Flex弹性布局 -- 新的布局方式 栅格系统 &nbsp; &nbsp;&nbsp;&nbsp;--- bootstrap &nbsp; &nbsp; &nbsp;--- 基于bootstrap自行实现栅格系统 &nbsp; &nbsp; &nbsp;--- 基于flex实现栅格系统 &nbsp; 4.工具辅助类 <a href="https://blog.csdn.net/william_n/article/details/108661396" rel="nofollow">https://blog.csdn.net/william_n/article/details/108661396</a>&nbsp; //前端开发工具 - 收集 &nbsp; 5.练习/实践demo TBD &nbsp; &nbsp; Note: 所有实践后的demo, code将会放到GitHub/Gitee &nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> 见上面链接. <a href="http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html" rel="nofollow">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</a>&nbsp; //阮一峰 -&nbsp;Flex 布局教程：语法篇 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...