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%;} 

    }