Question

我发现了一篇关于在特定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>

Answer 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>

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

无法在移动版

1 个答案: