Xây dựng bố cục thích ứng mà không cần truy vấn phương tiện

Sep 14, 2025

Cách

Trong một thời gian dài tôi đã cố gắng đạt được một tác phẩm trực quan hoàn hảo trên các trang web. Tôi đã có rất nhiều nỗi đau với các điểm dừng CSS trong công việc hàng ngày của tôi và không bao giờ hoàn toàn hài lòng với những cách phổ biến để xử lý bố cục đáp ứng. Gần đây, tôi phát hiện ra rất tuyệt thiết kế web đáp ứng Thủ thuật làm cho mọi thứ đơn giản, nhất quán và logic, và tôi rất háo hức để chia sẻ nó với bạn.

Bài viết này chủ yếu là về sự phát triển sáng tạo, do đó, nó dành cho cả hai: các nhà phát triển phía trước có thể tìm thấy kỹ thuật này hữu ích và các nhà thiết kế web nên có hiểu biết chung về sản xuất web và cách cải thiện sản lượng cuối cùng. Tôi cho rằng bạn đã biết về CSS, điểm dừng và truy vấn phương tiện.

Xây dựng một blog với lưới và flexbox

Cách truyền thống

Adaptive layouts: breakpoints — Điểm dừng có thể dẫn đến kết quả không thỏa mãn đối với chế độ xem phi tiêu chuẩn

