媒体查询CSS不起作用 [英] Media query CSS not working

问题描述

您好我有一个CSS代码，当我浏览我的浏览器时，表格行中的字体大小也会缩小。但是当我尝试它时，它没有按预期工作。以下是我的代码：

CSS

Hi I have a CSS codes in which when I "Restore Down" my browser, the font size in a table row will get shrunk as well. But when I try it, it did not work as expected. Below are my codes:
CSS

@media all and (max-width: 914px) {
     .ui-Title {
        font-size:12px; 
        padding-top:5px; 
        color:whitesmoke; 
        display:inline-block
    }
}

HTML

HTML

<td class="ui-Title" style="vertical-align:middle;font-size:x-large; font-weight:bold">
    MyTitle
</td>

我尝试了什么：



1.尝试搜索互联网以更好地了解CSS媒体类的使用情况，但发现没有。

What I have tried:

1. Try to search Internet for better understanding about CSS media class usage but found nothing.

推荐答案

内联CSS将始终优先于其他CSS展示位置。在您的情况下，字体大小应为12px，宽度最大为914px，视情况而定通过媒体查询，但内联CSS总是将其覆盖为x-large。删除内联css并将其放在head部分中，例如

The inline CSS will always take precedence over other CSS placements. In your case, the font size is supposed to be 12px for width up to 914px as dictated by media query, but inline CSS always overrides it to x-large. Remove the inline css and place it in the head section instead, e.g.

<style>
     .ui-Title {
        vertical-align:middle;font-size:x-large; font-weight:bold
    }

@media all and (max-width: 914px) {
     .ui-Title {
        font-size:12px; 
        padding-top:5px; 
        color:whitesmoke; 
        display:inline-block
    }
}
</style>

了解更多信息： CSS如何 [ ^ ]

这篇关于媒体查询CSS不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！