Thực đơn
trang chủLỗi

Bố cục thích ứng là gì. Bố cục thích ứng trên HTML5 và CSS3 Bạn có thể làm gì sau khi hoàn thành khóa học này

Chúng tôi đã phát hành một cuốn sách mới, Tiếp thị nội dung trên mạng xã hội: Cách thu hút người theo dõi và khiến họ yêu thích thương hiệu của bạn.

Đặc biệt, công nghệ này được sử dụng tích cực để đảm bảo trang web được hiển thị đồng đều trên các loại thiết bị khác nhau: máy tính/máy tính xách tay và điện thoại thông minh/máy tính bảng với các kích cỡ hiển thị khác nhau.

Ngày nay, một trang web đáp ứng được tạo bằng ngôn ngữ đánh dấu HTML5 và biểu định kiểu xếp tầng CCS3. Nhưng cho đến khi các công nghệ tương ứng trở thành tiêu chuẩn cho tất cả các trình duyệt phổ biến, ngôn ngữ lập trình JavaScript vẫn được sử dụng cho các mục đích tương ứng. Thậm chí trước đó (trước năm 2010), họ phải tạo một số phiên bản của cùng một trang, nhưng với các đánh dấu khác nhau, để trang web họ phát triển sẽ được hiển thị chính xác trên các màn hình khác nhau.

Tại sao bạn cần bố cục trang thích ứng?

Cho đến gần đây, khi truy cập nhiều trang web, bạn có thể thấy một thanh trượt ở cuối trình duyệt cuộn trang theo chiều ngang. Điều này xảy ra, chẳng hạn như nếu cửa sổ trình duyệt Internet không được phóng to để lấp đầy toàn bộ màn hình mà chỉ chiếm một diện tích tương đối nhỏ. Điều này hầu như luôn có thể được nhìn thấy khi độ phân giải của màn hình hiển thị hình ảnh là 800 x 600 hoặc thậm chí hơn thế nữa là 640 x 480 pixel.

Ngày nay, ngay cả chủ sở hữu thiết bị di động cũng hiếm khi gặp phải điều này. Và lý do cho điều này không chỉ nằm ở độ phân giải của màn hình hiện đại là HD trở lên mà còn ở chỗ bố cục trang thích ứng giờ đây gần như đã trở thành một tiêu chuẩn.

Tại sao và khi nào thiết kế đáp ứng xuất hiện?

Vào đầu thập kỷ thứ hai của thế kỷ 21, nhu cầu cấp thiết là tạo ra các công nghệ cho phép phát triển các trang web phổ quát. Các điều kiện tiên quyết chính thúc đẩy việc tạo ra và phát triển thiết kế thích ứng là:

  • lượng lớn người dùng mới truy cập Internet;
  • sự xuất hiện của nhiều thiết bị với độ phân giải màn hình khác nhau;
  • áp lực từ các công cụ tìm kiếm, bắt đầu áp dụng các biện pháp trừng phạt đối với các trang web có nhiều phiên bản trang có cùng nội dung.

Người đầu tiên tạo ra chính thức là nhà thiết kế web Ethan Marcotte. Vào giữa năm 2010, ông đã xuất bản một tài liệu trong đó ông nói về công nghệ có thể giải quyết vấn đề hiển thị bình thường của các trang web trong các trình duyệt có độ phân giải không gian làm việc khác nhau.

Sau một thời gian, một podcaster nổi tiếng khác đã đưa ra những bổ sung cho các khái niệm mà đồng nghiệp của anh ấy đang nói đến.

Bố cục thích ứng được tạo ra bằng cái gì và như thế nào?

Trước khi chúng ta bắt đầu xem xét vấn đề làm thế nào để tạo bố cục thích ứng, cần xem xét ngắn gọn các công nghệ chính được sử dụng. Bây giờ có hai trong số đó: HTML5 và CSS3. Cho đến gần đây, HTML4 và CSS2 vẫn được sử dụng, nhưng để tạo ra thiết kế phổ biến với chúng, bạn cũng phải sử dụng JavaScript.

CSS3 là thế hệ tiếp theo của Cascading Style Sheets. Công nghệ này nhằm tạo ra các quy tắc hiển thị các thành phần trang trong trình duyệt của người dùng. Khi sử dụng nó, bạn có thể chỉ định, chẳng hạn như kích thước của một phần tử ở độ phân giải màn hình người dùng nhất định hoặc đặt quy tắc rằng phần tử đó phải luôn chiếm một phần trăm không gian nhất định (100% - lấp đầy toàn bộ khu vực làm việc của trình duyệt).

