css 响应式设计初学者的基础知识

Question

很棒的堆栈溢出！

我是编程新手，我的问题对你们中的许多人来说可能不是问题，但我不能自己解决它，我一直在尽我最大的努力自学和导师的支持在我的训练营课程中，但遗憾的是无法理解并使其发挥作用，无法提供任何示例，因为无论我尝试什么，它都只是一个悲惨的失败者，我很遗憾向失败者展示。无论如何，我的问题是 响应式设计 而我不明白它或让它工作，是否有任何网站或建议我可以获得具体和清晰的解释？如果我的主题不在正确的频道上并打扰了有经验的程序员或软件开发人员的安宁，我深表歉意。最好的问候

Answer 1

最简单的方法可能是使用像 Bootstrap 这样的框架，它本身可以 “响应式”。只需将 thi 添加到您的文档 head


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

和 <div> 包装您的内容：

<div class="container">
...
</div>

此外，还有许多 pre-styled 组件，例如导航栏或模态

如果您想自己编写代码，这里有一些不错的 wiki 文章：

https://www.w3schools.com/html/html_responsive.asp

https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design

PS：不用担心 - 响应式设计一开始对每个人来说似乎有点复杂！

css 响应式设计初学者的基础知识

css basic for responsive design beginners

css

jquery

responsive