六个案例学会响应式布局

Caelyn233
248 阅读5分钟

媒体查询

属性名称作用
width、height浏览器可视宽度、高度
device-width设备屏幕的宽度
device-height设备屏幕的高度
  • 通过调整窗口的大小可以变化浏览器可视的宽度和高度
<div></div>

div {
    width: 200px;
    height: 200px;
}

@media screen and (min-width: 500px) and (max-width:700px) {
    div{
        background-color: red;
    }
}


@media screen and (min-width: 701px) {
    div{
        background-color: green;
    }
}
  • 切换设备仿真可以调整设备屏幕的大小
<div id="div0">
  <div></div>
  <div></div>
  <div></div>
</div>

#div0 {
    width: 100%;
    height: 500px;
}
#div0 div{
    float: left;
    height: 100px;
}
/* 1行3个div */
@media screen and (min-device-width: 701px){
 #div0 div{
    width: 33.3%;
    }
    #div0 div:nth-child(1){
        background-color: red;
    }
    #div0 div:nth-child(2){
        background-color: green;
    }
    #div0 div:nth-child(3){
        background-color: yellow;
    }

}
/* 2行3个div */

@media screen and (min-device-width: 401px) and (max-device-width:700px) {
    #div0 div{
        width: 50%;
    }
    #div0 div:nth-child(1){
        background-color: red;
    }
    #div0 div:nth-child(2){
        background-color: green;
    }
    #div0 div:nth-child(3){
        background-color: yellow;
    }
}
/* 3行3个div */

@media screen and (min-device-width: 200px) and (max-device-width:400px) {
    #div0 div{
        width: 100%;
        
    }
    #div0 div:nth-child(1){
        background-color: red;
    }
    #div0 div:nth-child(2){
        background-color: green;
    }
    #div0 div:nth-child(3){
        background-color: yellow;
    }
}

flex布局

  • flex-direction
属性值作用
row默认值，按从左到右的顺序显示
row-reverse与row相同，但是以相反的顺序
column-reverse垂直显示，按从上到下的顺序
column-reverse与column相同，但是以相反的顺序
<div id="div0">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


#div0{
    width: 500px;
    background-color:pink;
    display: flex;
    flex-direction: row;
}
#div0 div{
    width: 25%;
    height: 100px;
    background-color: yellow;
}
  • flex-wrap
属性值作用
nowarp默认值，不换行或不换列
wrap换行或环列
wrap-reverse换行或换列，但以相反的顺序
<div id="div0">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

#div0{
    width: 300px;
    background-color:pink;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    /* 换行 */
}
#div0 div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • flex-flow

作用：flex-direction和flex-wrap属性的简写形式

#div0{
    width: 300px;
    background-color:pink;
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row wrap;;
}
#div0 div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • justify-content

作用：用来存在剩余空间时，设置为间距的方式

属性值作用
flex-start默认值，从左到右，挨着行的开头
flex-end从右到左，挨着行的结尾
center居中显示
space-between平均分布在该行上，两边不留间隔空间
space-around平均分布在该行上，两边留有一半的间隔空间
#div0{
    width: 380px;
    background-color:pink;
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row wrap;;
    justify-content: space-around;
}
#div0 div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • align-items

作用：设置在每个flex元素在交叉轴上的默认对齐方式

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center居中显示
#div0{
    width: 400px;
    background-color:pink;
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row wrap;;
    justify-content: space-around;
    height: 400px;
    align-items: center;
}
#div0 div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • align-content

作用：设置每个flex元素在交叉轴上的默认对齐方式

属性值作用
flex-start位于容器的开头
flex-end位于容器的结尾
center位于容器的中心
space-between之间留有空白
space-around两端都留有空白
#div0{
    width: 380px;
    background-color:pink;
    display: flex;
    /* flex-direction: row;
    flex-wrap: wrap; */
    flex-flow: row wrap;;
    justify-content: space-around;
    height: 400px;
    align-content: center;
}
#div0 div{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
  • 其他属性