Ở thế hệ thứ ba, quy tắc “truy vấn phương tiện” đã xuất hiện, nhờ đó, nhà thiết kế bố cục có thể tạo các lớp riêng biệt cho từng độ phân giải cụ thể.

Một điểm rất quan trọng!

Người dự định sử dụng CSS3 cho thiết kế đáp ứng nên biết rằng, không giống như CSS2, thế hệ thứ ba của Cascading Style Sheets sử dụng tỷ lệ phần trăm thay vì pixel để chỉ định kích thước đối tượng.

Đối với HTML5, nó được sử dụng để đánh dấu trực tiếp trang, tức là cho biết vị trí cần đặt các phần tử nhất định. Để các đối tượng thích ứng với độ phân giải, các lớp được tạo trước bằng CSS3 được chỉ định trong tham số của thẻ HTML.

Một ví dụ đơn giản về bố cục thích ứng

Để hiểu bố cục thích ứng là gì, các ví dụ phải càng đơn giản càng tốt. Do đó, chúng tôi sẽ xem xét một tùy chọn trong đó hình ảnh đã chuẩn bị sẽ tự động được điều chỉnh theo độ phân giải của không gian làm việc của trình duyệt.

Đầu tiên, bằng cách sử dụng HTML, chúng ta sẽ đặt chính phần tử đó trên trang:

Thẻ DIV chỉ ra rằng mọi thứ chứa trong nó là một khối riêng biệt. Khi có nhiều khối như vậy trên một trang, thuộc tính "class" sẽ được chỉ định. Điều này là cần thiết để trình duyệt hiểu quy tắc nào sẽ áp dụng cho một khối cụ thể.

Bây giờ bạn cần tự tạo quy tắc, cái gọi là

Vùng chứa CSS:

Div ( chiều rộng: 100%; căn chỉnh văn bản: giữa; ) div img( wight: 100%; chiều cao: tự động; )

Trong mã này, các quyền dành cho bố cục thích ứng được đặt. Đặc biệt, nó quy định rằng chiều rộng phải luôn bằng 100% chiều rộng vùng làm việc của trình duyệt web, trong khi chiều cao được điều chỉnh tự động.

Kiểm tra bố cục thích ứng

Có các công cụ đặc biệt để kiểm tra bố cục thích ứng. Ví dụ: trong trình duyệt GoogleChrome, bạn có thể nhấn phím “F12”, sau đó, trong bảng điều khiển mở ra, hãy nhấp vào biểu tượng có hình ảnh điện thoại thông minh và máy tính bảng. Sau hành động này, một số bảng khác sẽ xuất hiện trong đó bạn cần chỉ định độ phân giải quan tâm.

Nó thậm chí có thể được thực hiện đơn giản hơn. Để kiểm tra xem thiết kế đáp ứng có hoạt động hay không, bạn cần giữ phím CTRL và sau đó nhấp vào “+” hoặc “-”. Sau hành động này, trang sẽ tăng hoặc giảm tương ứng, nhưng phần tử được áp dụng bố cục thích ứng sẽ giữ nguyên tỷ lệ tỷ lệ của nó (hoặc làm điều gì đó khác, những gì đã được chỉ định trong quy tắc).

Các công cụ giúp thiết kế đáp ứng dễ dàng hơn

Bố cục của thiết kế thích ứng là một công việc khá tốn công sức. Vì vậy, để giảm thời gian thực hiện tất cả các quy trình này, tốt hơn hết bạn nên sử dụng các công cụ đặc biệt. Một trong số đó có thể được gọi là framework Bootstrap* nổi tiếng.

Ví dụ: bộ công cụ dành cho HTML và CSS này bao gồm một số lượng lớn các lớp dựng sẵn mà bạn có thể sử dụng trong thiết kế của mình. Nó cũng chứa các yếu tố động, phù hợp với tất cả các quy tắc và tiêu chuẩn, cho phép bạn tạo các yếu tố thích ứng.

