分辨率

类型

• 物理分辨率

• 逻辑分辨率

  • 可以在设备中更改

  • （按照这个分辨率来制作移动端）

  • 谷歌浏览器调试用的像素也是逻辑

主要熟悉的型号

视口标签

起源：

开发移动端网页宽度是980不变，不管手机换成什么尺寸，html的宽度不会改变

解决：

添加meta标签，使得网页宽=设备宽度（自生成），只需检查即可

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

width=device-width ---- 设备的宽度和视口(页面)宽度相等 ? initial-scale=1.0 ---- 表示现在写多少像素，在页面之中就展示多少像素，不缩放

小米增加的属性：minimum-scale=1,maximum-scale=1 禁止页面缩放，破坏页面布局

二倍图

• 常用二倍，为了避免图片模糊失真

• 设计稿在pxcook的使用

开发移动端时，调整设计图倍数

布局

百分比布局（流式布局）

特点：宽高固定，已经属于古老方案

★Flex布局

又称弹性布局

• 特点：

  • 浏览器提供的布局模型，专门为了布局研发

  • 精准控制块级盒子，避免浮动布局脱标现象的发生，无需清除浮动

  • 不兼容低版本的

• 组成部分

  • 弹性容器：最近一级父元素

  • 弹性盒子：最近一级子元素

  • 主轴

  • 侧轴

• 语法以及影响

  • display：flex（给弹性容器即子元素最近一级父元素添加）

  • 设置了flex的父元素的默认宽度与body同款宽，默认高度由内容撑开

  • 设置了flex的子元素的默认宽度由内容撑开，默认高度是拉伸，拉伸至和父元素同高

  • 设置了flex的盒子不再有块级、行内等元素之分，统一可以设置宽高

  • 设置了flex的盒子默认一行显示

• 配备属性（同样加给弹性盒子）

  • ★ 改变主轴对齐方式 justify-content

    • 主轴居中对齐 justify-content: center;

    • 空白空间环绕在弹性盒子中间justify-content: space-between;

    • 主轴对齐,盒子两侧距离相等justify-content: space-evenly;

    • 空白空间环绕在弹性盒子两侧 justify-content: space-around;

      盒子中间1，最左最右盒子距离父盒子的中间1/2

  • ★ 侧轴对齐方式 align-items

    • 垂直居中align-items: center;

    • 拉伸 align-items: stretch;

    • 盒子无高度时才能看出拉伸

    • 拉伸时默认值，只有子元素设定高度的时候才不会拉伸

  • 单独控制某个盒子侧轴对齐方式 align-self: center;

    • 设置给弹性盒子

• 使用手册

  • caniuse.com查询是否支持（一般除了国企银行等要求IE浏览器，其他电商站都兼容

  • 给谁加：父元素添加，子元素自动被挤压或者拉伸

  • 如果子盒子没有加高度，默认时拉伸状态（弹性，与父级同高）；如果子盒子有侧轴对齐方式，则高度与内容同高

伸缩比

• 语法：flex: n;

• 特点

  • 给弹性盒子添加

  • 所有弹性盒子都添加flex，均分弹性容器的宽度

  • 其他盒子宽度固定，只有一个盒子设置了flex：1（占据父元素剩余的宽度）

总结

• 属性放置位置

• 配合使用

使用df后是否还能使用定位？

可以，除了浮动其他都可

.son {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        }

小兔鲜案例准备工作

文件夹的建立

新增lib文件夹，适用于一些从外部引入的文件

代码部分

• 给了body内边距，内容挤到中间，无需添加宽度

body{
    padding: 12px 11px 0;
    background-color: #F7F7F8;
}

.info{
    height: 85px;
}

• 溢出n行省略号显示

  .twolines{
      text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  ?
    /* 设置溢出行数 */
    -webkit-line-clamp: 2;
    
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  footer .add{
      /* 清除换行导致的空格 设置fz0*/
      font-size: 0;
  }
  ?

• 预留底部空间，避免到底覆盖

  • 同样的，如果顶部有固定的导航栏，一样可以设置padding顶下去

  body{
      padding: 12px 11px 79px;
      
  }

   

•