浅谈CSS3中的媒体查询_media

6

浅谈CSS3中的媒体查询_media 媒体查询让前端中一个页面同时实现手机,平板,电脑变为可能,特别的方便和好用,常用的封装过的响应式框架有bootstrap等,其中的栅格系统都是…

浅谈CSS3中的媒体查询_media

媒体查询让前端中一个页面同时实现手机,平板,电脑变为可能,特别的方便和好用,常用的封装过的响应式框架有bootstrap等,其中的栅格系统都是使用媒体查询来做的,今天我们就来聊一聊媒体查询

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!doctype html>
<html>
   <head>
      <meta  charset="utf-8"/>
      <meta name="viewport"  content="width=device-width,initial-scale=1,user-scalable=no"/>
      <title>animation</title>
   </head>
   <style type="text/css">
     *{margin:0;padding:0;list-style:none;text-decoration: none;}
     @media (min-width:1200px){
       div{width:500px;height: 500px;background:red;}
     }
     @media (min-width:980px) and (max-width:1200px){
       div{width:500px;height: 500px;background:blue;}
     }
     @media (min-width:768px) and (max-width:980px){
       div{width:500px;height: 500px;background:green;}
     }
     @media (max-width:768px){
       div{width:500px;height: 500px;background:yellow;}
     }
   </style>
   <body>
   <div></div>
   </body>
</html>

浏览效果请猛戳此处:media

作者: huanggr

为您推荐

7

发表评论

电子邮件地址不会被公开。 必填项已用*标注