Archived Version

Appearance

css ​

页面该怎么设计 ​

我觉得将一个 div 作为一个滚动容器是一种不错的设计方式。这样子的话，你想实现内容超出屏幕滚动效果，就加一个 css overflow-y-scroll。并且你还可以监听滚动事件，以完成缓存页面高度的目的。

vue
<template>
  <div ref="PageContainer" class="w-full h-screen overflow-y-scroll" @scroll="onHomePageScroll">
  </div>
</template>
<script>
  onActivated(() => {
    console.log('dfasdf', pageScrollH)
    //
    if (pageScrollH) {
      PageContainer.value!.scrollTo({top: pageScrollH})
    }
  })

  const PageContainer = ref<HTMLElement>()

  let pageScrollH = 0
  function onHomePageScroll(e: UIEvent) {
    pageScrollH = e.target!.scrollTop
    console.log(pageScrollH)
  }
</script>

设置图片内容的显示方式 ​

css
img {
  /* 图片按比例缩放并覆盖整个容器 */
  object-fit: cover;
  /* 图片在容器中居中显示 */
  object-fit: center;
}

请求后端接口修改前端页面 css 样式 ​

js
function createStyle(css) {
  const styleElement = document.createElement('style');
  styleElement.type = 'text/css';
  styleElement.innerHTML = css;
  document.head.appendChild(styleElement)
}

http.post('getConfig').then((res) => {
  createStyle(res.styleHotfix);
});

如何解决 css 属性 mask-image 的兼容性问题 ​

利用 postcss？还是多写一个 -webkit-mask-image？

css
.box-linear-bg {
  /* https://juejin.cn/post/7220327699385614391 */
  mask-image: linear-gradient(#000, transparent);
  /* 兼容问题 */
  -webkit-mask-image: linear-gradient(#000, transparent);
}

蒙版的使用 ​

如何设置一个 div 的渐变色 ​

https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

css
/* 从右下到左上、从蓝色渐变到红色 */
background: linear-gradient(to left top, blue, red);

标题悬浮在顶部 ​

使用 css position: sticky;。

ios 输入框取消后底部留白 ​

html
<input
  v-modk
  @blur="onBlur"
/>
js
function onBlur() {
  window.scroll(0, 0)
}

ios 输入框 placeholder 垂直不居中 ​

设置 css 的 line-height 为 normal

css 实现文本省略号 ​

css
.cus-ellipsis-l {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical
}
.cus-multi-ellipsis--l2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical
}

.cus-multi-ellipsis--l3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical
}

利用阴影实现边框 ​

css
/* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
/* 可以用逗号隔开，使用多组阴影 */
box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff;

css 实现六边形 ​

x 轴方向从左到右 →；

y 轴方向从上到下 ↓；

坐标轴原点在左上角最顶点。

html
<div class="w-6 h-6 bg-#ed6235 hexagonal-diamond text-xs flex items-center justify-center text-white">A</div>
css
.hexagonal-diamond {
  clip-path: polygon(50% 0, 90% 20%, 90% 80%, 50% 100%, 10% 80%, 10% 20%, 50% 0);
}

input 输入框中的文字垂直居中问题 ​

在某些机型上，输入数字或字母，不会导致 input 框的内容往下降一点点。但输入汉字，会导致内容往下降一点点，看起来和其他文件在一条水平线上就不对齐了。

下面这段 html，在最新浏览器里是水平对齐的。但是在某些老机型上，水平是不对齐的。

html
  <div class="flex w-[319px] h-[50px] items-center bg-[#f5f6fa] rounded-[8px] mt-[10px]">
    <span class="flex-none text-[14px] font-[400] w-[30%] h-[25px] flex items-center justify-center leading-8">联系方式</span>
    <div class="flex-auto h-[25px] leading-[0px] bg-cyan-500">
      <input 
        class="w-[85%] border-none h-[25px] outline-none bg-[#f5f6fa] bg-red-500 m-0 placeholder-[#C3C6CB]
         text-[14px] placeholder:text-[14px] placeholder:font-[400]
        box-border"
        placeholder="请输入您的手机号码"
        type="tel"
      />
    </div>
  </div>

所以为了避免对不齐的情况发生，可以自己写样式，或者改变设计方案使其没有对齐的 UI 设计。

align-items 和 align-content 的区别 ​

  1. align-items 属性是针对单独的每一个 flex 子项起作用，它的基本单位是每一个子项，在所有情况下都有效果（当然要看具体的属性值）。
  2. align-content 属性是将 flex 子项作为一个整体起作用，它的基本单位是子项构成的行，只在两种情况下有效果：
  3. 子项多行且 flex 容器高度固定
  4. 子项单行，flex 容器高度固定且设置了 flex-wrap:wrap;

举个例子：

源代码：

vue
<template>
  <div class="w-full h-300px bg-green-1 flex flex-wrap" :style="gStyle">
    <div v-for="i in 15" class="w-70px h-40px m-8px bg-gray"></div>
  </div>
  <button 
    class="border border-solid border-red m-10px p-10px" 
    @click="switchFlex"
  >
    绿色容器切换，当前：{{ gStyle }}
  </button>
</template>
<script setup>
import { ref } from 'vue'


const gStyle = ref('align-items: center')

let flag = true
function switchFlex() {
  if (flag) {
    flag = !flag
    gStyle.value = 'align-content: center'
  } else {
    flag = !flag
    gStyle.value = 'align-items: center'
  }
}
</script>

超出父元素区域文本变为省略号 ​

固定一个元素的宽高比 ​

使用 aspect-ratio ​

需要考虑兼容性。高版本浏览器支持，但是低版本浏览器不支持。

vue
<template>
  <div class="w-100px bg-red box"></div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
.box {
  // 宽高比。
  aspect-ratio: 1/1;
}
</style>

使用 padding-top ​

padding-top 的值为百分比的时候，是基于该元素的父元素的宽度来计算的。

vue
<template>
  <div class="w-100px">
    <div class="box bg-blue w-full pt-full"></div>
  </div>
</template>
<script setup>

</script>
<style lang="scss" scoped>
</style>

使用 postcss 让 aspect-ratio 属性兼容低版本浏览器 ​

如果你在电脑上用搜狗浏览器浏览网页，会发现使用 aspect-ratio 属性不生效。为无效属性。

下载 postcss-aspect-ratio-polyfill 插件：

shell
pnpm i postcss-aspect-ratio-polyfill -D

创建 postcss.config.js 文件，然后进行配置：

js
module.exports = {
  map: false,
  plugins: [
    require('postcss-aspect-ratio-polyfill')
  ]
}

使用 postcss-preset-env ​

下载

shell
pnpm add postcss-preset-env -D

配置 postcss.config.js

js
module.exports = {
  map: false,
  plugins: {
    'postcss-preset-env': {}
  }
}

postcss-preset-env 插件包含了 postcss-autoprefixer，所以不需要再额外下载。

但 postcss-preset-env 也有局限性，比如不能为 aspect-ratio 提供 polyfill，

原因可以看看这个 issue：https://github.com/csstools/postcss-preset-env/issues/187

常见 css 需求 ​

倒三角 ​

左右箭头 ​

实现很细的分割线 ​

可以用 ::after、::before 伪元素实现。

css
&::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background-color: #E9E9E9;
  transform: scaleY(.5);
}

修改输入框 placeholder 颜色 ​

css
  input::placeholder {
    color: green;
  }

Released under the MIT License.

Copyright © 2021-present