Nếu bạn đã thử mã hóa một trang web phản hồi, bạn đã gặp phải vấn đề này: Bạn thay đổi một thuộc tính CSS nhỏ, đơn giản và nó thay đổi bố cục trên các kích thước màn hình khác nhau.

Điều này buộc bạn phải kiểm tra và kiểm tra kỹ xem giá trị ký quỹ mới nhất chưa phá hủy trang web cho máy tính bảng hay điện thoại. Tất nhiên, bạn có thể dễ dàng khắc phục sự cố này bằng các phần ghi đè cụ thể cho các kích thước màn hình khác nhau. Nhưng trong suốt quá trình của một dự án, các tệp CSS trở nên chứa đầy ngoại lệ cho các vấn đề. Sau đó, có ngoại lệ cho các ngoại lệ, sau đó có ngoại lệ cho ngoại lệ ngoại lệ.

Nó trở nên phức tạp một cách nhanh chóng và cuối cùng bạn chiến đấu với mã của chính mình, tiêu tốn rất nhiều giờ dự án và dần mất đi sự tỉnh táo.

Nhưng đừng sợ! Phát triển đầu tiên trên thiết bị di động là ở đây để giúp bạn tránh khỏi những cơn đau đầu, ngoại lệ và tải trang chậm.

Điều gì xảy ra với dev đầu tiên của máy tính để bàn
Ban đầu phát triển cho phiên bản máy tính để bàn của một trang web đáp ứng đi ngược lại dòng chảy tự nhiên của tài liệu CSS. Các tệp CSS đọc tuyến tính từ trên xuống dưới, do đó, mọi thuộc tính CSS sẽ bị ghi đè bởi bất kỳ kiểu mới nào được áp dụng thêm vào tài liệu.

Bằng cách phát triển cho các màn hình lớn và sau đó thêm các kiểu di động vào tài liệu CSS, hai vấn đề xuất hiện:

Mọi thay đổi được thực hiện trong kiểu dáng máy tính để bàn (cao hơn trong tài liệu) sẽ thay đổi cách trang web di động xuất hiện nếu kiểu mới không được ghi đè rõ ràng cho trang web di động. Việc tạo thêm các dòng CSS phù phiếm tiêu tốn rất nhiều giờ dự án và đi ngược lại nguyên tắc của mã DRY.
Thiết bị di động bắt đầu tải một trang bằng cách hiển thị tất cả kiểu dáng máy tính để bàn. Khi phiên bản máy tính để bàn khổng lồ kết thúc kết xuất, kiểu dáng di động được áp dụng. Điều này tải thêm tài nguyên, có nghĩa là các thiết bị di động thậm chí còn mất nhiều thời gian hơn để cung cấp một trang được tải đầy đủ.
Đây là nơi phát triển di động đầu tiên đến để tiết kiệm trong ngày. Phương pháp này khuyến khích thứ tự CSS chính xác (từ di động đến máy tính để bàn từ trên xuống dưới), đảm bảo rằng một thiết bị chỉ áp dụng thông tin cần thiết khi cần.

Chúng ta hãy xem xét một số giải pháp cho những vấn đề này.

Kết xuất thiết bị di động trông như thế nào
Hình ảnh dễ dàng là người đóng góp lớn nhất cho kích thước của trang web, phải tải xuống mãi mãi nếu thiết bị không được kết nối với wifi. Xóa hình ảnh bổ sung khỏi kiểu dáng di động của bạn là điều tốt nhất bạn có thể làm để cải thiện tốc độ của trang web.

Chuyển sang thiết bị di động trước tiên có nghĩa là chỉ phục vụ một vài hình ảnh nhỏ cho thiết bị di động. Trong ví dụ dưới đây, tôi đã tạo cùng một tài liệu CSS được triển khai với cả hai phương thức đầu tiên trên máy tính để bàn và di động.

Nếu bạn đang sử dụng phương pháp đầu tiên trên máy tính để bàn, các thiết bị di động sẽ hiển thị theo thứ tự sau:

Đọc phong cách đầu tiên.
Tải xuống hình ảnh lớn (sắp được thay thế).
Kết xuất phần tử.
Đọc kiểu di động.
Tải về hình ảnh nhỏ (thay thế hình ảnh lớn).
Kết xuất phần tử một lần nữa.
Tuy nhiên, nếu phương thức di động đầu tiên được sử dụng, thiết bị sẽ hiển thị theo thứ tự sau:

Đọc phong cách đầu tiên.
Tải hình ảnh nhỏ.
Bỏ qua kiểu dáng chỉ dành cho máy tính để bàn (vì nó không áp dụng).
Kết xuất phần tử một lần.
Trang web không chỉ có ít bước hơn để chạy qua trước khi phục vụ một trang hoàn chỉnh cho trình duyệt, mà còn loại bỏ các cuộc gọi thêm vào các hình ảnh phù phiếm không được sử dụng!

