前端技术分享
0%

发表于 分类于

媒体查询语法

1
2
3
@media media-type and (media-feature) {
  /* CSS 规则 */
}

媒体类型

  • all：所有设备
  • screen：屏幕
  • print：打印机
  • speech：语音合成器

媒体特性

宽度

1
2
3
4
5
6
7
8
9
10
11
@media (min-width: 768px) {
  /* 最小宽度 768px */
}

@media (max-width: 767px) {
  /* 最大宽度 767px */
}

@media (width: 768px) {
  /* 精确宽度 */
}

高度

1
2
3
@media (min-height: 600px) {
  /* 最小高度 */
}

方向

1
2
3
4
5
6
7
@media (orientation: landscape) {
  /* 横屏 */
}

@media (orientation: portrait) {
  /* 竖屏 */
}

像素密度

1
2
3
@media (-webkit-min-device-pixel-ratio: 2) {
  /* Retina 屏幕 */
}

逻辑运算符

and

1
2
3
@media screen and (min-width: 768px) and (max-width: 1024px) {
  /* 平板样式 */
}

or (逗号)

1
2
3
@media (min-width: 768px), (orientation: landscape) {
  /* 宽屏幕或横屏 */
}

not

1
2
3
@media not screen and (color) {
  /* 非彩色屏幕 */
}

在 HTML 中使用

1
<link rel="stylesheet" media="screen and (min-width: 768px)" href="desktop.css">

总结

媒体查询是响应式设计的核心。灵活使用各种特性，适配不同设备。

发表于 分类于

什么是响应式设计？

响应式设计让网站在不同设备上都有良好体验。

媒体查询

1
2
3
4
5
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

断点

常见断点：

  • 小屏幕：576px 以下
  • 中等屏幕：576px - 768px
  • 大屏幕：768px - 992px
  • 超大屏幕：992px 以上

流式布局

使用相对单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

弹性图片

1
2
3
4
img {
  max-width: 100%;
  height: auto;
}

Flexbox 和 Grid

响应式布局的最佳选择。

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
}

移动优先

从小屏幕开始设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 移动端样式 */
.container {
  padding: 10px;
}

/* 平板样式 */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* 桌面样式 */
@media (min-width: 1024px) {
  .container {
    padding: 30px;
  }
}

总结

响应式设计是现代 Web 开发必备。多用媒体查询和弹性布局。

发表于 分类于

BEM 是什么？

BEM (Block Element Modifier) 是 CSS 命名规范，提高可维护性。

结构

  • Block：独立组件
  • Element：块的一部分
  • Modifier：块或元素的变体

命名规则

1
.block__element--modifier

例子

1
2
3
<div class="button button--primary">
  <span class="button__text">Click me</span>
</div>
1
2
3
4
5
6
7
8
9
10
11
.button {
  /* 块样式 */
}

.button__text {
  /* 元素样式 */
}

.button--primary {
  /* 修饰符样式 */
}

原则

1. 独立性

块是独立的，可以在任何地方使用。

2. 可重用性

元素和修饰符可以组合。

3. 明确性

命名清晰表达结构和功能。

优点

  • 避免样式冲突
  • 提高可维护性
  • 团队协作友好

工具

  • BEM 预处理器插件
  • CSS Modules

总结

BEM 让 CSS 更结构化。开始可能觉得啰嗦，但长期收益大。

发表于 分类于

PostCSS 是什么？

PostCSS 是 CSS 后处理器，用 JavaScript 转换 CSS。

安装

1
npm install postcss-cli

使用

1
2
3
4
5
6
7
const postcss = require('postcss')

postcss([require('autoprefixer')])
  .process(css, { from: 'input.css', to: 'output.css' })
  .then(result => {
    console.log(result.css)
  })

常用插件

Autoprefixer

自动添加厂商前缀。

1
require('autoprefixer')

CSSNano

压缩 CSS。

1
require('cssnano')

PostCSS Preset Env

使用 CSS 新特性。

1
require('postcss-preset-env')

配置

postcss.config.js

1
2
3
4
5
6
7
8
module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default'
    })
  ]
}

package.json

1
2
3
4
5
{
  "scripts": {
    "build-css": "postcss src/styles.css -o dist/styles.css"
  }
}