Để bắt đầu sử dụng nó, trước tiên bạn phải có kiến ​​thức trực tiếp về CSS3 và HTML5, sau đó nghiên cứu các tính năng của khung. Tuy nhiên, sau khi hiểu được hầu hết những điều phức tạp khi làm việc với nó, bạn có thể giảm đáng kể thời gian phát triển thiết kế trang web thích ứng.

*Bootstrap là phần mềm mã nguồn mở được phát triển bởi Twitter Inc. Nó được phân phối miễn phí và có một cộng đồng rộng lớn mà bạn luôn có thể xin lời khuyên.

Bố cục trang web thích ứng cho phép các trang web tự động điều chỉnh cho phù hợp với màn hình của máy tính bảng và điện thoại thông minh. Lưu lượng truy cập Internet di động đang tăng lên hàng năm và để xử lý hiệu quả lưu lượng truy cập này, bạn cần cung cấp cho người dùng các trang web phản hồi nhanh với giao diện thân thiện với người dùng.

Công cụ tìm kiếm sử dụng một số tiêu chí để đánh giá khả năng phản hồi của trang web khi được xem trên thiết bị di động. Google đang cố gắng đơn giản hóa việc sử dụng Internet cho chủ sở hữu điện thoại thông minh và máy tính bảng bằng cách đánh dấu các trang web phù hợp với thiết bị di động bằng dấu đặc biệt thân thiện với thiết bị di động trong kết quả tìm kiếm trên thiết bị di động. Yandex cũng có một thuật toán ưu tiên các trang web có phiên bản dành cho thiết bị di động/đáp ứng cho người dùng trong tìm kiếm trên thiết bị di động.

Bạn có thể kiểm tra việc hiển thị trang trên thiết bị di động trên các dịch vụ và.

Cơm. 1. Kết quả tìm kiếm trên thiết bị di động từ Yandex và Google có ghi chú về tính thân thiện của trang web với thiết bị di động. Bố cục thích ứng là gì?

Bố cục thích ứng giả định không có thanh cuộn ngang và các vùng có thể mở rộng khi xem trên bất kỳ thiết bị nào, văn bản có thể đọc được và các vùng lớn cho các phần tử có thể nhấp vào. Sử dụng truy vấn phương tiện, bạn có thể kiểm soát bố cục và vị trí của các khối trên một trang, sắp xếp lại mẫu sao cho phù hợp với các kích thước màn hình thiết bị khác nhau.

Các kỹ thuật cơ bản để tạo một trang web đáp ứng được đưa ra trong bài viết. Đối với thiết kế đáp ứng, chiều rộng của vùng chứa trang web chính được đặt theo % và có thể bằng 100% chiều rộng cửa sổ trình duyệt hoặc nhỏ hơn. Độ rộng của các cột lưới cũng được xác định bằng %. Trong thiết kế đáp ứng, chiều rộng của các cột lưới và vùng chứa chính được cố định bằng cách sử dụng các giá trị px.

Kỹ thuật bố cục chất lỏng thích ứng được thảo luận trong bài học này sẽ hoạt động hoàn hảo trên mẫu hai cột, giúp trang web có tính thích ứng và thuận tiện khi xem trên thiết bị di động. Mẫu này giả định một bố cục khác cho nội dung chính của các trang; trong bài học này bố cục của trang chính sẽ được thảo luận.

Bố cục trang chủ

Một trang bao gồm ba khối chính: phần đầu trang (header), phần chứa trình bao bọc cho nội dung chính và thanh bên, và phần chân trang (chân trang). Hãy lấy 768px và 480px làm bước ngoặt thiết kế.

Đầu tiên, chúng ta sẽ ẩn menu trên cùng và di chuyển thanh bên dưới vùng chứa các bài đăng. Ở điểm thứ hai, chúng tôi sẽ thay đổi vị trí của các thành phần tiêu đề, hủy vị trí của các nút mạng xã hội trong bài đăng và hủy việc gói các cột chân trang của trang.


Cơm. 2. Ví dụ về bố cục thích ứng 1. Thẻ và phần meta

1) Thêm các tệp cần thiết vào phần - một liên kết đến các phông chữ được sử dụng, thư viện jQuery, cũng như plugin không có tiền tố (để không ghi tiền tố trình duyệt cho các thuộc tính):

Bố cục trang web thích ứng

2. Tiêu đề trang

Chúng tôi sẽ đặt các phần tử vùng chứa sau vào tiêu đề trang:
Logo