属性值作用
flex-basis设置弹性盒基准值
flex-grow设置弹性盒子的扩展比率
flex-shrink设置弹性盒子的缩小比率
flex以上三种属性的缩写
#div0{
    width: 400px;
    background-color:pink;
    display: flex;
    height: 500px;
}
#div0 div{
    width: 200px;
    height: 200px;
    background-color: yellow;
    /* flex-basis: 30%; */
}
/* 
400-50-100=250
250/2=125
50+125
100+125
*/
/* 
400-600=-200
-200/4==50
300-50=250
300-150=150
*/
#div0 div:nth-child(1){
    /* flex-basis: 300px; */
    /* 设置该属性后，width失效 */
    /* flex-grow: 1;
    flex-shrink: 1; */
    flex:1 1 300px
}
#div0 div:nth-child(2){
    /* flex-basis: 300px;
    flex-grow: 1;
    flex-shrink: 3; */
    flex:1 3 300px
}
  • 特殊写法
属性作用
flex:autoflex:1 1 auto
flex:noneflex:0 0 auto
flex:0%flex:1 1 0%
flex 100pxflex:1 1 100px
flex:1flex:1 1 0%
#div0{
    width: 400px;
    background-color:pink;
    display: flex;
    height: 500px;
}
#div0 div{
    width: 100px;
    height: 200px;
    background-color: yellow;
    flex:1
}

课堂案例1-输入框布局

课堂案例2-长表单布局

课堂案例3-rem的使用方法

指相对于根元素的字体大小的单位 案例：使用媒体查询+rem或js，在不同宽度的视口下自动调整字体大小

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AngularDemo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script>
      let c = () => {
        let w = document.documentElement.clientWidth; /*获取设备的宽度*/
        let n = 20 * (w / 320) > 40 ? 40 + "px" : 20 * (w / 320) + "px";
        document.documentElement.style.fontSize = n;
      };
      window.addEventListener("load", c);
      window.addEventListener("resize", c);
    </script>
    <style>
      html {
        font-size: 10px;
      }
      div {
        font-size: 1rem;
      }
    </style>
  </head>
  <body>
    <div>123</div>
    <!-- <app-root></app-root> -->
  </body>
</html>

课堂案例4-自适应布局

不同设备对应不同的html 不同的设备用不同的页面或局部伸缩 判断设备的类型或控制局部的变化

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>AngularDemo</title>
    <base href="/" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <script>
      let c = () => {
        let w = document.documentElement.clientWidth; /*获取设备的宽度*/
        let n = 20 * (w / 320) > 40 ? 40 + "px" : 20 * (w / 320) + "px";
        document.documentElement.style.fontSize = n;
      };
      window.addEventListener("load", c);
      window.addEventListener("resize", c);
    </script>
    <style>
      #div0 {
        display: flex;
      }

      #div0 div:first-child {
        background-color: yellow;
        flex: 0 0 50px;
      }
      #div0 div:nth-child(2) {
        background-color: red;
        flex: 1 1 auto;
      }
      #div0 div:nth-child(3) {
        background-color: blue;
        flex: 0 0 50px;
      }
      @media screen and (min-width: 400px) and (max-width: 700px) {
        #div0 div:nth-child(2) {
          background-color: pink;
        }
      }
      @media screen and (min-width: 701px) and (max-width: 1400px) {
        #div0 div:nth-child(2) {
          background-color: goldenrod;
        }
      }
    </style>
  </head>
  <body>
    <div id="div0">
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
    <!-- <app-root></app-root> -->
  </body>
</html>

课堂案例5-响应式布局

确保一个页面在所有终端上，都能显示出令人满意的效果 使用%或rem作为单位，此处采用%为单位

课堂案例6-rem弹性布局

为了保证在各种屏幕上的不失真，就要根据实际屏幕宽度等比例换算

avatar
文章
阅读
粉丝