英文:
Css media query not working (font size increase)
问题
我有一个使用“媒体查询”的问题。它对我从未起作用，我已经搜索了很多次，但找不到解决方法。
以下是代码，我试图在小设备（最大宽度为576px）中将字体大小从44px增加到70px。
CSS部分：
/*主标题样式*/
.title {
font-size: 44px;
font-weight: 700;
}
/*媒体查询标题样式*/
@media screen and (max-width: 576px) {
.title {
font-size: 70px!important;
}
}
HTML部分：
<div class="container">
<div class="row">
<div class="content col-lg-6 col-sm-12">
<h1 class="title mb-3">在不到5分钟内托管您的网站。</h1>
</div>
</div>
</div>
我尝试过使用“@media screen and (max-width: 576px)”和“@media (max-width: 576px)”两种方式。我还使用了从Bootstrap库中引入的类“fs-sm-1”，但对我来说字体太小了。
我期望在小型设备上，字体大小从44px增加到70px。
英文:
I have a problem using "media query". It never works for me and I searched many times and can't find the solution.
here is the code below and I am trying to increase the font size from 44px -->> 70px in small devices (576px max-width)
CSS👇🏾
/*main title style*/
.title {
font-size: 44px;
font-weight: 700;
}
/*media query title styling*/
@media screen and(max-width: 576px) {
.title {
font-size: 70px!important;
}
}
Html 👇🏾
<div class="container">
<div class="row">
<div class="content col-lg-6 col-sm-12">
<h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>
I tried using both "@media screen and(max-width: 576px)" and "@media (max-width: 576px)"
I also used the class "fs-sm-1" brought from bootstrap library but it was too small for me.
I expect the font size to increase from 44px >> 70px in small devices
答案1
得分: 0
你只需在70px和!important之间，以及and和(max-width: 576px)之间加入一个空格。
英文:
you just need to put a space between 70px and !important. and also between and and (max-width: 576px).
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*main title style*/
.title {
font-size: 44px;
font-weight: 700;
}
/*media query title styling*/
@media screen and (max-width: 576px) {
.title {
font-size: 70px !important;
}
}
<!-- language: lang-html -->
<div class="container">
<div class="row">
<div class="content col-lg-6 col-sm-12">
<h1 class="title mb-3">Host your website in less than 5 minutes.</h1>
</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
我还注意到我没有添加正确的标签，以便"媒体查询"能够正常工作。
确保您添加以下代码，以使您的媒体查询正常工作：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
英文:
I also noticed that I did not add the proper <meta> tag so that "media queries" work.
make sure you add the
<meta name="viewport" content="width=device-width, initial-scale=1.0">
so your media queries work
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论