响应式设计

Posted BarneyWhite

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式设计相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于响应式设计的主要内容,如果未能解决你的问题,请参考以下文章

html 将以编程方式附加外部脚本文件的javascript代码片段,并按顺序排列。用于响应式网站,其中ma

Vue3官网-高级指南(十七)响应式计算`computed`和侦听`watchEffect`(onTrackonTriggeronInvalidate副作用的刷新时机`watch` pre)(代码片段

css H1,2,3响应式CSS片段

理解响应式编程

响应式编程的实践

响应式设计的优点