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

您當前的風格在所有類型的屏幕比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%;} 

    }