gpt4 book ai didi

css - 模拟 bootstrap @media 查询行为的困难时期

转载 作者:太空宇宙 更新时间:2023-11-04 10:19:13 25 4
gpt4 key购买 nike

我在应用程序中使用 bootstrap,我喜欢它。我非常喜欢用于处理不同尺寸屏幕的 CSS @media 查询。

在某些情况下,我需要编写自己的类来使用相同的查询。例如,我的应用程序中有一个 navbar;如果用户在较小的屏幕上,我想增加字体大小和缩放比例。

我只是尝试模仿这些查询的布局方式,但我似乎无法复制这种行为。

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!-- css -->
<link rel="stylesheet" href="skin.css"/>
</head>
<body class="zoom-xs-150 zoom-sm-120">
<nav class="navbar navbar-inverse navbar-fixed-top ">
<div class="container">
<!-- navbar content -->
</div>
</nav>
</body>
</html>

然后我的 CSS 看起来像这样;

CSS

@media (max-device-width: 1200px) {
// zoom-lg styles
}
@media (max-device-width: 992px) {
// zoom-md styles
}
@media (max-device-width: 768px) {
// zoom-sm styles
}
@media (max-device-width: 360px) {
// zoom-xs styles
}

但尽管如此,我似乎还是无法说服它发挥作用。我尝试摆弄所有属性(例如使用 min-width,或不使用 device-width 等),但结果不一致,我遇到了很难理解为什么。

使用它们有什么我遗漏的特别之处吗?

最佳答案

CSS:

@media screen and (max-width: 768px) {
.zoom-sm-120 nav {
font-size: 120%;
}
}

@media screen and (max-width: 360px) {
.zoom-xs-150 nav {
font-size: 150%;
}
}

带有更丰富多彩样式表的 jsFiddle,以便更好地理解:http://jsfiddle.net/DrSRT/639/

关于css - 模拟 bootstrap @media 查询行为的困难时期,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36978665/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com