html - CSS 和响应式设计

Question

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

这是 CSS:(我添加了 .grt { font-size: 87.5%}，但没有用)。如果这有帮助，这里是网站:http://www.insidemarketblog.com .为了澄清起见，我在 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>

Answer 1

您当前的样式适用于大于 420 像素的所有屏幕类型。您需要设置 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%;}

    }