vw的含义和使用

vw

vw就是视口的宽度，vw 是个相对单位。

不管在什么屏幕下， 我们把屏幕分为平均的 100等份。

1vw = 1 / 100 屏幕的宽度

1vw 和 1%

width: 1vw;

width: 1%;

vw 和 1% 有没有区别：

1. vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px

2. 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px

 

px 如何转为vw

我们设计稿是 iphone 678 是 375px， vw 把屏幕划分了100等份， 则 1vw = 3.75 px

width: (68 / 3.75vw);
height: (29 / 3.75vw);

 

tabs 布局分析

里面需要放一个 tabs-list 盒子 这个盒子放 a

拖动的时候，拖动的是 tabs-list

里面有很多小链接， 不允许换行。

给 tabs-list 添加 display: flex; 因为 加了弹性容器 ，里面所有的弹性盒子都会沿着主轴一行显示，不会换行。

文字不允许换行

white-space: nowrap;

 一般配vw和vh:

<!-- 宽度和高度分成了100等份 -->

<!-- vw和vh一般不一起使用,不然做出来的盒子是长方形 -->

.box {
            width: 100vw;
            height: 10vw;
            background-color: aqua;
            overflow: hidden;
            /* 文本溢出换成省略号 */
            text-overflow: ellipsis;
            /* 弹性盒子 */
            display: -webkit-box;
            /* 溢出到第几行 */
            -webkit-line-clamp: 3;
            /* 从上到下垂直排列子元素 */
            -webkit-box-orient: vertical;
        }

 

.ellipsis-2 {

  // 溢出隐藏

  overflow: hidden;

  // 文本溢出换成省略号

  text-overflow: ellipsis;

  // 弹性盒子

  display: -webkit-box;

  // 溢出到第几行

  -webkit-line-clamp: 2;

  // 从上到下垂直排列子元素

  -webkit-box-orient: vertical;

}

用这个将多出的文字转变为...