【万能CSS】 N 宫格自适应布局、0.5像素的线等

宫格布局第一种：
.template-list {

            width: 100%;
            border-radius: 4px;
            height: 202px;
         
            display: grid;
            grid-template-columns: repeat(4, 94px);
            gap: 8px;
            overflow-y: scroll;
            overflow-x: hidden;
        }

宫格布局第二种：
.content {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    width: 93.4%;
    margin:0 auto;
    height: 520px;
    overflow-y: auto;
  }

.one {
    flex: 0 0 32.74%;
    height: 174px;
    margin-top: 8px;
    margin-right: 0.8%;
}

.one:nth-child(3n) {
    margin-right: 0;
  }

 

0.5像素的线

.divider {
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: top;
  margin-bottom: -0.5px;
  background-color: gray;
}

 

transform 设置后z-index 失效

非transform 等 元素 设置z-index:auto 取消创建上下文

创建上下文：

• 根元素(HTML)
• 设置了position为absolute或relative，且z-index不是auto的元素
• 设置了z-index，且不为auto的流动元素
• 设置了opacity，且不为1的元素
• 设置了transform，且不为none的元素
• 设置了mix-blend-mode值，且不为normal的元素
• 设置了isolation 为 isolate的元素on mobile WebKit and Chrome 22+,
• 设置position为fixed的元素

transform 元素

  解决方案

1. 避免使用transform属性，改为使用margin-left:(-width/2)属性来实现元素居中；

2. 给使用transform元素的父级增加transform-style: preserve-3d;

3. 给使用了transform元素显示的设置perspective()

4. 元素里再创建一个标签，应用新标签的before伪类，设置定位，以原来的元素为基准，top、bottom、right、left为0，以充满整个容器。注意，z-index的设置与原来元素的before、after中的z-index有关，必须比它的值大。

5. 使用pointer-events属性做穿透处理。

 

transform可以通过它的translateZ() 来改变元素的层叠顺序，其值越大，越在顶层，离屏幕越近。不过通过transform:translateZ() 改变元素z轴的层级，

必须在元素的父元素中显示的设置transform-style:preserver-3d 或者在transform中显示的设置perspective() 

 

css 新属性：aspect-ratio

媒体和布局容器中维护适当的长宽比

// padding-top
.container {
  width: 100%;
  padding-top: 56.25%;
}

// aspect-ratio
.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

推荐：https://zhuanlan.zhihu.com/p/348596969

 

height和width 设置0 的妙用

适用：页面mounted时候使用js 动态计算 设置dom 的宽高之前，为避免影响了页面布局，提前设置元素的样式width 或者height 0

页面其他元素设置了高度100% 等 100%取的是js设置dom前 元素的原先宽高

 

容器查询：利用它快速构建在容器不同宽度下的不同表现

<div class="wrap">
    <div class="g-container">
        <div class="child">Title</div>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus vel eligendi, esse illum similique sint!!</p>
    </div>
</div>

.wrap {
    width: 500px;
    resize: horizontal;
    overflow: auto;
}
.g-container {
    display: flex;
    flex-wrap: nowrap;
}
.wrap {
    /* CSS CONTAINER */
    container-name: wrap;
    container-type: inline-size;
}
@container wrap (max-width: 400px) {
    .g-container {
        flex-wrap: wrap;
        flex-direction: column;
    }
}

在 .warp 的样式中，通过 container-name: wrap 注册一个容器
注册完容器之后，便可以通过 @container wrap () 容器查询语法，在内部写入不同情况下的另外一套样式
这里 @container wrap (max-width: 400px) {} 的意思便是，当 .wrap 容器的宽度小于 400 px 时，采用内部定义的样式，否则，使用外部默认的样式

 

 
@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
  (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
  (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
  :root {
    font-size: 14px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
  (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
  (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
  :root {
    font-size: 13px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
  (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
  (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
  :root {
    font-size: 12px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
  (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
  (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
  :root {
    font-size: 10px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
  (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
  (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
  :root {
    font-size: 9px;
  }
}
@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
  (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
  (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
  :root {
    font-size: 8px;
  }
}