无法在手机上修改文字字体大小答案

【问题标题】：Can't modify text font size on mobile无法在手机上修改文字字体大小
【发布时间】：2017-07-10 22:04:54
【问题描述】：

我发现了一篇关于在特定 div 中专门针对移动设备修改文本大小的帖子，如下所示：

@media only screen and (max-width: 480px) {

.news {
    font-size: 5px;
 }
 }

但是对于我正在搞砸的网站，我无法让它工作。我希望在移动设备上打开时字体变小。虽然我想知道我是否必须在 html 中设置一个视口元数据，但每次我这样做 A，它并没有修复它，B，它完全破坏了我的网站的平衡，剪裁了大量的信息，我真的没有不喜欢。所以，我现在能够使用视口的唯一方法是，它是否完全不影响缩放因子。不确定这是否是问题所在。非常感谢您对此的任何帮助。完整代码：

css:

*{
margin:0;
padding:0;
}

body{
text-align:center; /*For IE6 Shenanigans*/
font-size: 100%;
font-weight: 1;
font-family: 'rationale';
background:black;

}




#newsusa {

position: absolute; /*makes it relative to the html element, (the first           
positioned element).*/
 width: 100%; /*makes the element 100%, to center it. */
 left: 0px;
 top: 200px;


 }




 .news {
color: white;
font-size: 18px;
}   


li {
list-style-type: none;
}


@media only screen and (max-width: 480px) {

.news {
    font-size: 0.8em;!important;
}
}



@media only screen and (max-width: 280px) {

.news {
    font-size: 0.8em;!important;
}
}

xhtml:

<?php include 'global.php';?>
<html xmlns="http://www.w3.org/1999/xhtml">
<html lang="en">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mobiletest.css">
<link href='//fonts.googleapis.com     

/css?family=Iceland|Rationale|Quantico|VT323|Dorsa' rel='stylesheet'      
 type='text/css'>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3    
/jquery.min.js'></script>


 <div id="newsusa">

<h1 class="appear-later">News</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usnews', 'ignore'); ?></ul>
</div>


<div class="spacer2">
</div>

<h1 class="appear-later">Tech</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usatechnews', 'ignore'); ?></ul>
</div>

<div class="spacer2">
</div>

<h1>Business</h1>

<div class="spacer1">
</div>

<div class="news">
<ul><?php outputValueFromCache('usamoneynews', 'ignore'); ?></ul>
</div>

 </div>






 </html>

【问题讨论】：

尝试使用font-size: 5px;!important 并使用em 就像font-size: 0.8em;!important 一样

标签： css mobile resize

【解决方案1】：

你需要添加

<meta name="viewport" content="width=device-width, initial-scale=1">

到您的标题。如果您考虑以下代码：

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .page-header{
                font-size: 16px;
                color: red;
            }
            @media (max-width: 430px) {
                .page-header{
                    font-size:100px;
                    color: green;
                }
            }
        </style>
    </head>
    <body>
        <h1 class="page-header">Hello</h1>
    </body>
</html>

媒体查询仅在您定义了视口元标记后才起作用。我知道这可能不是你想听到的，但我认为这是你的解决方案。

【讨论】：

媒体查询除外。
感谢您的回复。我试过这样做，还没有看到有什么不同。想知道我还做错了什么。
试试@media（最大宽度：768px）。如果你让它工作，你就不需要 !importants ，这会省去很多麻烦。
运气不好。想知道您是否可以通过 gitnub 之类的方式访问一个非常基本的修改字体大小的示例？我只需要一个工作示例来了解它是如何完成的，以及我做错了什么。令人惊讶的是，在互联网上很难找到像这样的基本示例。一直在尝试