Thiết bị di động đang chiếm lĩnh thế giới. Một loạt các loại thiết bị đang thay đổi cách chúng ta tạo các trang web. Bởi 'Một trang web đáp ứng' Hầu hết mọi người chỉ giả định các phiên bản máy tính để bàn và di động (đôi khi máy tính để bàn, máy tính bảng, di động). Đây là cách nó hoạt động theo truyền thống:

 H1 {
Kích thước phông chữ: 80px;
Không thể
.thùng đựng hàng {
Chiều rộng: 980px;
KHAI THÁC: 0 AUTO;
Không thể

@Media (chiều rộng tối đa: 1023px) {
h1 {
Kích thước phông chữ: 48px;
Không thể
.thùng đựng hàng {
Chiều rộng: Tự động;
Đệm: 0 30px;
Không thể
Không thể

Trong thực tế, thông thường Bố trí trang web Chúng tôi đang thấy không được thực hiện cho thiết bị của chúng tôi. Ví dụ: hãy xem cách chúng ta điều chỉnh kích thước phông chữ của & LT; H1 & GT; tiêu đề:

Adaptive layouts — Chỉ với một điểm dừng, bạn có thể kết thúc với kích thước điểm kỳ lạ

Bạn thấy, của chúng tôi & lt; H1 & GT; Tiêu đề có "kích thước phông chữ: 48px" trên thiết bị chiều rộng 320px và 800px và "kích thước phông chữ: 80px" trên 1024px và 2560px.

Tất nhiên, chúng ta có thể thêm nhiều điểm dừng hơn, nhưng số lượng thiết bị khác nhau là vô số! Điều này sẽ làm cho các thông số kỹ thuật thiết kế rất phức tạp và khó hiểu, bởi vì thật khó để biết giá trị nào được áp dụng cho màn hình nào.

Adaptive layouts: font size — Bạn không bao giờ có thể tạo đủ điểm dừng để có được kích thước phông chữ hoàn hảo trên mỗi màn hình

Những gì chúng ta thực sự cần là đây:

Đơn vị Viewport

Adaptive layouts: viewpoint units — Các đơn vị Viewport Cải thiện vấn đề, nhưng họ vẫn cần làm việc

Giải pháp cho vấn đề này liên quan đến các đơn vị Viewport VW và VH. Đây là các đơn vị có độ dài biểu thị 1/100 chiều rộng / chiều cao của chế độ xem (được hỗ trợ rộng rãi bởi các trình duyệt từ IE9 +).

Chúng ta có thể sử dụng chúng để điều chỉnh các thuộc tính của một trang web theo kích thước của nó. Tình hình sẽ tốt hơn một chút, nhưng nỗi đau vẫn như vậy:

 H1 {
Kích thước phông chữ: Calc (((80/1920) * 100VW;
Không thể
.thùng đựng hàng {
Chiều rộng: 80vw;
KHAI THÁC: 0 AUTO;
Không thể

@Media (chiều rộng tối đa: 1023px) {
h1 {
Kích thước phông chữ: Calc ((48/375) * 100VW;
Không thể
.thùng đựng hàng {
Chiều rộng: 90VW;
Không thể
}

Chúng tôi không bao giờ biết nếu nó quá lớn hoặc quá nhỏ.

Làm thế nào chúng ta có thể xây dựng một hệ thống bố trí thích ứng thực sự? Làm cách nào để chúng tôi thiết kế một trang web đáp ứng hoạt động nguyên chất từ 320px đến 2560px?

Lý tưởng nhất, mockup của bạn sẽ giải thích logic đằng sau bố cục và cách nó thích ứng từ độ phân giải nhỏ hơn thành lớn hơn:

Giải pháp

Adaptive layouts: solution — Đây là cách tạo một hệ thống bố trí thực sự thích ứng

Chúng tôi muốn liên tục điều chỉnh các thuộc tính từ một màn hình nhỏ thành một màn hình lớn. Không có điểm dừng và không có truy vấn truyền thông. Những gì chúng tôi muốn là một giá trị duy nhất hoạt động cho mọi màn hình.

Một hàm toán học với hai biến là phím. Ví dụ: nếu chúng ta muốn điều chỉnh kích thước phông chữ tiêu đề, chức năng sẽ trông như thế này:

1920x + y = 80
375x + y = 48

1920 - Chiều rộng máy tính để bàn mặc định trong một mockup thiết kế (bằng 100vw)
375 - Chiều rộng di động mặc định trong một mockup thiết kế (bằng 100vw)
80 - Kích thước phông chữ tiêu đề H1 mong muốn trên máy tính để bàn
48 - Kích thước phông chữ H1 mong muốn trên điện thoại di động

Đây là các giá trị X và Y:

X = (80 - 48) / (1920 - 375)
x = 0,0207.

Y = 80 - 1920 * 0,0207
y = 40.256.

Để sử dụng các giá trị này, chúng tôi sẽ cần chức năng Calc CSS để thực hiện các phép tính trên trang web (được hỗ trợ rộng rãi bởi các trình duyệt từ IE9 +). Chúng ta nên đếm x * 100 lần (vì Đơn vị 1VW = 1/100 của chiều rộng Viewport).

Chúng tôi lấy chức năng ban đầu của chúng tôi:
1920x + y = 80
375x + y = 48

Thay thế 1920 với 100VW:
100vw * x + y = giá trị mong muốn

Thay thế X và Y với các giá trị:
100vw * 0,0207 + 40.256 = Giá trị mong muốn

Chúng tôi nhận được phong cách CSS cuối cùng:

 H1 {Kích thước phông chữ: Calc (2.07VW + 40.25px)}

Đáng ngạc nhiên, điều đó cuối cùng cũng hoạt động như thế nào chúng ta muốn!

Chỉ cần một tài sản cho tất cả các màn hình. Không cần phải ghi đè lên các giá trị một lần nữa và một lần nữa. Bạn có thể điều chỉnh và tính toán bất kỳ loại thuộc tính nào: chiều rộng, kích thước phông chữ, đệm, lề, v.v.

Hãy thử xây dựng một bố cục thực tế bằng kỹ thuật này:

Nhưng cách tiếp cận này có một nhược điểm: Thật khó để hiểu giá trị nào đứng đằng sau chức năng Calc này. Làm thế nào chúng ta có thể đơn giản hóa nó?

Nếu bạn đang mã hóa HTML hàng ngày, có lẽ bạn đã quen thuộc với bộ xử lý trước Sass / SCSS. Dưới đây là một chút giúp đỡ cho bạn: Hãy tạo một "Mixin" và thực hiện tất cả các phép tính này sẽ tự động xảy ra và vẫn giữ các giá trị ban đầu của chúng tôi.

Đó là chức năng tương tự như được mô tả ở trên, nhưng được thực hiện dưới dạng mixin sass:

 $ Màn hình rộng: 1920
$ hiển thị-hẹp: 375

@Mixin Fluid ($ SỞ HỮU, $ MINVALUE, $ MAXVALUE)
  $ x: ($ MAXVALUE - $ MINVALUE) / ($ hiển thị rộng - $ hiển thị-hẹp)
  $ Y: $ MAXVALUE - $ Màn hình rộng * $ x
  # {$ SỞ HỮU}: calc (# {100 * $ x} vw + # {$ y} px)

H1.
  @Include Fluid ('cỡ chữ', 48,80)

.thùng đựng hàng
  @include Fluid ('Width', 315.1580)
@include Fluid ('Padding', 30,60)

Adaptive layouts: mixin — Một mixin sass có thể làm cho toàn bộ quá trình dễ dàng hơn

Kỹ thuật này Cung cấp một giải pháp rất tinh vi để cuối cùng xây dựng các bố cục web thực sự đáp ứng. Nó hỗ trợ hầu hết các trình duyệt, bảo vệ dự án của bạn được hiển thị chính xác cho khách truy cập, đơn giản hóa cấu trúc kiểu của bạn và quan trọng nhất khiến bố cục web của bạn phù hợp và logic. Tôi hy vọng nó có thể giúp bạn khởi chạy một số dự án web đáng kinh ngạc.

Những bài viết liên quan:

17 Hướng dẫn thiết kế web đáp ứng thực sự hữu ích
Các quy tắc của kiểu chữ Web đáp ứng
Tạo một bố cục đáp ứng với lưới CSS

Xây dựng bố cục thích ứng mà không cần truy vấn phương tiện

Cách truyền thống

Đơn vị Viewport

Giải pháp

Cách - Các bài báo phổ biến nhất

JamStack: Xây dựng các trang web nhanh hơn, hiệu quả hơn hôm nay

Làm thế nào để kết xuất các bề mặt trong suốt thực tế

5 tính năng CSS mới nóng và cách sử dụng chúng

Master the Bridge Tool

Cách tạo các điều khiển giàn tùy chỉnh trong Maya

Vẽ các nét được kiểm soát và mượt mà với

Cách vẽ phản xạ thuyết phục

Cách thiết kế bìa sách trong InDesign

Thể loại