web移动端

视口

1. 视口标签

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

2. 二倍图

实际大小 / 2

3. 流式布局:使用百分比%布局即可。(一般用于移动端，PC端不建议使用)

弹性布局

• 作用

基于flex精确灵活控制块级盒子的布局方式，避免 浮动布局中脱离文档流现象发生

• 设置方法

父元素添加 display:flex ，子元素可以自动的挤压或者拉伸

主轴的对齐方式justify-content

侧轴的对齐方式 align-items

• align-items (添加到父元素)

  align--self 控制某个盒子在侧轴的对齐方式(添加到子元素自身)

使用stretch拉伸需要把子元素高度去掉

• 伸缩比

• flex:值;

  取值:整数;

  圣杯布局:两边固定，中间自适应

  flex:1;
  
  

改变主轴排列方向:flex-direction

改变容器换行

• 弹性盒子换行显示 : flex-wrap: wrap;

• 弹性盒子默认不换行，如要换行则使用以上属性

• 调整行对齐方式 ：align-content

• 取值与justify-content基本相同

rem适配

能够使用rem单位设置网页元素的尺寸

• rem单位

• 相对单位

  rem单位是相对于html标签的字号计算结果

  1rem = 1html字号大小(chrome默认font-size:16px),则1rem = 16px

  查看设计稿宽度 => 确定参考设备宽度 => 确定基准根字号(1/10)

  rem单位的尺寸 = px单位数值 / 基准根字号

  可使用flexible.js手淘开发出的一个用来适配移动端的js框架

  /*rem可配合媒体查询使用
   如iphone6/7/8宽度为375
    用rem则375 / 10 = 37.5rem
  */
  html{
    
    font-size:16px
  }
  body{
    width:18.75rem;
    /*300px则等于html px单位值 / 默认字体
      300 / 16 == 18.75rem
    */
  }
  /*宽度等于375px，则html字体为41.4px*/
  @media(width:375px){
    html{
       font-size:41.4px;
    }
  }
  

• 媒体查询

• 可配合最小宽度跟最大宽度使用

  最小宽度min-width

  最大宽度max-width

@media (min-width:900px) and (max-width:1200px) {
  html{
     font-size:20px;
  }
    }
 /*最小宽度900px,最大宽度1200px
   当宽度大于900px并且小于1200px
  则html字体为20px
*/

视口单位vw/vh

• vw单位则是视口宽度

  1vw = 1/100 视口宽度、或者说是(1%)

  vh单位则是视口高度

  1vh = 1/100 视口高度、或者说是(1%)

  新出的单位：(取值也是1%)

  vmin单位则是最小值

  vmax单位则是最大值

  ps：vw跟vh不建议一起使用

/*vw、vh案例*/
/*例如浏览器窗口宽度1400，窗口高度500*/
width:50vw;
height:50vw;
/*取宽度值，则宽高都为700*/
width:50vh;
height:50vh;
/*取高度值，则宽高为250*/

/*vmin、vmax案例*/
/*例如此时手机是竖屏:宽为414,高为500*/
width:50vmax;
height:50vmax;
/*则宽高都取最大值，宽高则都为250*/
width:50vmin;
height:50vmin;
/*则框高取最小值，宽高则都为207*/