码迷,mamicode.com
首页 > 其他好文 > 详细

响应式设计

时间:2018-05-01 14:07:15      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:text   像素   容器   class   pixel   样式   otto   flex   expand   

viewport

1 <meta name = "viewport" content="width = device-width,initial-scale=1.0">

响应式图片

大图随容器自动缩放,保持宽高比

1 <style>
2     img{
3         height:auto;
4         width:auto;
5         max-height:100%;
6         max-width:100%;
7     }
8 </style>

背景图片

1 background-size:cover
2 background-size:contain

保持宽高比

margin\padding的值是百分比的时候是相对父元素的width

1 <div></div>
2 <style>
3     div{
4         height:0;
5         padding-top:50%;
6         background:#f99;
7     }
8 </style>

导航栏布局

网格布局

 1 <ul class="contain">
 2   <li class="list"></li>
 3   <li class="list"></li>
 4   <li class="list"></li>
 5   <li class="list"></li>
 6   <li class="list"></li>
 7   <li class="list"></li>
 8   <li class="list"></li>
 9   <li class="list"></li>
10   <li class="list"></li>
11 </ul>

inline-block+justify:每行放下的数目固定

 1 <style>
 2 .contain{
 3   margin:0;
 4   padding:0;
 5   text-align:center;
 6   }
 7 .list{
 8   display:inline-block;
 9   width:30%; /*每行放下的数目固定*/
10   height:0;
11   padding-top:20%;
12   margin-bottom:10px;
13   background:#f99;
14 }
15 </style>

flex:宽高度固定,能放几个就放几个

 1 .contain{
 2   margin:0;
 3   padding:0;
 4   display:flex;
 5   flex-wrap:wrap;
 6   }
 7 .list{
 8   display:inline-block;
 9   width:70px;
10   height:50px;
11   margin: 0 10px 10px 0;
12   background:#f99;
13 }

media query

针对不同的屏幕,应用不同的样式。

可以查询的media

  • width height

  • device-width device-height

  • device-pixel-ratio 像素比

  • orientation

 1 <style>
 2 .contain{
 3   margin:0;
 4   padding:0;
 5   display:flex;
 6   flex-wrap:wrap;
 7   }
 8 .list{
 9   display:inline-block;
10   width:70px;
11   height:50px;
12   /* padding-top:20%; */
13   margin: 0 10px 10px 0;
14   background:#f99;
15 }
16 /*当宽度<= 1000px的时候采用这个布局*/
17 @media screen and (max-width:1000px){
18  .contain{
19   margin:0;
20   padding:0;
21   text-align:justify;
22   }
23 .list{
24   display:inline-block;
25   width:30%; 
26   height:0;
27   padding-top:20%;
28   margin-bottom:10px;
29   background:#f99;
30 }
31 </style>

 

响应式设计

标签:text   像素   容器   class   pixel   样式   otto   flex   expand   

原文地址:https://www.cnblogs.com/171220-barney/p/8976023.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!