Html CSS与响应式设计

我想的字体大小下降到87%的原始大小时，该网站在移动设备上查看。我以为我输入的代码是正确的，但它不起作用

下面是CSS：（我添加了.grt{font size:87.5%}，但它不起作用）。如果这有帮助，请访问以下站点：。为了澄清，我调整了Firebug中的.grt，但这似乎控制了所有文本，而不仅仅是在移动设备上查看时

@media all and (min-width: 420px) {
    $w_widget = ($w_content - $sx2) / 2;
    .columns > .sidebar > * {
        float: left;
        clear: both;
        width: percentage($w_widget / $w_content);
    }
    .columns > .sidebar > :nth-child(2n + 2) {
        float: right;
        clear: none;
    }
    .grt {
        font-size: 87.5%;
    }
    .right, .alignright, img[align="right"] {
        float: right;
    }
    .left, .alignleft, img[align="left"] {
        float: left;
    }
    .grt .right, .grt .alignright, .grt .stack {
        margin-left: $x1;
    }
    .grt .left, .grt .alignleft {
        margin-right: $x1;
    }
    .grt blockquote {
        padding-right: $x1;
    }
    .grt blockquote.right, .grt blockquote.left {
        width: 45%;
        margin-bottom: $x05;
        padding-right: 0;
    }
    .headline_area .post_author ~ .twitter_profile ~ .post_date, .headline_area .num_comments_link {
        margin-left: $x025;
    }
    .headline_area .post_author ~ .twitter_profile:after, .archive .headline_area .post_author ~ .post_date:after {
        content: '';
    }
    .grt input[type="text"], .grt input[type="email"], .grt .input_text {
        width: 50%;
    }
    #commentform textarea.input_text {
        width: 100%;
    }
    .grt .thesis_email_form input[type="text"], .grt .thesis_email_form input[type="email"], .grt .thesis_email_form .input_text {
        margin-bottom: 0;
    }
    .grt .thesis_email_form input[type="submit"], .grt .thesis_email_form .input_submit {
        margin-left: $x025;
        vertical-align: top;
    }
    .comment_date {
        display: inline-block;
    }
    .previous_comments, .next_comments {
        width: 50%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    .previous_comments {
        float: left;
    }
    .next_comments {
        float: right;
        border-top: 0;
    }
}

还有HTML

<div class="content grt">
<article id="post-1" class="post_box top" itemtype="http://schema.org/Article" itemscope="">
<header class="headline_area">
<h1 class="headline" itemprop="name">Best SEO Tools to Improve Rankings</h1>
<span class="post_author" itemprop="author">Inside Market Strategy</span>
<span class="twitter_profile">
<a href="https://twitter.com/https://twitter.com/ims_biz">@https://twitter.com/ims_biz</a>
</span>
<meta content="2014-03-22" itemprop="datePublished">
<meta content="2014-03-31" itemprop="dateModified">
<span class="post_date" title="2014-03-22">March 22, 2014</span>
</header>
<img class="attachment-full wp-post-image" width="546" height="344" alt="Best SEO Tools" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/best_seo_tools.jpg" style="display: block;" data-lazy-loaded="true">
<noscript><img width="546" height="344" src="http://www.insidemarketblog.com/wp-content/uploads/2014/03/best_seo_tools.jpg" class="attachment-full wp-post-image" alt="Best SEO Tools" /></noscript>
<div class="post_content" itemprop="articleBody">
</article>
<section id="comments">
<div class="prev_next"></div>
</div>

2014年3月22日

当前样式应用于所有大于420px的屏幕类型。您需要设置

min width

和

max width

或仅设置

max width

，以满足您的需要。见下文：

   /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
        @media only screen and (min-width: 480px) and (max-width: 767px) {
        .wrap {max-width: 100%}
           .grt {font-size: 100%;}
        }

    /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
    @media only screen and (max-width: 479px) {
    .wrap {max-width: 100%;}
     .grt {font-size: 87.5%;}

    }

---

您想使用

@media handled….

或将

最大宽度设置为
而不是
最小宽度
。您当前的风格适用于所有大于420px的屏幕类型。您好，我如何与您联系？下午还是电子邮件？您的个人资料中没有联系人信息。我需要一个反应灵敏的菜单。你能参加那个项目吗？谢谢