自定义插件

1
2
3
4
5
6
7
8
9
10
const plugin = () => {
  return {
    postcssPlugin: 'postcss-example',
    Rule(rule) {
      // 修改规则
    }
  }
}

plugin.postcss = true

总结

PostCSS 灵活强大。结合各种插件，可以自动化 CSS 处理流程。

发表于 分类于

Less 是什么？

Less 是 CSS 预处理器，类似 Sass，但语法更接近 CSS。

安装

1
npm install -g less

变量

1
2
3
4
5
@primary-color: #007bff;

.button {
  background-color: @primary-color;
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

混合 (Mixin)

1
2
3
4
5
6
7
8
9
.border-radius(@radius) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

.box {
  .border-radius(10px);
}

函数

1
2
3
4
5
6
7
.average(@x, @y) {
  @result: ((@x + @y) / 2);
}

.div {
  width: .average(10px, 20px);
}

运算

1
2
3
4
5
6
@width: 300px;

.container {
  width: @width;
  margin: (@width / 10);
}

导入

1
2
@import "variables.less";
@import "mixins.less";

编译

1
lessc styles.less styles.css

总结

Less 语法简洁，易学。适合喜欢接近 CSS 语法的开发者。

发表于 分类于

Sass 是什么？

Sass 是 CSS 预处理器，扩展 CSS 功能。

安装

1
npm install -g sass

变量

1
2
3
4
5
$primary-color: #007bff;

.button {
  background-color: $primary-color;
}

嵌套

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav {
  ul {
    margin: 0;
    li {
      display: inline-block;
      a {
        text-decoration: none;
        &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

混合 (Mixin)

可重用代码块。

1
2
3
4
5
6
7
8
9
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

继承

1
2
3
4
5
6
7
8
9
.button {
  padding: 10px 20px;
  border: none;
}

.button-primary {
  @extend .button;
  background-color: blue;
}

函数

1
2
3
4
5
6
7
@function calculate-width($columns, $total-columns: 12) {
  @return ($columns / $total-columns) * 100%;
}

.col-6 {
  width: calculate-width(6);
}

控制指令

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@if $theme == dark {
  .body {
    background: black;
  }
} @else {
  .body {
    background: white;
  }
}

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100% / $i;
  }
}

编译

1
sass input.scss output.css

总结

Sass 让 CSS 更强大。变量、嵌套、混合让代码更可维护。

发表于 分类于

过渡 (Transition)

平滑改变属性值。

基本语法

1
2
3
.element {
  transition: property duration timing-function delay;
}

属性

  • property：要过渡的属性 (all, width, opacity 等)
  • duration：持续时间 (2s, 500ms)
  • timing-function：缓动函数 (ease, linear, ease-in-out)
  • delay：延迟时间

例子

1
2
3
4
5
6
7
8
9
10
.box {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s ease-in-out;
}

.box:hover {
  width: 200px;
}

动画 (Animation)

更复杂的动画序列。

定义动画

1
2
3
4
5
6
7
8
9
10
@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

使用动画

1
2
3
.element {
  animation: slideIn 1s ease-out;
}

属性

  • animation-name：关键帧名称
  • animation-duration：持续时间
  • animation-timing-function：缓动
  • animation-delay：延迟
  • animation-iteration-count：重复次数 (infinite)
  • animation-direction：方向 (normal, reverse, alternate)

性能优化

  • 使用 transform 和 opacity
  • 避免改变布局属性
  • 使用 will-change 属性

总结

CSS 动画简单高效。过渡适合简单变化，动画适合复杂序列。

发表于 分类于

Grid 和 Flexbox 的区别

Grid 是二维布局，Flexbox 是一维布局。

适用场景

Flexbox

  • 一维布局：行或列
  • 内容驱动：项目大小不确定
  • 空间分配

Grid

  • 二维布局：行和列
  • 设计驱动：固定网格
  • 复杂布局

语法对比

Flexbox

1
2
3
4
5
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Grid

1
2
3
4
5
6
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 100px 100px;
  gap: 10px;
}

组合使用

Grid 用于整体布局，Flexbox 用于内部对齐。

1
2
3
4
5
6
<div class="grid-container">
  <header class="flex-header">Header</header>
  <main>Main</main>
  <aside>Aside</aside>
  <footer>Footer</footer>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
.grid-container {
  display: grid;
  grid-template-areas: 
    "header header"
    "main aside"
    "footer footer";
}

.flex-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

浏览器支持

  • Flexbox：IE10+
  • Grid：IE11+ (有限支持)

总结

选择取决于布局需求。Grid 适合复杂页面，Flexbox 适合组件内部。

发表于 分类于

Flexbox 是什么？

Flexbox 是 CSS3 新增的布局模式，简化了复杂的布局设计。

基本概念

  • 容器 (Container)：设置 display: flex 的元素
  • 项目 (Item)：容器内的直接子元素
  • 主轴 (Main Axis)：默认水平
  • 交叉轴 (Cross Axis)：垂直于主轴

容器属性

flex-direction

设置主轴方向。

1
2
3
4
.container {
  display: flex;
  flex-direction: row; /* row | row-reverse | column | column-reverse */
}

justify-content

主轴对齐。

1
2
3
.container {
  justify-content: flex-start; /* flex-start | flex-end | center | space-between | space-around | space-evenly */
}

align-items

交叉轴对齐。

1
2
3
.container {
  align-items: stretch; /* stretch | flex-start | flex-end | center | baseline */
}

flex-wrap

换行。

1
2
3
.container {
  flex-wrap: nowrap; /* nowrap | wrap | wrap-reverse */
}

align-content

多行交叉轴对齐。

1
2
3
.container {
  align-content: stretch; /* stretch | flex-start | flex-end | center | space-between | space-around */
}

项目属性

flex-grow

放大比例。

1
2
3
.item {
  flex-grow: 0; /* 默认 0 */
}

flex-shrink

缩小比例。

1
2
3
.item {
  flex-shrink: 1; /* 默认 1 */
}

flex-basis

主轴空间分配前的大小。

1
2
3
.item {
  flex-basis: auto; /* auto | 长度 */
}

flex

grow、shrink、basis 的简写。

1
2
3
.item {
  flex: 1 1 auto; /* flex-grow flex-shrink flex-basis */
}

align-self

单个项目交叉轴对齐。

1
2
3
.item {
  align-self: auto; /* auto | flex-start | flex-end | center | baseline | stretch */
}

实际例子

1
2
3
4
5
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
}

.item {
  flex: 1;
  margin: 0 10px;
}

浏览器支持

现代浏览器都支持，IE10+ 需要 -ms- 前缀。

总结

Flexbox 让布局变得简单直观。多练习几个例子，你就能掌握它了。

发表于 分类于

同步 vs 异步

同步：代码按顺序执行。

异步：不阻塞后续代码执行。

回调函数

传统异步方式。

1
2
3
4
5
6
7
8
9
function fetchData(callback) {
  setTimeout(() => {
    callback('data')
  }, 1000)
}

fetchData((data) => {
  console.log(data)
})

回调地狱

1
2
3
4
5
6
7
fetchData((data1) => {
  fetchData2(data1, (data2) => {
    fetchData3(data2, (data3) => {
      // ...
    })
  })
})

Promise

解决回调地狱。

1
2
3
4
5
6
7
8
9
10
11
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('data')
  }, 1000)
})

promise.then(data => {
  console.log(data)
}).catch(error => {
  console.error(error)
})

Promise 链式调用

1
2
3
4
fetchData()
  .then(data => processData(data))
  .then(result => displayResult(result))
  .catch(error => handleError(error))

async/await

更简洁的语法。

1
2
3
4
5
6
7
8
9
10
async function fetchData() {
  try {
    const data = await new Promise(resolve => {
      setTimeout(() => resolve('data'), 1000)
    })
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

并发处理

1
2
3
4
5
6
7
8
9
10
// 并行执行
const promises = [fetch1(), fetch2(), fetch3()]
Promise.all(promises).then(results => {
  // 所有完成
})

// 竞态
Promise.race(promises).then(result => {
  // 第一个完成
})

总结

异步编程是 javascript 核心。多练习 Promise 和 async/await，避免回调地狱。