CSS-媒体查询

2017-09-10 本文已影响36人三点水滴

移动设备的屏幕分辨率千差万别，为了获得更好的用户体验，需要根据不同的分辨率去呈现不同的界面。媒体查询就是目前的解决方案。

@media screen and (min-width: 640px) {
    .container{
        padding:10px;
    }
}

<link rel="stylesheet" href="test.css" media="min-width:640px" />

在这种情况下，test.css始终都会被引入，但是其中的规则是否生效，则取决于媒体查询条件。