CSS画三角形

flex-direction: column

方式三通过定位和变形来实现

给父元素添加 position: relative;相对定位。

给自身元素添加position: absolute;绝对定位。

top: 50%;使自身元素距离上方“父元素的50%高度”的高度。

left: 50%;使自身元素距离上方“父元素的50%宽度”的宽度。

transform: translate(-50%,-50%);使自身元素再往左，往上平移自身元素的50%宽度和高度。

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

方式四这个是实现内容文本居中的，坑死了，之前没留意在一个全局的文件加了，后面很多组件里面的内容都居中了，还

一时没发现，虽然想到会不会是全局文件的问题，但一下子眼拙没看到，结果捣鼓半天

body{ text-align:center}

CSS画三角形

CSS画三角形的实现方式

实现1px效果

1. 伪元素+缩放
2. 动态viewport+rem(flex)
3. vw单位适配(未来推荐)

伪元素+缩放

设计稿中的1px，代码要实现0.5px

缩放避免直接写小数像素带来的不同手机的兼容性处理不同

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

/*伪元素实现0.5px border*/

.border::after {

content: "";

/*为了与原元素等大*/

box-sizing: border-box;

position: absolute;

left: 0;

top: 0;

width: 200%;

height: 200%;

border: 1px solid red;

transform: scale(0.5);

transform-origin: 0 0;

}

/*实现0.5px 细线*/

.line::after {

content: '';

position: absolute;

top: 0;

left: 0;

width: 200%;

height: 1px;

transform: scale(0.5);

/*更改元素变形的原点*/

transform-origin: 0 0;

}

/*dpr适配，当前显示设备的物理像素分辨率与CSS 像素分辨率之比为2*/

@media (-webkit-min-device-pixel-ratio: 2) {

.line::after {

height: 1px;

transform: scale(0.5);

transform-origin: 0 0;

}

}

@media (-webkit-min-device-pixel-ratio: 3) {

.line::after {

height: 1px;

transform: scale(0.333);

transform-origin: 0 0;

}

}

</style>

</head>

<div class="line"></div>

</div>

</body>

</html>

动态viewport+rem

不仅可解决移动端适配，也解决1px的问题

三种viewport中我们常用的layout viewport(浏览器默认)，宽度大于浏览器可视区域宽度，因此会出现横向滚动条

const clientWidth = document.documentElement.clientWidth || document.body.clientWidth

设置meta标签属性避免横向滚动条

< meta name = "viewport"

content = "

width=device-width,// viewport宽等于屏幕宽 initial-scale=1.0,// 初始缩放为1

maximum-scale=1.0, user-scalable=no,// 不允许手动缩放

viewport-fit=cover // 缩放以填充满屏幕 "

>

flexible的原理——已弃用！

1. 根据dpr动态修改initial-scale
2. 动态修改viewport大小，以此统一使用rem布局，viewport动态影响font-size，实现适配

总结

移动端适配主要分为两方面

1. 适配不同机型的屏幕尺寸
2. 对细节像素的处理。如果直接写 1px，由于 dpr 的存导致渲染偏粗。使用rem 布局计算出对应小数值，有兼

容性问题。老项目整体修改 viewport 成本过高，采用第一种实现方案处理；新项目可动态设置 viewport，一键解决适配问题

移动端对 1px 的渲染适配实现起来配置简单、代码简短，能够快速上手