2016-05-20 7 views
-2
が動作していない

/*ここにあなたがの頭の中で、ビューポートメタタグを追加する*/応答性は<pre><code><html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Blogs Index page</title> <style> .page-background{ } </code></pre>

@media only screen and (device-width: 768px), 
    only screen and (max-width: 768px) { 
    .featured-item { 
    display: block !important; 
    width: 100% !important; 
    height: auto !important; 
    } 


    h3 { 
font-size: 2em !important; 
} 
    p { 
font-size: 1.3em !important; 
} 
    a.no-decoration { 
text-decoration: none !important; 
color: #000 !important; 
font-size: 1.2em !important; 
} 
    a.no-decoration.topics-label-text { 
color: #a3a3a3 !important; 
font-size: 1.3em !important; 
} 
    .topic-label { 
vertical-align: top !important; 
text-align: center !important; 
/* padding: 5px; */ 
margin-left: 1px !important; 
color: #a3a3a3 !important; 
padding: 0px 52px !important; 
/* padding-bottom: 15px; */ 
} 
} 



.main-comp{ 
     width: 90%; 
height: 100%; 
background-color: #FFFBF0; 
margin: 5%; 
} 

a.heading-link{ 
    text-decoration: none; 
    } 
.current-blog{ 
width:100%; 
    height: 45%; 

background: #FFF URL(https://1401364973.rsc.cdn77.org/content/uploads/2014/11/hero_radio_tuning.jpg) repeat fixed; 
} 
.current-blog-title{ 
font-size: 2em; 
line-height: 1em; 
text-decoration: none; 
color: green; 
font-weight: 500; 
width: 65%; 
} 

.current-blog-content { 
/* margin-top: 20%; */ 
    padding-top: 6em; 
} 
.current-blog-intro-para{ 
width:65%; 
    margin-top: 3%; 
} 
.current-blog-description{ 
font-family: Gadget, sans-serif; 
color: #000; 

font-size: 1.3em; 
line-height: 1.5em; 
} 
.blogs-listing{ 
width: 100%; 

} 
.featured-item{ 
    display: inline-block; 
width: 30%; 
height: 26em; 
margin: 1%; 
border: 1px dotted #a3a3a3; 
} 
.left{ 
float:left; 
} 

.featuerd-item-content { 
margin: 1em; 
} 

.label-div{ 
    height: 2%; 
background-color: #ccc; 
padding: 0.2em; 
position: absolute; 

} 

img.featured-item-img { 
width: 100%; 
} 
a.no-decoration { 
text-decoration: none; 
color: #000; 
} 
a.no-decoration:hover { 
text-decoration: underline; 

} 
a.no-decoration.topics-label-text { 
color: #a3a3a3; 
} 

.topic-label { 
vertical-align: top; 
text-align: center; 
/* padding: 5px; */ 
margin-left: 1px; 
color: #a3a3a3; 
padding: 1px 36px; 
} 





</style> 

</head> 
<div class="page-background"> 
<div class="main-comp"> 
<div class="current-blog"> 
<div class="current-blog-content"><a class="heading-link" href="#"><h2 class="current-blog-title">Why millennial women are tuning into their finances</h2></a> 
<p class="current-blog-intro-para"><span class="current-blog-description">While survey data finds millennials more engaged than other generations when it comes to finances, there are some differences between how millennial men and women invest. The BlackRock Blog’s Global Editor takes a deeper dive into the numbers.</span></p> 
</div> 

</div> 
<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/bite_plum_simon_greig_shtuterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/tennis_ball_net_oneinchpunch_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/woman_calculator_tsvetelin_dobrev_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 

<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/uk_eu_topor_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/woman_in_heels_kaspars_grinvalds_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/boxing_gloves_jocic_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 
<div class="blogs-listing"> 
<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">MARKETS</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/balloons_suitcase_nito_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 15, 2016</p> 
     <h3>Preparing for the return of volatility</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Heidi Richardson</a></span> 
     <p>Think markets have calmed? As BlackRock’s Heidi Richardson suggests, the stage is still set for half of the year and shar...</p>   </div> 
     </div> 

<div class="featured-item left"> 
    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ETF</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/card_catalog_andrey_kuzmin_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content"> 
     <p>March 10, 2016</p> 
     <h3>What jobs numbers tell us about further rate increases</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Rick Rieder</a></span> 
     <p>BlackRock’s Rick Rieder explains why he thinks job growth will slow down by the second half of the year and shar...</p> 

     </div> 
</div> 
<div class="featured-item left"> 

    <div class="featuerd-image-div"> 
    <div class="label-div"><span class="left topic-label"><a class="topics-label-text no-decoration" href="#">ECONOMY</a></span></div> 
      <img class="featured-item-img" src="https://1401364973.rsc.cdn77.org/content/uploads/2016/03/plant_sprouting_obormot_shutterstock_500x250.jpg"> 
     </div> 
     <div class="featuerd-item-content" style=" 
/* margin: 1em; */ 
"> 
     <p>March 8, 2016</p> 
     <h3>3 common financial mistakes for women to avoid</h3> 
     <span class="autor-name">By <a class="no-decoration" href="#">Nelli Oster, PhD</a></span> 
     <p>It’s no secret that women tend to be in worse financial shape than men. Part of this financial gender divide can be...</p> 

     </div> 
</div> 


</div> 
</div> 
</div> 

<body> 
</body> 
</html> 

答えて

1

それはブラウザ上で応答モードで動作していないが、メディアクエリを開始するから、あなたの文書、例えば

<head> 
.... 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
... 
</head> 

詳細

ため http://www.w3schools.com/css/css_rwd_viewport.aspを参照してください。
関連する問題

 関連する問題