我正在一个网站上工作,并且坚持使其对某个特定元素做出响应。实际上就是NavBar。当我给它margin-right:400px
并将其置于网页中心时,它可以在笔记本电脑屏幕上工作,而在较小的移动屏幕上,它无法工作,当我通过添加width:100 5 height:auto and margin-right:400px;
使用响应式属性时,它可以工作在小型设备中,但不在笔记本电脑屏幕中。在“笔记本电脑”屏幕上,它位于屏幕的右侧。
提前谢谢...
答案 0 :(得分:0)
您可以使用任何CSS框架,例如引导程序或CSS mediaquery 。
答案 1 :(得分:0)
1:使用Flexbox
CSS3灵活框(或更广泛地称为Flexbox)是CSS3中一种新的强大的布局模式。它为我们提供了一种优化的用户界面布局盒模型。 使用Flexbox,垂直居中,等高列,重新排序和更改方向都很容易。
2:使用CSS媒体查询
CSS Grid是CSS中功能最强大的布局系统。它为网络带来了一个二维布局工具,能够将项目放置在行和列中。网格在现代Web设计中的重要性很高,因此该新规范通过在浏览器中布置元素解决了许多古老的问题。
3:使用Bootstrap
Bootstrap是最流行的HTML,CSS和JavaScript框架,用于开发响应式,移动优先的网站。 Bootstrap完全免费下载和使用! Bootstrap是一个框架,可帮助您更快,更轻松地设计网站。它包括用于排版,表单,按钮,表格,导航,模式,图像轮播等的基于HTML和CSS的设计模板。...这是使用Bootstrap的一些其他原因:Bootstrap的自适应CSS可以适应手机,平板电脑和台式机。
4:使用基础
Foundation也被视为杰出的前端框架。它是一个超响应框架,用于创建无缝设计,以创建网站,用于Web的应用程序以及移动和电子邮件模板。 Foundation是最容易学习的框架,因此新用户可以轻松使用它。这个出色的框架具有许多组件,包括布局,导航,媒体,库容器等等。 Foundation还提供了一系列出色的插件,可为开发人员提供扩展的选择范围,以便他们相应地选择一个插件。
提示: 制作网站时,请尝试使其首先移动。 即首先使网站响应移动视图,然后使其针对桌面。其背后的原因是,如果您首先使其移动,则在台式机上看起来也不错。但是,如果您首先设计台式机,那么在移动设备上效果会不佳。
希望有帮助