创建响应式导航，在移动设备上靠右对齐，但在较大屏幕上靠齐居中
创建响应式导航，在移动设备上靠右对齐，但在较大屏幕上靠齐居中
提问于 2019-05-30 08:46:59
我正在尝试创建一个带有徽标和链接的nav。我希望徽标始终保持在相同的位置，垂直居中的左侧，但我希望链接项目的变化取决于屏幕的大小。
- 在小屏幕上，我想要小字体，链接右对齐2.在中等屏幕上，我想要中等字体大小，链接在大屏幕上居中对齐
- ，我想要大字体，链接在中心
对齐
理想情况下，我希望更改发生在文本即将命中徽标的时候。
Here's a link到我想像的地方。
回答 2
Stack Overflow用户
发布于 2019-05-30 08:55:48
你需要的是断点-当视区大小改变时，它会改变CSS样式。语法如下所示：
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}你可以在这里阅读到：https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Stack Overflow用户
发布于 2019-05-30 09:03:17
您可以使用媒体查询来根据屏幕大小调整字体大小和位置。例如，@media (max-width 600px) { [your nav name] a { font-size: .7rem; float: right; }}。针对不同的屏幕进行相应的调整。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56370266
复制相关文章
相似问题