Tìm hiểu cách tạo phản hồi sau với Biến CSS.

Cách làm cho khả năng phản hồi siêu đơn giản với các biến CSS

Hướng dẫn nhanh về cách tạo trang web đáp ứng trong năm 2018.

Nếu bạn chưa từng nghe về Biến CSS trước đây, thì đó là một tính năng mới của CSS, cung cấp cho bạn sức mạnh của các biến trong biểu định kiểu của bạn mà không phải thực hiện bất kỳ thiết lập nào.

Về bản chất, các biến CSS cho phép bạn bỏ qua cách thiết lập kiểu cũ:

h1 {
  cỡ chữ: 30px;
}
thanh điều hướng> một {
  cỡ chữ: 30px;
}

Sòng bạc ủng hộ điều này:

:nguồn gốc {
  --base-font-size: 30px;
}
h1 {
  cỡ chữ: var (- cỡ chữ cơ sở);
}
thanh điều hướng> một {
  cỡ chữ: var (- cỡ chữ cơ sở);
}

Mặc dù cú pháp có vẻ hơi lạ, nhưng điều này mang lại cho bạn lợi ích rõ ràng là có thể thay đổi kích thước phông chữ trên toàn bộ ứng dụng của bạn thông qua chỉ thay đổi biến - kích thước phông chữ cơ sở.

Nếu bạn muốn tìm hiểu Biến CSS đúng cách, vui lòng xem khóa học Biến CSS miễn phí và tương tác của tôi trên Scrimba:

Khóa học có tám screencasts tương tác.

Hoặc nếu bạn muốn biết thêm về khóa học, bạn cũng có thể đọc hướng dẫn về những gì bạn sẽ học trong bài viết dưới đây:

Bây giờ, hãy cùng xem công nghệ mới này có thể giúp cuộc sống của bạn dễ dàng hơn khi xây dựng các trang web đáp ứng.

Các thiết lập

Chúng tôi sẽ thêm phản hồi cho một trang web danh mục đầu tư như thế này:

Nó trông đẹp khi xem trên máy tính để bàn của bạn. Tuy nhiên, như bạn có thể thấy ở hình bên trái, bố cục này không hoạt động tốt trên thiết bị di động.

Ở bên trái: nó trông như thế nào trên thiết bị di động ban đầu. Ở bên phải: làm thế nào chúng ta muốn nó nhìn.

Trên hình ảnh bên phải, chúng tôi đã thay đổi một số thứ về kiểu dáng để làm cho nó hoạt động tốt hơn trên thiết bị di động. Đây là những gì chúng tôi đã làm:

  1. Sắp xếp lại lưới sao cho nó xếp chồng lên nhau theo chiều dọc thay vì qua hai cột.
  2. Di chuyển toàn bộ bố cục lên một chút
  3. Thu nhỏ phông chữ xuống

Để thực hiện điều này, chúng tôi cần thay đổi CSS sau:

h1 {
  cỡ chữ: 30px;
}
#navbar {
  lề: 30px 0;
}
#navbar a {
  cỡ chữ: 30px;
}
.grid {
  lề: 30px 0;
  lưới-mẫu-cột: 200px 200px;
}

Cụ thể hơn, chúng tôi cần thực hiện các điều chỉnh sau bên trong truy vấn phương tiện:

  • Giảm kích thước phông chữ của h1 xuống 20px
  • Giảm lề trên và dưới #navbar xuống 15px
  • Giảm kích thước phông chữ bên trong #navbar xuống 20px
  • Giảm lề trên .grid xuống 15px
  • Thay đổi .grid từ hai cột thành một cột
Lưu ý: Tất nhiên, có nhiều CSS hơn trong ứng dụng này, ngay cả trong các bộ chọn này. Tuy nhiên, vì mục đích của hướng dẫn này, tôi đã loại bỏ mọi thứ mà chúng tôi đã thay đổi trong truy vấn phương tiện truyền thông. Kiểm tra sân chơi Scrimba này để lấy toàn bộ mã.

Cách cũ

Làm tất cả những điều này sẽ là có thể nếu không có Biến CSS. Nhưng nó sẽ yêu cầu một lượng mã không cần thiết, vì hầu hết các dấu đầu dòng ở trên sẽ cần bộ chọn riêng của chúng bên trong truy vấn phương tiện, như thế này:

@media tất cả và (chiều rộng tối đa: 450px) {
  
  thanh điều hướng {
    lề: 15px 0;
  }
  
  thanh điều hướng một {
    cỡ chữ: 20px;
  }
  
  h1 {
    cỡ chữ: 20px;
  }
  .grid {
    lề: 15px 0;
    lưới-mẫu-cột: 200px;
  }
}

Cách mới

Bây giờ, hãy để Lừa xem cách giải quyết vấn đề này bằng các Biến CSS. Để bắt đầu, chúng tôi sẽ lưu trữ các giá trị mà chúng tôi đang sử dụng lại hoặc thay đổi bên trong các biến:

:nguồn gốc {
  --base-font-size: 30px;
  - màu: 200px 200px;
  --base-lề: 30px;
}

Và sau đó, chúng tôi sẽ đơn giản sử dụng các biến này trên ứng dụng:

#navbar {
  lề: var (- lề cơ sở) 0;
}
#navbar a {
  cỡ chữ: var (- cỡ chữ cơ sở);
}
h1 {
  cỡ chữ: var (- cỡ chữ cơ sở);
}
.grid {
  lề: var (- lề cơ sở) 0;
  lưới-mẫu-cột: var (- cột);
}

Khi chúng ta có thiết lập này, chúng ta chỉ cần thay đổi giá trị của các biến trong truy vấn phương tiện:

@media tất cả và (chiều rộng tối đa: 450px) {
  :nguồn gốc {
    - màu: 200px;
    --base-lề: 15px;
    --base-font-size: 20px;
}

Điều này sạch hơn nhiều so với những gì chúng ta có trước đây. Chúng tôi chỉ nhắm mục tiêu vào: root, trái ngược với việc chỉ định tất cả các công cụ chọn.

Chúng tôi đã giảm truy vấn phương tiện truyền thông từ bốn bộ chọn xuống còn một và từ mười ba dòng xuống còn bốn.

Và đây chỉ là một ví dụ đơn giản. Hãy tưởng tượng một trang web đầy đủ trong đó, ví dụ, điều khiển --base-lề hầu hết các khoảng cách miễn phí xung quanh ứng dụng. Nó dễ dàng hơn rất nhiều khi chỉ cần lật giá trị của nó, trái ngược với việc điền vào truy vấn phương tiện của bạn với các bộ chọn phức tạp.

Tóm lại, các biến CSS chắc chắn là tương lai của khả năng đáp ứng. Nếu bạn muốn học công nghệ này một lần và mãi mãi, tôi sẽ khuyên bạn nên kiểm tra khóa học miễn phí của tôi về chủ đề này trên Scrimba.

Bạn sẽ trở thành một bậc thầy biến CSS ngay lập tức :)

Cảm ơn vì đã đọc! I Khănm Per Borgen, nhà phát triển front-end và đồng sáng lập của Scrimba. Hãy liên hệ với tôi qua Twitter nếu bạn có bất kỳ câu hỏi hoặc nhận xét nào.