媒体查询，固定定位，flex属性

媒体查询

PC优先

@media screen and (min-width: 750px) {
      html {
        font-size: 16px;
      }
    }
    @media screen and (min-width: 375px) and (max-width: 749px) {
      html {
        font-size: 14px;
      }
    }
    @media screen and (max-width: 374px) {
      html {
        font-size: 12px;
      }
    }

固定定位

登录页面

<form action="" class="modal-form">
        <fieldset>
          <legend>用户登录</legend>
          <input type="email" name="emil" placeholder="username@email.com" />
          <input type="password" name="password" placeholder="******" />
          <button>登录</button>
        </fieldset>
      </form>

固定位置

 .modal .modal-form {
        position: fixed;
        top: 10em;
        left: 20em;
        right: 20em;
      }

flex 属性

1.flex-flow:主轴方向,不换行/换行

 flex-flow: row nowrap; 
 flex-flow: row wrap;

2.place-content:项目在主轴上的排列与空间分配

 place-content: start; 
 place-content: end; 
 place-content: center; 
 place-content: space-between; 
 place-content: space-around; 
 place-content: space-evenly;

3.place-item:项目在交叉轴上的对齐方式

place-items: stretch; 
place-items: start; 
place-items: end; 
place-items: center;

4.flex:放大因子收缩因子计算宽度

flex:auto;
flex:1 1 auto;
flex:0 1 auto;
flex:0 0 auto;

5.order越小越靠前

媒体查询

固定定位

flex 属性

更多相关文章

随机推荐