HTML+CSS：移动端分辨率、视口、Flex布局、文字溢出显示省略号、溢出两行显示省略号

一、分辨率分类

• 物理分辨率是生产屏幕时就固定的，它是不可被改变的
• 逻辑分辨率是由软件（驱动）决定的

制作网页参考物理分辨率还是逻辑分辨率？

• 逻辑分辨率

移动端主流设备分辨率

二、视口

使用meta标签设置视口宽度，制作适配不同设备宽度的网页

思考：默认情况下，网页的宽度和逻辑分辨率相同吗？

• 不同，默认网页宽度是980px。
  

解决办法：添加视口标签。

视口：显示HTML网页的区域，用来约束HTML尺寸

• viewport：视口
• width=device-width：视口宽度=设备宽度
• initial-scale=1.0：缩放1倍（不缩放）
  

三、Flex布局

Flex布局/弹性布局：

• 是一种浏览器提倡的布局模型
• 布局网页更简单、灵活
• 避免浮动脱标的问题

作用

• 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生。
• Flex布局非常适合结构化布局

设置方式

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

组成部分

• 弹性容器
• 弹性盒子
• 主轴 使用 justify-content 调节元素在主轴的对齐方式
• 侧轴 / 交叉轴
  
  思考：网页中，盒子之间有距离吗？
  答：有。
• 在Flex布局模型中，调节主轴或侧轴的对齐方式来设置盒子之间的间距。

3.1 justify-content 主轴对齐方式

修改主轴对齐方式属性: justify-content

justify-content: flex-end;

justify-content: flex-start;

3.2 align-items 侧轴的对齐方式

• align-items（添加到弹性容器）
• align-self：控制某个弹性盒子在侧轴的对齐方式（添加到弹性盒子）
  
  

3.3 伸缩比 flex:value;

• flex : 值;
• 取值分类
  数值(整数)

注意: 只占用父盒子剩余尺寸

3.4 flex-direction 改变元素排列方向

使用flex-direction改变元素排列方向

• 思考：Flex布局模型中，弹性盒子默认沿着哪个方向排列？
  答：水平方向。
• 思考：如何实现内容垂直排列？
  主轴默认是水平方向, 侧轴默认是垂直方向
  修改主轴方向属性: flex-direction

3.5 flex-wrap 弹性盒子换行

思考：默认情况下，多个弹性盒子如何显示？

• 弹性盒子换行显示: flex-wrap: wrap;
• 调整行对齐方式：align-content
  取值与justify-content基本相同

3.6 文字溢出显示省略号text-overflow: ellipsis

一行文字溢出显示省略号

.orders .goods .txt {
    flex: 1;
    /* 溢出的时候显示省略号 */
    /* 因为弹性盒子的尺寸可以被内容撑开, 不换行的文字可以撑开这个盒子的尺寸 */
    width: 0;
}
.orders .goods .txt h5 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
1
2
3
4
5
6
7
8
9
10
11

两行文字溢出显示省略号

  .ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
1
2
3
4
5
6
7