css---媒体查询

简单示例:

<style type="text/css">
/* 小于 300的时候 */
@media screen and (max-width: 400px){
    body{background:red;}
}
/* 大于 300的时候 */
@media screen and (min-width: 500px){
    body{background:orange;}
}
@media screen and (min-width:700px) and (max-width:900px){
  body {background:yellow;}
}
@media screen and (min-width: 800px){
    body{background:green;}
}
</style>

标签示例:

<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" /> 

猜你喜欢

转载自www.cnblogs.com/e0yu/p/9088546.html
今日推荐