前端开发CSS技巧

332 阅读3分钟

这是我参与更文挑战的第16天,活动详情查看:更文挑战

1、使用相对单位

通常我们在项目开发中,使用px作为尺寸的单位,而不是使用相对单位,如:rem、em等。在物联网时代,最好的方式是相对单位rem、vh、vw等现代 CSS 布局(如 flexbox 和 grid)方式,最大限度的支持各种终端设备。 绝对单位

**px **:是一个绝对单位,主要是因为它是固定的,不会根据任何其他元素的测量而改变。 相对单位

rem(font size of the root element):相对于根 ( ) 元素 (默认字体大小通常为 16px ) em(font size of the element):相对于父元素 % :相对于父元素 **vw:**基于视窗的宽度计算,1vw 等于视窗宽度的百分之一 **vh:**基于视窗的高度计算,1vh 等于视窗高度的百分之一 **vmin:**基于vw和vh中的最小值来计算,1vmin 等于最小值的百分之一 **vmax:**基于vw和vh中的最大值来计算,1vmax 等于最大值的百分之一

upx: uni-app 使用 upx 作为默认尺寸单位, upx 是相对于基准宽度的单位,可以根据屏幕宽度进行自适应。

uni-app 规定屏幕基准宽度750upx。设计稿 1px 与框架样式 1upx 转换公式如下:设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx.若设计稿宽度为 375px,元素 B 在设计稿上的宽度为 200px,那么元素 B 在 uni-app 里面的宽度应该设为:750 * 200 / 375,结果为:400upx。

rpx: rpx单位是微信小程序中css的尺寸单位,rpx可以根据屏幕宽度进行自适应。

规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px

/* 不优秀 */
.wrap {
    font-size: 14px;
    margin: 10px;
    line-height: 24px;
}
/* 优秀 */
.wrap {
    font-size: 1.2rem;
    margin: 0.5rem;
    line-height: 1.6em;
}

2、代码复用

很多开发人员在谈到CSS时都觉得代码重复性很高,在项目开发中这不是一个好的做法。

好在现在有CSS预处理器(sass/scss、less、stylus、Turbine),能够让我们可以更好的规划CSS代码,提高其复用性。

当然需要提高代码复用,还是需要一定的CSS的基础,来设计好代码结构,如下

/* 不优秀 */
.container {
    background-color: #efefef;
    border-radius: 0.5rem;
}

.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}

/* 优秀 */
.container,
.sidebar {
    background-color: #efefef;
    border-radius: 0.5rem;
}

4、不使用颜色名称

不要使用red、blue等颜色名称,相反,建议使用颜色的十六进制值。

为什么呢?因为当使用像 red 这样的颜色名称时,在不同的浏览器或者设备中显示会有所不同。

/* 不优秀 */
.container {
    background-color: red;
}

/* 优秀 */
.container {
    background-color: #ff0000;
}

5、垂直居中

垂直居中是一个很常见的需求,有很多实现方式,在伸缩容器内的任何东西垂直居中:

.flex-vertically-center {
    display: flex;
    align-items: center;
}

6、水平居中

.flex-vertically-center {
    display: flex;
    justify-content: center;
}

7、 小技巧

  • 不要改变高度和宽度属性,而是使用transform:scale()。
  • 要移动元素,避免改变top、right、bottom或left属性,而使用transform: translate()。
  • 如果你想模糊背景,可以考虑使用模糊的图像并改变其不透明度。