CSS3 響應(yīng)適布局 @media用法，不明白為什么出來的效果特別的大

<style>
.news{

width: 64.0rem;
padding: 0 2.0rem;
overflow: hidden;

}
.news li{

width: 60.0rem;
float: left;
padding-bottom: 2.0rem;
margin-bottom: 2.0rem;
border-bottom: dashed 1px #e3e3e3;

}
.news li i{

float: left;
width: 17.2rem;
height: 13.0rem;
overflow: hidden;

}
.news li i img{width: 100%;}
.news li aside{

float: right;
width: 40.8rem;

}
.news li aside .p1{

font-size: 2.4rem;
color: #333;
padding: 1.0rem 0 1.0rem;
display: block;

}
.news li aside .p1:hover{color: #037bc9;}
.news li aside .p2{

height: 8.5rem;
line-height: 4.2rem;
color: #707274;
overflow: hidden;

}
.news_list_show{}
.news_list_show,
.news_list_show p{

line-height: 4.2rem;

}
.news_list_show img{

max-width: 100%;
display: block;
margin: auto;

}
</style>
<ul class="news">

<li>
    <i><img src="images/pic_48.jpg" /></i>
    <aside>
        <a class="p1" href="">【重磅消息】藝考界最新消息...</a>
        <p class="p2">有許多小伙伴此時此刻正在焦頭爛額地學(xué)習(xí)著文化課，準(zhǔn)備應(yīng)對十一月份的選考，可能在很多高中小伙伴心里...</p>
    </aside>
</li>
<li>
    <i><img src="images/pic_49.jpg" /></i>
    <aside>
        <a class="p1" href="">【重磅消息】藝考界最新消息...</a>
        <p class="p2">有許多小伙伴此時此刻正在焦頭爛額地學(xué)習(xí)著文化課，準(zhǔn)備應(yīng)對十一月份的選考，可能在很多高中小伙伴心里...</p>
    </aside>
</li>

</ul>
<script>
(function(doc, win){

var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function(){
        var clientWidth = docEl.clientWidth;
        if(!clientWidth){
            return false;
        }
        //移動端縮放比例關(guān)系
        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
    };
if(!doc.addEventListener){
    return false;
}

//監(jiān)聽瀏覽器窗口大小
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window);
</script>