Lưu ý rằng các truy vấn phương tiện sẽ thay đổi từ chiều rộng tối đa sang chiều rộng tối thiểu với sự phát triển đầu tiên trên thiết bị di động. Truy vấn độ rộng tối đa sẽ áp dụng cho tất cả các thiết bị nhỏ hơn 1000px, trong khi truy vấn độ rộng tối thiểu sẽ áp dụng cho các thiết bị lớn hơn 1000px.

Hoán đổi thành chiều rộng tối thiểu tạo ra một rào cản ngăn kiểu dáng mới mà chúng ta viết cho các thiết bị lớn hơn không bao giờ ảnh hưởng đến trang web trông như thế nào trên các thiết bị nhỏ hơn. Điều này làm tăng tốc độ tải của các trang web phản hồi của bạn trong khi đảm bảo rằng mọi thứ bạn thay đổi trong truy vấn phương tiện chỉ dành cho máy tính để bàn sẽ không ảnh hưởng đến bố cục di động của bạn. Đó là một kết quả đôi bên cùng có lợi và tốt cho tất cả!

Ngừng chiến đấu với chính mình
Giả sử chúng tôi đang làm việc trên một dự án có tệp CSS được nhận xét thành ba phần chính: máy tính để bàn, máy tính bảng và thiết bị di động.

Thật không may, chúng tôi đã làm theo phương pháp đầu tiên trên máy tính để bàn và trang web đang tải chậm cho điện thoại. Chúng tôi đã thử giảm kích thước hình ảnh, thêm bộ nhớ đệm trình duyệt và thậm chí thu nhỏ HTML (tổng). Nhưng trang web vẫn sên dọc cho khách truy cập lần đầu và nó cần được sửa.

Vì chúng tôi đã xây dựng trang web của mình bằng phương thức đầu tiên trên máy tính để bàn, CSS của chúng tôi sẽ trông như thế này cho phần tử .header của chúng tôi:
máy tính để bàn đầu tiên được mở rộng
Mục tiêu của chúng tôi là làm giảm số lượng kiểu dáng được gửi đến điện thoại di động. Để bắt đầu, chúng ta cần thực hiện kiểm kê những gì đang được áp dụng cho một yếu tố, lưu ý khi chúng ta ghi đè lên phong cách của chính mình.

Đầu tiên, hãy trao đổi với cách tiếp cận đầu tiên trên thiết bị di động. Chúng tôi sẽ biến thiết bị di động thành kiểu mặc định, không có phương tiện truyền thông của chúng tôi (lưu ý: Đừng làm điều này trong sản xuất, nó sẽ phá vỡ trang web và khiến khách hàng của bạn khó chịu).
trao đổi di động đầu tiên
Hãy xem lại hình ảnh của chúng tôi vì điều đó có ảnh hưởng lớn nhất đến tốc độ trang web của chúng tôi.

Vì chúng tôi không tải nền trên thiết bị di động, chúng tôi có thể xóa thuộc tính đó. Chúng tôi sẽ thêm hình ảnh cho các thiết bị lớn hơn sau này khi thực sự cần thiết. Điều tương tự cũng xảy ra đối với thuộc tính dưới lề, khiến chúng ta chỉ có hai thuộc tính thực sự cần áp dụng cho thiết bị di động!

Chuyển sang phần máy tính bảng, chúng ta sẽ cần chuyển các thuộc tính nền và phần đệm từ kiểu dáng máy tính để bàn thành kiểu dáng máy tính bảng, vì máy tính bảng là phần tiếp theo sẽ được hiển thị.

Hãy nhớ rằng, mục tiêu của chúng tôi là chỉ ghi đè lên một thuộc tính nếu nó thay đổi và chỉ thêm các thuộc tính mới khi thay đổi cần phải xảy ra, như trong hình dưới đây:
di động mở rộng đầu tiên
Tốt hơn nhiều! Bằng cách kiểm tra cách một thiết bị di động sẽ hiển thị CSS mới được tối ưu hóa của chúng tôi, nó sẽ nhanh chóng nhận thấy mức độ ảnh hưởng của sự phát triển đầu tiên trên thiết bị di động đối với các thiết bị nhỏ hơn so với phương pháp đầu tiên trên máy tính để bàn.

Trong khi phát triển các trang web đáp ứng, hãy nhớ rằng theo mặc định, mọi thứ không nằm trong truy vấn phương tiện sẽ hiển thị. Bằng cách tạo kiểu mặc định (không truy vấn phương tiện) phục vụ cho thiết bị di động, chúng tôi cho phép lượng thông tin nhỏ nhất có thể được gửi đến thiết bị dễ bị ảnh hưởng nhất bởi kích thước của trang web.
Tạo web đồ điện tử
Máy tính để bàn và máy tính bảng được kết nối với kết nối internet nhanh 99,999 phần trăm thời gian, cho phép một lượng lớn thông tin được truyền ở tốc độ cao. Điện thoại có nhiều khả năng tải thông tin qua các kết nối internet chậm. Chuẩn bị các bảng định kiểu của bạn để chứa các thiết bị nhạy cảm nhất cho phép bạn phục vụ trang web tốt nhất có thể cho khách hàng.