Thực đơn
trang chủĐiện thoại

Thiết kế html đáp ứng. Cách tạo thiết kế đáp ứng bằng CSS. Giải pháp từng phần: làm mọi thứ linh hoạt

Ngày nay, hầu hết mọi người truy cập Internet thông qua tiện ích di động- máy tính bảng, điện thoại, về mặt này, tối ưu hóa trang web cũng bao gồm cấp độ mới. Nếu người dùng truy cập và thấy rằng trang web không được tối ưu hóa cho thiết bị di động: không thể xem được hình ảnh, các nút đã di chuyển ra ngoài, phông chữ nhỏ và không thể đọc được, thiết kế bị lệch - 99 trên 100%, anh ta sẽ hãy rời đi và bắt đầu tìm kiếm một nơi khác thuận tiện hơn. Và nó sẽ đánh dấu vào ô tài nguyên không liên quan, tức là nó không tương ứng với truy vấn tìm kiếm. Do đó, thiết kế trang phải được điều chỉnh cho phù hợp với nhiều thiết bị di động khác nhau. Phiên bản di động của trang web là gì, cách tạo trang web và phương pháp tốt nhất để sử dụng là gì? Đọc thêm trong bài viết này.

Vậy có bốn những cách chínhđiều chỉnh trang web cho phiên bản di động.

Phương pháp một - thiết kế đáp ứng

Các mẫu thích ứng liên quan đến việc thay đổi hình ảnh trang web tùy thuộc vào kích thước màn hình. Theo quy định, chúng được đặt ở tiêu chuẩn 1600, 1500, 1280, 1100, 1024 và 980 pixel. Các truy vấn được sử dụng để thực hiện. Nó không tự thay đổi.

Ưu điểm của phương pháp này bao gồm:

  • phát triển thuận tiện, vì cấu trúc tự thích ứng với các thông số màn hình và bất kỳ bản cập nhật nào không yêu cầu phát triển thiết kế từ đầu, chỉ cần sửa CSS và HTML là đủ;
  • một địa chỉ URL- người dùng không cần nhớ nhiều tên, không cần chuyển hướng (chuyển hướng từ địa chỉ này sang địa chỉ khác), điều này có thể làm phức tạp công việc của quản trị trang web và công cụ tìm kiếm sẽ dễ dàng sắp xếp và xếp hạng tài nguyên hơn với một địa chỉ duy nhất.

Tất nhiên, các mẫu thích ứng cũng có những nhược điểm, nhân tiện, chúng lớn hơn những ưu điểm của chúng. Tuy nhiên, nhiều nhà phát triển tuân thủ chính khái niệm này, ví dụ: Google Corporation, phiên bản di động của trang web có thiết kế thích ứng. Vì vậy, những nhược điểm:

  • Thiết kế đáp ứng không hỗ trợ các tác vụ tương tự trên thiết bị di động như trên máy tính để bàn. Ví dụ: nếu đây là phiên bản di động của trang web ngân hàng, nơi người dùng rất có thể sẽ cần thông tin về tỷ giá hối đoái hoặc các máy ATM gần đó, thì thiết kế này là khá đủ. Nhưng nếu đó là một tài nguyên có cấu trúc phức tạp với nhiều phần và tiểu mục thì nó khó có thể thu hút khách truy cập.
  • Tải chậm biến trang web yêu thích của bạn thành một trang web bị ghét. Điều này đặc biệt đúng đối với các tài nguyên có rất nhiều hoạt ảnh, video, cửa sổ bật lên và các tài nguyên khác. yếu tố hoạt động. Do dung lượng lớn, trang sẽ chỉ “chậm lại”, người dùng sẽ tức giận và bỏ đi, và vị trí tìm kiếm trang web - rơi.
  • Không thể tắt phiên bản di động là một nhược điểm đáng kể khác. Nếu một phần tử bị ẩn bởi bố cục như vậy, bạn không thể làm bất cứ điều gì để mở nó, không giống như các trang web nơi bạn có thể vô hiệu hóa nó và chuyển sang một miền thông thường.

Tuy nhiên, phiên bản di động của trang web như vậy một cách nhanh chóng, không cần kỹ năng và chi phí đặc biệt, cho phép bạn điều chỉnh tài nguyên cho phù hợp với bất kỳ tiện ích nào. Tuy nhiên, do những nhược điểm đã liệt kê, nó phù hợp với các tài nguyên nhỏ, đơn giản với lượng thông tin tối thiểu và đa phương tiện, không có điều hướng khó khăn và hoạt hình. Đối với một trang web phức tạp, 2 phương pháp khác là phù hợp.

Phương pháp hai - một phiên bản riêng của trang web

Phương pháp này rất phổ biến và thường thành công trong việc làm cho trang web trở nên thân thiện hơn với người dùng trên thiết bị di động. Bản chất của nó là tạo một phiên bản riêng của trang, được thiết kế cho ứng dụng và nằm trên một URL hoặc tên miền phụ riêng, ví dụ: m.vk.com. Đồng thời, chức năng chính được giữ nguyên, thiết kế trang web trông khác. Ưu điểm của phương pháp này là rõ ràng:

  • giao diện người dùng thuận tiện;
  • thật dễ dàng để thay đổi và thực hiện chỉnh sửa, vì phiên bản tồn tại tách biệt với tài nguyên chính;
  • do trọng lượng thấp, phiên bản riêng biệt của trang web hoạt động nhanh hơn nhiều so với mẫu thích ứng;
  • Thông thường, có thể chuyển sang phiên bản chính của trang từ phiên bản di động.

Nhưng điều này không phải là không có nhược điểm:

  • Một số địa chỉ - phiên bản máy tính để bàn và thiết bị di động của trang web. Làm thế nào để người dùng nhớ được hai lựa chọn? Các web master thường chuyển từ phiên bản desktop sang phiên bản di động, tuy nhiên nếu trang này không tồn tại trong phiên bản di động thì người dùng sẽ gặp lỗi. Ở đây nảy sinh khó khăn với các công cụ tìm kiếm, khó xếp hạng 2 tài nguyên giống hệt nhau và điều này ảnh hưởng trực tiếp đến việc quảng cáo.
  • Phiên bản di động của trang web từ máy tính, nếu người dùng vô tình truy cập vào, sẽ trông thật lố bịch, điều này cũng có thể ảnh hưởng đến lưu lượng truy cập.
  • Phiên bản này thường rất đơn giản, dành cho máy tính để bàn nên người dùng sẽ nhận được rất ít chức năng. Nhưng đồng thời, nếu thiếu thứ gì đó, du khách có thể truy cập phiên bản đầy đủ trang.

Nói chung, một trang web dành cho thiết bị di động riêng biệt có lý do chính đáng và là cách phổ biến nhất để điều chỉnh tài nguyên cho thiết bị di động. Nó phổ biến trong các cửa hàng trực tuyến lớn như Amazon.

Cách thứ ba là thiết kế RESS

Công cụ tìm kiếm Google tích cực hỗ trợ hướng thiết kế di động này. Đây là việc khó khăn nhất, tốn kém nhất nhưng phương pháp hiệu quảđiều chỉnh trang web cho điện thoại hoặc máy tính bảng. Nó được gọi là RESS. Điều này nhắm mục tiêu tài nguyên vào một ứng dụng di động có thể tải xuống riêng cho từng thiết bị. Đối với Android - từ GooglePlay và đối với Apple - từ iTunes.

Các ứng dụng như vậy nhanh, miễn phí, tiện lợi và có khả năng lưu trữ nhiều loại khác nhau thông tin, trong khi bộ nhớ điện thoại và lưu lượng truy cập Internet không bị tiêu tốn nhiều như khi truy cập một trang web thông qua trình duyệt. Chúng rất dễ truy cập vì liên kết sẽ luôn ở trên màn hình và không cần phải nhập tên phức tạp vào thanh địa chỉ browser.

Tất nhiên, ở đây cũng có những nhược điểm như độ phức tạp trong phát triển, chi phí nhân công cao. số lượng lớn lập trình viên, cần phải thực hiện một số tùy chọn bố cục. Đôi khi thiết bị di động không được ứng dụng nhận dạng. Thường xuyên hỗ trợ kỹ thuật, khắc phục khuyết điểm. Tuy nhiên, phương án này được coi là phương án tốt nhất trong ba phương án được đề xuất do hoạt động hiệu quả, không bị gián đoạn.

Cách rẻ nhất để tạo một trang web di động

Tất cả các phương pháp trên đều yêu cầu, mặc dù không phải lúc nào cũng dài và phức tạp nhưng vẫn được trả công cho quản trị trang web. Nếu bạn không thấy nhu cầu cấp thiết cho sự phát triển như vậy, phiên bản di động đơn giản và miễn phí của trang web sẽ phù hợp với bạn. Cách dễ nhất để làm điều đó là gì?

Tải xuống các mẫu (plugin) đặc biệt để có thiết kế đáp ứng. Ví dụ: WP Mobile Detector, WordPress Mobile Pack, WPSmart Mobile và các sản phẩm khác. Chúng sẽ giúp bạn hiển thị trang web chính xác hơn trên điện thoại của mình và bạn sẽ nhận được một số mẹo về những gì cần sửa để trang phù hợp hơn với phiên bản di động.

Tất nhiên, phương pháp này khó có thể phù hợp với những nguồn lực nghiêm trọng. Đúng hơn là nó cơ hội miễn phí Dành cho các trang web, blog, nguồn cấp tin tức nhỏ và đơn giản. Chúng ta cũng đừng quên điều đó Công cụ tìm kiếm Google, giống như Yandex, ngày nay đặt ra yêu cầu nghiêm túc đối với các phiên bản di động, do đó, khả năng hạ thấp vị trí của bạn bằng phương pháp này là rất lớn.

Với phương pháp này, rất có thể, các biểu ngữ quảng cáo và cửa sổ bật lên sẽ bị cắt nhưng trang sẽ tải nhanh và không bị lag.

Nguyên tắc tạo phiên bản di động

Không quan trọng phiên bản di động của trang web được tạo miễn phí hay với sự trợ giúp của đội ngũ quản trị viên web, cho dù nó được tạo bằng hệ thống RESS hay sử dụng mẫu thích ứng. Điều quan trọng nhất là để nó hoạt động hiệu quả, bạn cần phải tuân thủ một số điều cực kỳ quan trọng. nguyên tắc quan trọng. Vậy phiên bản di động của trang web sẽ như thế nào? Làm thế nào để làm cho nó năng suất, hiệu quả và năng suất?

Chúng tôi loại bỏ mọi thứ không cần thiết

Chủ nghĩa tối giản là điều mà nhà phát triển phiên bản di động của trang web nên phấn đấu. Hãy tưởng tượng việc nhận biết thông tin tràn ngập màu sắc, nút bấm, biểu ngữ khó khăn như thế nào và bạn phải cuộn chuột không ngừng để tìm kiếm. vật liệu cần thiết. Thiết kế di động phải đơn giản và gọn gàng. Chọn 2-3 màu để phân chia không gian (ví dụ màu thương hiệu). Sẽ tốt hơn nếu một trong số chúng có màu trắng. Chia không gian màn hình nhỏ thành các vùng rõ ràng và dễ đọc. Phím ảo phải hiển thị để người dùng biết rõ nơi cần nhấn và nhìn - đây là sản phẩm, đây là mẫu điền dữ liệu, đây là thông tin giao hàng và thanh toán.

Tất cả tùy chọn bổ sung, sẽ hữu ích trong phiên bản dành cho máy tính để bàn và giúp cuộc sống của người dùng dễ dàng hơn, nhưng sẽ chỉ mang lại sự phức tạp ở đây. Chỉ để lại những yếu tố quan trọng nhất. hoạt hình, biểu ngữ quảng cáo, đa phương tiện rất có thể sẽ chỉ làm chậm hoạt động của trang web hoặc ứng dụng và khiến bạn mất tập trung vào nội dung chính.

Căn chỉnh

Vấn đề căn chỉnh cũng không kém phần cấp bách, bởi nếu thực hiện không đúng, người dùng sẽ chỉ nhận được phần cuối của những từ quan trọng. Nó thường được chấp nhận để căn trái và theo chiều dọc. Hãy tưởng tượng bạn đang cuộn nguồn cấp tin tức bằng điện thoại. Bạn làm điều này từ trên xuống dưới, nhưng không phải ở bên trái hoặc bên phải.

Một hiệp hội

Khi không thể thực hiện một chuỗi chuyển đổi dài, hãy thử kết hợp nhiều bước thành một. Ví dụ: một trang web yêu cầu nhập dữ liệu theo nhiều giai đoạn - tên, sau đó là địa chỉ, trong đó trong mỗi ô riêng lẻ có một ngôi nhà, đường phố, căn hộ riêng biệt, v.v. Để không buộc người dùng phải cố gắng đi vào nhiều ô nhỏ ô, yêu cầu anh ta chỉ điền 2 - tên và địa chỉ.

Và ngắt kết nối

Đôi khi, ngược lại, cũng cần phải ngắt kết nối một số lượng lớn thông tin. Ví dụ: trong menu thả xuống, bạn có danh sách hơn 80 thành phố nơi việc giao hàng được thực hiện. Nhóm chúng theo khu vực để người dùng không phải cuộn qua danh sách khổng lồ này. Khi anh ấy di chuyển con trỏ qua một trung tâm khu vực hoặc vùng, một danh sách các thành phố khác sẽ xuất hiện.

Danh sách

Nhân tiện, về danh sách. Có hai trong số chúng - cố định theo thứ tự bảng chữ cái hoặc thứ tự khác và có sự thay thế. Sự lựa chọn của họ phụ thuộc vào những gì sẽ được liệt kê.

Cố định sẽ thuận tiện nếu người dùng biết chính xác những gì mình đang tìm kiếm. Ví dụ: thành phố, số hoặc ngày. Tùy chọn thứ hai phù hợp với những tên dài, phức tạp hoặc trong những trường hợp có nhiều biến thể của cùng một tên và mỗi biến thể sẽ đưa người dùng đến gần hơn một bước với mục tiêu. Tùy chọn tự động thay thế thường được sử dụng hơn khi khách truy cập cần trợ giúp. Ví dụ: một trang web đan lát đề nghị mua kim đan. Người dùng nhập truy vấn tìm kiếm“Kim đan kim loại”, nhưng trong chú giải công cụ, anh ấy thấy “kim đan 5 mm”, “kim đan 4,5 mm”, v.v.

Tự động điền

Điểm này đặc biệt áp dụng cho các trang web bán thứ gì đó trực tuyến và bạn phải điền vào các biểu mẫu tiêu chuẩn để thanh toán, giao hàng, v.v. Nếu một người mua hàng từ điện thoại của mình, thì rất có thể anh ta không có thời gian truy cập vào máy tính. , có nghĩa là quá trình mua hàng cần phải được thực hiện nhanh chóng và thuận tiện nhất có thể.

Để làm điều này, các biểu mẫu có thể chứa dữ liệu đã được điền sẵn; bạn có thể sử dụng các câu trả lời phổ biến nhất. Ví dụ: chèn ngày hôm nay, phương thức thanh toán bằng tiền mặt, thành phố nếu bạn làm việc trong cùng khu vực. Chúng có thể được thay đổi, nhưng nếu bắn trúng mục tiêu, thời gian của người dùng sẽ được tiết kiệm.

Mọi thứ đều được đọc, mọi thứ đều được xem

Khi tạo thiết kế phiên bản di động của trang web, hãy nhớ rằng điện thoại của mỗi người là khác nhau và tầm nhìn của họ cũng vậy. Trang web của bạn có thể được xem trên màn hình nhỏ, vì vậy phông chữ phải đơn giản và dễ đọc, các nút phải đủ lớn để nhấp vào mà không bị đưa đến trang khác và hình ảnh phải mở riêng biệt và có kích thước lớn, đặc biệt khi truy cập Internet -. cửa hàng.

Một số thống kê

Khi nói về việc điều chỉnh một trang web cho phù hợp với thiết bị di động, người ta không thể không sử dụng số liệu thống kê để hiểu tầm quan trọng của quá trình này đối với việc quảng cáo trực tuyến.

Các con số như sau. Ngày nay, 87% dân số sử dụng các thiết bị tiện ích, dường như ngoại trừ trẻ nhỏ và một số người già. Các nhà kinh tế dự đoán tăng trưởng thương mại di động 100 lần trong 5 năm tới. Tuy nhiên, chỉ có 21% trang web được điều chỉnh để hoạt động với thiết bị di động. Điều này có nghĩa là lưu lượng truy cập Internet và thị trường thương mại điện tử chỉ chiếm một phần nhỏ thứ 5.

Hãy suy nghĩ về những con số này. Việc điều chỉnh tài nguyên của bạn có hợp lý không? Tất nhiên là có. Hơn nữa, trong khi có rất nhiều không gian trông trong thị trường này, bạn có thể đưa phân khúc của riêng mình vào đó.

Phiên bản di động cần thiết ở đâu?

Nên sử dụng phiên bản di động cho bất kỳ nền tảng nào muốn đạt được xếp hạng cao. Xét cho cùng, đây là tác động trực tiếp đến người dùng, tạo điều kiện thoải mái để họ ở lại trang web của bạn.

Những điều sau đây không thể tồn tại nếu không có phiên bản di động:

  • cổng tin tức, vì đây là những gì hầu hết mọi người xem từ điện thoại trên đường đi làm hoặc đi học;
  • mạng xã hội - vì lý do tương tự, cộng thêm yếu tố giao tiếp trực tuyến, nghĩa là phải tạo ra một cuộc trò chuyện thuận tiện, dễ hiểu cho việc này;
  • sách tham khảo, trang web có điều hướng, v.v., nơi mọi người quay lại khi tìm kiếm thứ gì đó;
  • Các cửa hàng trực tuyến là cơ hội để thu hút những khách hàng không lãng phí thời gian mua sắm mà mua mọi thứ qua Internet di động.

Thay vì một kết luận

Ngày nay, công nghệ di động đang trong giai đoạn tăng trưởng và phát triển tích cực, do đó, muốn dẫn đầu thị trường, bất kỳ công ty nào cũng phải đảm bảo rằng tài nguyên Internet của mình đáp ứng yêu cầu. Do yêu cầu ngày càng tăng của người dùng, các trang web phải liên tục được hiện đại hóa và thích ứng với các thiết bị khác nhau. Rõ ràng là nếu một người không thoải mái khi truy cập vào một nguồn tài nguyên cụ thể, anh ta không thể lấy thông tin về sản phẩm hoặc giá cả ở đó, đặt hàng, tìm hiểu về việc giao hàng, thì anh ta sẽ tìm thấy trang web nơi tất cả những điều này có thể thực hiện được. Vì vậy, để giành chiến thắng cuộc thi, điều quan trọng là phải có một nguồn tài nguyên linh hoạt, thuận tiện, đầy đủ chức năng và thú vị.

Phiên bản di động của trang web Android hoặc iOS sẽ giúp bạn thực hiện điều này. Để thực hiện việc này, bạn cần chọn một trong các phương pháp thiết kế lại ở trên - mẫu thích ứng, tạo trang web mới trên tên miền phụ và di chuyển đến trang đó bằng cách chuyển hướng, sử dụng mẫu miễn phí hoặc tạo một ứng dụng di động mà người dùng có thể vào và ở lại trang một cách thuận tiện hơn.

Chủ đề của tháng này là khả năng đáp ứng của trang web, vì vậy chúng tôi quyết định nói nhiều hơn về thiết kế web đáp ứng là gì, tại sao cần thiết và các nguyên tắc cơ bản của thiết kế web đáp ứng là gì.

Thiết kế web thích ứng là một hướng khá mới trong thiết kế tài nguyên web nhưng hiện nay nó là một trong những chỉ số chính đánh giá chất lượng của một trang web. Trong bài viết này, chúng tôi sẽ nói về thiết kế web đáp ứng là gì và nó có thể là gì.

Thiết kế web đáp ứng là gì

Thiết kế web đáp ứng (trong tiếng anh"Thiết kế web đáp ứng") là thiết kế các trang web cung cấp trải nghiệm người dùng tuyệt vời nhiều thiết bị khác nhauà, đã kết nối với Internet.

Điều này có nghĩa là cùng một trang web có thể được xem nhiều nhất các thiết bị khác nhau, bất kể độ phân giải và định dạng màn hình - điện thoại thông minh, máy tính bảng, máy tính xách tay, v.v. Đồng thời, việc xem sẽ thuận tiện như nhau cho tất cả các định dạng - chẳng hạn, người dùng thiết bị di động sẽ không cần phải mở rộng các khu vực riêng lẻ của trang web để không bỏ lỡ liên kết mong muốn.

Thiết kế đáp ứng nhằm mục đích làm cho các trang web và hiển thị nội dung của chúng phù hợp với thiết bị mà chúng được xem.

Tại sao bạn cần thiết kế web đáp ứng?

1) Nhiều loại thiết bị mà bạn có thể truy cập Internet. Hiện nay, có rất nhiều thiết bị được mọi người sử dụng, bao gồm cả việc truy cập Internet. Tất cả các thiết bị này đều khác nhau về kích thước màn hình, độ phân giải và do đó cách hiển thị một trang web trên chúng. Do đó, điều quan trọng là trang web của bạn phải trông đẹp và hiển thị chính xác cho mọi người dùng, bất kể họ đang sử dụng thiết bị nào.

2) Sự phổ biến của các thiết bị di động có truy cập Internet và sự gia tăng lưu lượng truy cập Internet di động. Với sự phổ biến ngày càng tăng của thiết bị di động, số lượng người dùng truy cập các trang web từ chúng đã tăng lên đáng kể, vì vậy bạn không thể đơn giản bỏ qua chúng nữa - đây không phải là một hoặc hai người cứ sáu tháng một lần, đây là một phần quan trọng trong đối tượng của bạn, và họ sẽ cảm thấy thoải mái khi sử dụng trang web của bạn (nếu không họ sẽ không làm điều đó).

3) Thông tin khẩn cấp. Nếu tài nguyên của bạn chứa tin tức/thông tin khẩn cấp và có khả năng cao là người dùng có thể cần đọc thông tin này từ điện thoại (vì họ không có thiết bị nào khác trong tay) khoảnh khắc này thời gian, phải cẩn thận để đảm bảo rằng anh ta có cơ hội thực hiện việc này.

Sự khác biệt giữa trang web đáp ứng và phiên bản di động (ứng dụng) của trang web

Phiên bản di động của trang web và ứng dụng di động, được thiết kế đặc biệt cho nhiều thiết bị di động khác nhau, cũng giải quyết vấn đề dễ dàng xem trang web, nhưng có một số nhược điểm.

1) Mỗi ​​loại hệ điều hành yêu cầu phiên bản ứng dụng/trang web riêng.Điều này đòi hỏi nguồn lực bổ sung, cả thời gian và tiền bạc.

2) Nhu cầu tải ứng dụng.Để sử dụng ứng dụng của bạn, người dùng cần tải xuống ứng dụng đó. Điều này đòi hỏi người dùng phải nỗ lực thêm và nhiều người sẽ không làm điều này trừ khi họ hoàn toàn chắc chắn rằng họ thực sự cần ứng dụng và dự định sử dụng nó thường xuyên.

3) Phân luồng giao thông. Từ quan điểm quảng bá trang web, một ứng dụng di động không thuận tiện vì nó chia tất cả lưu lượng truy cập tài nguyên thành lưu lượng truy cập trang web và lưu lượng ứng dụng, điều này sẽ trông giống như lưu lượng truy cập trang web ít hơn.

4) Sự cần thiết phải tích hợp tài liệu trang web. Trong trường hợp là ứng dụng di động, bạn phải đồng bộ hóa trang web với ứng dụng ( tài nguyên bổ sung) hoặc thực hiện công việc kép để lấp đầy trang web và ứng dụng bằng tài liệu.

không giống ứng dụng di động, thiết kế thích ứng là một địa chỉ trang web, một thiết kế, một hệ thống quản lý và nội dung trang web.

Tất nhiên, thiết kế thích ứng cũng có những nhược điểm, trong đó nhược điểm chính là tính mới tương đối của công nghệ và do đó, thiếu chuyên gia giỏi và kiến ​​thức về thiết kế các trang web đáp ứng.

Nguyên tắc thiết kế đáp ứng

Thiết kế bắt đầu với phiên bản thích ứng trang web dành cho thiết bị di động. Ở giai đoạn này, các nhà thiết kế cố gắng truyền tải chính xác ý nghĩa và ý tưởng chính bằng cách sử dụng màn hình nhỏ và chỉ một cột. Nội dung được giảm bớt nếu cần thiết, loại bỏ các khối thông tin không quan trọng và để lại những thông tin quan trọng nhất.

  • Thiết kế cho thiết bị di động từ những giai đoạn đầu tiên (“di động đầu tiên”);
  • Sử dụng bố cục dựa trên lưới linh hoạt;
  • Sử dụng hình ảnh linh hoạt;
  • Làm việc với các truy vấn phương tiện;
  • Áp dụng cải tiến gia tăng.

Các loại bố cục đáp ứng

Bài viết này trên Habrahabr trình bày các loại bố cục thích ứng chính hiện đang tồn tại.

1) Cao su

Dễ thực hiện và rõ ràng đối với kiểu trình bày trang web của người dùng. Các khối chính được nén theo chiều rộng của màn hình thiết bị di động, điều này là không thể - chúng được sắp xếp lại thành một cuộn băng dài.

2) Chuyển khối

Một cách rõ ràng cho trang web nhiều cột: khi giảm độ rộng màn hình khối bổ sung(thanh bên) được chuyển xuống cuối bố cục.

3) Chuyển đổi bố cục

Phương pháp này thuận tiện nhất khi đọc một trang web từ các thiết bị khác nhau: một bố cục riêng được phát triển cho từng độ phân giải màn hình. Phương pháp này tốn nhiều công sức nên ít phổ biến hơn hai phương pháp trước.


Chuyển đổi bố cục. Đoạn của trang web LukeW Ideation + Design

4) Khả năng thích ứng “ít máu”

Một phương pháp rất đơn giản phù hợp cho các trang web đơn giản. Đạt được chỉ bằng cách chia tỷ lệ hình ảnh và kiểu chữ. Không phổ biến lắm, bởi vì... thiếu tính linh hoạt.


Khả năng thích ứng với ít máu. Một phần của trang web LukeW Ideation + Design

5) Tấm

Một phương pháp đến từ các ứng dụng di động, trong đó thực đơn bổ sung có thể xuất hiện khi chạm vào theo chiều ngang hoặc chiều dọc. Nhược điểm chính- hành động không rõ ràng đối với người dùng: rất hiếm khi thấy điều hướng trên thiết bị di động trên một trang web. Nhưng theo thời gian, phương pháp này có thể trở nên khá phổ biến.


Cần phải nhớ rằng các bố cục được trình bày ở trên không phải là giải pháp phổ quát - đối với mỗi dự án, cần phải chọn phương pháp phù hợp nhất với nhu cầu và khả năng.

Người dùng Internet duyệt các trang web trên các thiết bị khác nhau có màn hình Đa dạng về kích cỡ. Kích thước màn hình liên tục thay đổi, vì vậy điều quan trọng là trang web phải thích ứng với bất kỳ kích thước nào trong số đó. Có hai cách tiếp cận chính để tạo các trang web có thể dễ dàng thích ứng với các loại khác nhau thiết bị:

Thiết kế đáp ứng (RWD) — thiết kế đáp ứng— thiết kế một địa điểm với các giá trị thuộc tính nhất định, ví dụ: lưới linh hoạt bố cục cho phép bố cục giống nhau hoạt động trên các thiết bị khác nhau;

Thiết kế thích ứng (AWD)— thiết kế thích ứng hoặc hiển thị động — thiết kế một trang web với các điều kiện thay đổi tùy thuộc vào thiết bị, dựa trên một số bố cục có chiều rộng cố định.

1. Kỹ thuật thiết kế đáp ứng

Triết lý thiết kế web đáp ứng là trang web thuận tiện để xem từ mọi thiết bị, bất kể kích thước màn hình. cụm từ thiết kế đáp ứngđược phát minh bởi Ethan Marcotte vào năm 2011. tính năng chính thiết kế web đáp ứng - do lưới linh hoạt, bố cục tự động phản hồi các thay đổi về kích thước màn hình, phồng lên hoặc co lại như một quả bóng bay.

Thiết kế đáp ứng(Tiếng Anh) Thiết kế web đáp ứng) kết hợp ba phương pháp - bố trí linh hoạt dựa trên lưới, hình ảnh linh hoạt Và truy vấn phương tiện truyền thông.

Bố cục linh hoạt dựa trên việc sử dụng các đơn vị đo lường tương đối thay vì các giá trị pixel cố định, cho phép điều chỉnh chiều rộng theo không gian có sẵn.

Tính linh hoạt của nội dung văn bảnđạt được bằng cách tính toán kích thước phông chữ tương ứng với kích thước phông chữ mặc định của trình duyệt là 16px, chẳng hạn như cố định cỡ chữ: kích thước tương đối 42px là 42px / 16px = 2.625em.

Vấn đề hình ảnh linh hoạtđã giải quyết bằng quy tắc img (chiều rộng: 100%; chiều rộng tối đa: 100%;) cho tất cả hình ảnh trên trang web. Quy tắc này đảm bảo rằng hình ảnh không bao giờ rộng hơn vùng chứa của chúng và không bao giờ vượt quá kích thước thật của chúng trên màn hình lớn hơn.

Truy vấn phương tiện truyền thông thay đổi kiểu dựa trên đặc điểm của thiết bị liên quan đến hiển thị nội dung, bao gồm loại màn hình, chiều rộng, chiều cao, hướng và độ phân giải. Truy vấn phương tiện tạo ra thiết kế đáp ứng áp dụng các kiểu thích hợp cho từng kích thước màn hình.


Cơm. 1. Thiết kế đáp ứng

Kỹ thuật thiết kế đáp ứng bổ sung

Có thể mở rộng Đồ họa vector - sử dụng hình ảnh svg có tỷ lệ theo bất kỳ kích thước nào mà không làm giảm chất lượng và trông đẹp trên màn hình Retina.

Giao diện thẻ- sử dụng cái gọi là giao diện thẻ - hình chữ nhật với các góc tròn tượng trưng cho vùng chứa nội dung. Các khối như vậy là các đơn vị giao diện khép kín và dễ dàng di chuyển xung quanh bố cục.

Cơm. 2. Pinterest, bố cục dựa trên thẻ

Chỉ để lại những thứ cần thiết- một kỹ thuật tốt, đặc biệt là cho thiết kế đáp ứng. Tạo các giao diện tối giản đáp ứng và thân thiện đang ngày càng trở nên phổ biến hiện nay.

Cơm. 3. Hotellook, sự tối giản trong thiết kế web

Ưu tiên và ẩn nội dung chính xác- sử dụng yếu tố ẩnđiều khiển, đặc biệt đối với các thiết bị có màn hình nhỏ. Cửa sổ bật lên, tab, menu ngoài khung vẽ và các kỹ thuật tương tự khác sẽ giúp giảm số lượng thành phần trên trang. Giải phóng không gian từ yếu tố không cần thiết, bạn sẽ làm cho giao diện trở nên thuận tiện và thân thiện với người dùng.

Tạo một không gian có thể nhấp lớn cho các nút— vùng hoạt động của nút càng lớn thì người dùng càng dễ tương tác với nó.

Thêm tính tương tác vào giao diện của bạn- để phản hồi hành động của người dùng, tạo hành động phản hồi - hoạt ảnh sẽ hoạt động khi di chuột qua một phần tử trên thiết bị máy tính để bàn và khi chạm vào một phần tử trên thiêt bị di động.

2. Tùy chỉnh khung nhìn bằng thẻ meta khung nhìn

ĐẾN trình duyệt di động cho phòng mổ Hệ thống Android và iOS không tự động thay đổi kích thước các trang của trang web, một thẻ đặc biệt sẽ được sử dụng với thuộc tính name="viewport". Thẻ này cho phép bạn thiết lập giá trị cụ thể Vì thông số chiều rộng và quy mô ban đầu:

—init-scale=1 có nghĩa là kích thước trang trong trình duyệt sẽ bằng 100% kích thước khung nhìn. Nghĩa là, mối quan hệ giữa pixel vật lý và css theo pixel sẽ là 1:1;

— width=device-width có nghĩa là chiều rộng trang sẽ bằng 100% chiều rộng cửa sổ của bất kỳ trình duyệt nào. Tức là chiều rộng của trang web tương ứng với chiều rộng của thiết bị nên không cần phải thu nhỏ lại.

TRONG trong ví dụ này nội dung trong cửa sổ trình duyệt sẽ lớn hơn gấp 2 lần so với kích thước vật lý.

Đồng thời gắn thẻ có thể được sử dụng để kiểm soát mức độ người dùng có thể tăng hoặc giảm độ rộng trang:

Mã này sẽ cho phép bạn tăng chiều rộng trang lên giá trị bằng 3 lần chiều rộng của màn hình thiết bị và giảm xuống một nửa chiều rộng của màn hình thiết bị.

Bạn có thể từ chối khả năng mở rộng quy mô của người dùng bằng thuộc tính user-scalable:

3. Mẫu phổ quát

Hầu hết các bố cục được sử dụng để tạo thiết kế web đáp ứng đều thuộc một trong năm loại mẫu được xác định bởi Luke Wroblewski:
Chủ yếu là chất lỏng(Cao su nhất)
Cột thả(Các cột ở dưới nhau),
Bộ chuyển đổi bố cục(Bố cục di chuyển),
Tinh chỉnh nhỏ(Những thay đổi nhỏ)
Tắt Canvas(Tắt màn hình).
Trong một số trường hợp, một trang có thể sử dụng kết hợp các mẫu, chẳng hạn như Thả cột và Tắt Canvas.

3.1. Chủ yếu là chất lỏng

Một bố cục phổ biến bao gồm chủ yếu là lưới cao su. Trên màn hình lớn hoặc có chiều rộng trung bình, kích thước của nó thường không thay đổi; trên màn hình lớn, chỉ điều chỉnh lề. TRÊN màn hình nhỏ lưới cao su khiến bố cục được tính toán lại cho nội dung chính và các cột được đặt bên dưới cột kia. Ưu điểm của mẫu là chỉ yêu cầu một điểm kiểm soát giữa màn hình nhỏ và màn hình lớn.

3.2. Cột thả

Các cột được đặt lần lượt theo chiều dọc nếu chiều rộng của cửa sổ không thể hiển thị hết nội dung. Kết quả là các cột sẽ được định vị theo chiều dọc bên dưới nhau. Việc lựa chọn điểm dừng cho mẫu bố cục này tùy thuộc vào nội dung và được xác định riêng cho từng phương án thiết kế.

3.3. Bộ chuyển đổi bố cục

Hầu hết mẫu đáp ứng, vì nó cung cấp nhiều điểm kiểm soát cho các màn hình có độ rộng khác nhau. Sự khác biệt chính với bố cục này là thay vì tính toán lại cây kết xuất và đặt các cột bên dưới nhau, nội dung sẽ được di chuyển. Do sự khác biệt đáng kể giữa chính Điểm kiểm soát, việc duy trì bố cục này khó khăn hơn và bạn có thể phải thay đổi không chỉ bố cục tổng thể của nội dung mà còn cả các thành phần của nó.

3.4. Tinh chỉnh nhỏ

Mẫu thực hiện những thay đổi nhỏ đối với bố cục, chẳng hạn như điều chỉnh kích thước phông chữ, thay đổi kích thước hình ảnh hoặc di chuyển nội dung. Nó hoạt động tốt trên các bố cục một cột, chẳng hạn như các trang một trang và các bài viết có nhiều văn bản.

3.5. Tắt Canvas

Nội dung hiếm khi được sử dụng, chẳng hạn như các thành phần điều hướng hoặc menu ứng dụng, sẽ được đặt ngoài màn hình và chỉ hiển thị khi kích thước màn hình cho phép. Trên màn hình nhỏ hơn, nội dung sẽ mở ra bằng một cú nhấp chuột.

4. Thiết kế đáp ứng

Không giống như thiết kế đáp ứng, thiết kế thích ứng(Thiết kế web thích ứng) tập trung vào kích thước thiết bị. Nó sử dụng nhiều bố cục tĩnh cho các loại thiết bị khác nhau (thiết bị di động, máy tính bảng, máy tính để bàn), dựa trên các điểm điều khiển (quay). Nghĩa là, bố cục tải ở kích thước cửa sổ trình duyệt thiết bị nhất định và quá trình chuyển đổi giữa các bố cục xảy ra đột ngột thay vì suôn sẻ.

Thông thường, bố cục đáp ứng có sáu tùy chọn bố cục tùy thuộc vào chiều rộng màn hình:
320
480
760
960
1200
1600.

TRONG bố cục thích ứng Chức năng đóng vai trò chính, nghĩa là khi tạo thiết kế, các tính năng của thiết bị sẽ được tính đến, chẳng hạn như Kiểm soát cảm ứng dành cho thiết bị di động hoặc không gian rộng lớn dành cho màn hình máy tính để bàn.

Kỹ thuật thiết kế đáp ứng cơ bản

Giữ nó nhất quán- bất kỳ trang web nào cũng nên tạo mối quan hệ tin cậy với người dùng để họ cảm thấy thoải mái khi điều hướng và tương tác với họ. Thiết kế nhất quán có nghĩa là khi chuyển sang một trang khác trên một trang, người dùng không có cảm giác như đang ở một trang khác. Chú ý đến các chi tiết nhỏ, xây dựng hệ thống phân cấp trực quan, làm nổi bật các yếu tố quan trọng in đậm. Sử dụng nối tiếp bảng màu trên toàn bộ trang web, hãy sử dụng lại các phần tử giống nhau cho các tình huống khác nhau, chẳng hạn như cùng một thiết kế thông báo bật lên.

Sử dụng lưới— cấu trúc 12 cột thích hợp hơn để kiểm soát độ rộng của các cột và khoảng đệm giữa chúng.

5. Sự khác biệt giữa thiết kế web responsive và responsive là gì


Cơm. 4. Thiết kế đáp ứng và thích ứng trên các thiết bị khác nhau

Để tạo bố cục đáp ứng, hãy sử dụng truy vấn phương tiện và kích thước tương đối các phần tử lưới được chỉ định bằng cách sử dụng %. Trong thiết kế đáp ứng, tập lệnh phía máy chủ trước tiên xác định loại thiết bị mà người dùng đang cố truy cập trang web trên (máy tính để bàn, điện thoại hoặc máy tính bảng), sau đó tải chính xác phiên bản của trang được tối ưu hóa nhất cho trang web đó. Các phần tử lưới có kích thước px cố định.

Do đó, sự khác biệt chính giữa các kỹ thuật này là thiết kế đáp ứng - một bố cục cho tất cả các thiết bị, thiết kế thích ứng - một bố cục cho từng loại thiết bị.

6. Các dịch vụ và công cụ hữu ích

Trình mô phỏng Android dành cho Windows, Linux và Mac OS X. Trình mô phỏng iOS chỉ khả dụng cho Người dùng Mac OS X và là một phần của gói Xcode (bạn có thể tải xuống miễn phí từ Ứng dụng Mac Cửa hàng).

Tập lệnh PHP chạy trên bất kỳ trang web nào sẽ phát hiện kích thước màn hình và điều chỉnh kích thước hình ảnh cho phù hợp, dẫn đến kích thước hình ảnh nhỏ trên màn hình nhỏ.

Các bảng tương ứng giữa kích thước vật lý của thiết bị và giá trị CSS về chiều cao và chiều rộng, cũng như giá trị tỷ lệ pixel cho thiết bị di động.

Một bộ sưu tập các trang web sử dụng truy vấn phương tiện và thiết kế web đáp ứng.

CSS framework dựa trên bố cục 12 cột, tối đa 960px. Được hỗ trợ bởi Chrome, Safari, Firefox, IE 7 trở lên, các phiên bản trình duyệt dành cho thiết bị di động.

Một bộ công cụ để phát triển các ứng dụng web. ÍT ngôn ngữ, Bố cục thích ứng 12 cột, hỗ trợ thiết bị di động, máy tính bảng và màn hình, nhiều thành phần, nút bấm, menu thả xuống, phong cách riêng trường đầu vào, danh sách, tiêu đề, nhãn, biểu tượng, cảnh báo, tab, thanh tiến trình, chú giải công cụ, đàn accordion, băng chuyền, v.v., các plugin Javascript khác nhau, hỗ trợ Giàn giáo, bao gồm cả ứng dụng kiểu Bootstrap cho HTML đã được tạo.

Sự hiện diện của thiết kế thích ứng là một điều cần thiết - cuộc sống đã chứng minh điều này với sự thành công của nó; không có Mobile Joomla nào mang lại hiệu quả như việc thích ứng trang web trực tiếp. Hôm nay tôi sẽ cho bạn biết cách tạo một thiết kế đáp ứng thông qua chỉnh sửa Kiểu CSS sử dụng đầu và ngón tay của bạn. Sẽ không thể trình bày chi tiết mọi thứ vì mỗi mẫu đều có sắc thái riêng, nhưng tôi sẽ tạo động lực để bắt đầu thích ứng.

Thích ứng cho máy tính để bàn

Đầu tiên, chúng tôi điều chỉnh nó cho máy tính để bàn. Đây là giai đoạn cơ bản để bắt đầu khiêu vũ với tambourine. Nhiều người nhận thức sai lầm về thế giới, nghĩ rằng với việc hiển thị một trang web trên máy tính thông thường họ không gặp vấn đề gì vì ai đó đã thiết kế mẫu và nó trông mượt mà ở độ phân giải bình thường. Tùy thuộc vào độ phân giải của màn hình của bạn, vâng, nhưng còn màn hình lớn hơn, Bạn trông như thế nào với các pixel tuyệt đối và trên màn hình có độ phân giải 1920x1080? Mục đích của việc điều chỉnh thiết kế là để hiển thị trang web bình thường trên thiết bị di động và tránh mọi sự cố trên màn hình lớn.

Chúng ta đang làm gì vậy? Điều chính là dịch mọi thứ giá trị lớn V. mẫu css từ pixel (px) đến tỷ lệ phần trăm (%). Có một số quy tắc ở đây:

  1. - Chúng ta chỉ thay đổi px theo % đối với giá trị lớn, không cần thay đổi 5 px thành 1% (ví dụ),
  2. - Thực hiện tất cả công việc thông qua Firebug, sau đó chuyển các giá trị sang đời thực.

Một chút cho hiểu biết chung. Bạn có một trang web có chiều rộng trang là 1000 px, nó có ba khối - một thanh trung tâm 800 px và hai thanh trang bên 100 px. Điều này có nghĩa là sau khi thay thế bằng tỷ lệ phần trăm, kích thước trang sẽ là 100%, vùng chứa trung tâm sẽ là 80% và các khối bên sẽ là 10%. Thô lỗ, nhưng có thể hiểu được. Bây giờ cụ thể hơn một chút.

Tôi có trước khi thích ứng (được lưu vào lịch sử tập tin cũ CSS), vùng chứa chính được tạo kiểu như thế này:

#container(margin:0 auto;width:1100px; …

Sau khi thích ứng nó trở nên như thế này:

#container(margin:0 auto;width:77%;overflow: ẩn !important; …

Menu trên cùng đã thay đổi từ:

Menu trên cùng>ul>li ul(width:155px; …

Menu trên cùng>ul>li ul(width:90%; …

Và phần bù của khối nội dung được triển khai bằng:

#content(lề:0 220px; …

#content(lề:0 20% …

Hãy chú ý đến mã:

tràn: ẩn !quan trọng;

Chúng tôi sử dụng nó để vô hiệu hóa tính năng cuộn ngang, điều này rất hữu ích cho việc thích ứng với thiết bị di động; đôi khi chỉ cho biết việc cấm cuộn ngang bằng cách sử dụng:

tràn-x: ẩn !quan trọng;

Thực hiện tất cả công việc thông qua Firebug hoặc thanh tra Google, kiểm tra bằng mắt - trang web sẽ trông giống như vậy sau khi chuyển đổi px thành %. Bạn chưa cần phải thu nhỏ màn hình; chúng tôi chưa chuyển sang chế độ thích ứng trên thiết bị di động nhưng chúng tôi đã thực hiện công việc cơ bản cho màn hình lớn.

CSS cho thiết bị di động

Nhân tiện, cơ sở dữ liệu đã được tạo, đây là giai đoạn khó khăn nhất; bây giờ chúng ta cần đảm bảo rằng trang web được hiển thị chính xác trên tất cả các thiết bị di động. Có rất ít thao tác trước đó, vì dưới màn hình nhỏ Không thể nén mọi thứ thành tỷ lệ phần trăm. Đồng ý rằng không thể nhìn thấy thanh trang web rộng 10% trên điện thoại thông minh có độ phân giải 320 px.

Chúng tôi sẽ cần sử dụng màn hình @media và thực hiện thay đổi kiểu dáng cho các thiết bị có độ phân giải cụ thể. Đầu tiên tôi xác định bằng cách giảm màn hình trình duyệt ở độ phân giải mà tôi gặp vấn đề về hiển thị. Bằng cách thu hẹp màn hình, tôi tìm thấy quan điểm của mình về “độ cong”, nó bắt đầu ở chiều rộng 1000px, có nghĩa là bạn cần đăng ký các kiểu di động chính từ đây - mọi thứ sẽ được hiển thị nhiều hơn theo kiểu của máy tính để bàn thông thường, và ít hơn trong các phong cách riêng biệt.

Ví dụ màn hình @media và

Tôi đã viết CSS cho thiết bị di động trên Mẫu Joomla 1.5 như thế này:

@media screen và (max-width:500px)(body, tbody(-moz-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;)

Màn hình @media và (max-width:400px)(td(word-break:break-all;)

@media screen và (max-width:1000px)(td(word-break:break-all;).page-numbers, #footer, #navigation, #header,.logo,.nav-box (hiển thị: không ! quan trọng ;) #content (vị trí: auto; width: 80%;margin-bottom: 0;margin-left: 10%;margin-right: 20%;) #container ( width: 90% !important;).content-box (widht:110%).content-box h1 (font-size: 130%;).content-box h2 (font-size: 110%;).content-box h3 (font-size: 120%;).content -box h4 (cỡ chữ: 100%;) .top-menu>div (đệm-phải: 0px !important;) img(max-width:96% !important;height:auto !important;)

Một số chi tiết cụ thể về mã.

Khi chiều rộng màn hình nhỏ hơn 1000 px, các thanh trang bên, tiêu đề, phân trang và chân trang sẽ ngừng hiển thị. Theo tôi, chúng không cần thiết trong phiên bản di động. Đây là những gì mã thực hiện:

Số trang, #footer, #navigation, #header,.logo,.nav-box (hiển thị: không có !quan trọng;).

Theo mặc định, trong phiên bản di động Joomla 3 trở lên, các khối bên đi xuống, kéo dài trang đến mức không phù hợp, vì vậy ngay cả trên các công cụ mới, bạn vẫn có thể sửa một số thứ theo cách thủ công.

Các giá trị khác cũng được chỉ định cho các khối của vùng chứa chính và cửa sổ nội dung, đồng thời đầu ra của H1-H4 được chuyển đổi thành tỷ lệ phần trăm (pixel phù hợp với tôi cho máy tính để bàn). Đầu ra của menu trên cùng cũng đã được sửa chữa (may mắn thay, nó cần được giảm thiểu, nhưng điều này không quan trọng và tôi sẽ thực hiện sau) và cách hiển thị hình ảnh đã được thay đổi:

img(độ rộng tối đa:96% !quan trọng;chiều cao:tự động !quan trọng;).

Đối với họ, kích thước hình ảnh tối đa về chiều rộng được chỉ định là 96% (có phần thụt lề đẹp mắt) và chiều cao được đặt tự động.

Các chi tiết cụ thể đã kết thúc, một lần nữa ý nghĩa chungđiều chỉnh trang web (thiết kế) bằng CSS.

  1. - Thay đổi giá trị px lớn thành %,
  2. - Chúng tôi đăng ký riêng màn hình @media và cho thiết bị di động.

Qua màn hình @media và đảm bảo đóng những cái không cần thiết khối di động cho đầu ra, nhưng chuyển đổi thành % những giá trị không được hiển thị chính xác vì chúng được để lại bằng pixel trong phiên bản CSS dành cho máy tính để bàn.

Kết quả là trải nghiệm người dùng khi làm việc với Joomla Mobile là 65-70%, với thiết kế responsive sử dụng CSS là 99%. Kết luận rất rõ ràng: Yandex và Goole chưa được kiểm tra khả năng thích ứng, nhưng giờ đây chúng đang vượt qua một cách thành công.

Tạo một mẫu trang web đáp ứng là điều dễ dàng, nhưng việc giữ cân bằng các yếu tố ở mọi điểm trong toàn bộ mẫu là một nghệ thuật thực sự. Hướng dẫn này giới thiệu 5 kỹ thuật sử dụng trong CSS cho một mẫu đáp ứng. Có rất tính chất đơn giản CSS như các giá trị chiều rộng tối thiểu, chiều rộng tối đa, tràn và tương đối, nhưng chúng đều đóng vai trò quan trọng trong việc phát triển các thiết kế đáp ứng.

1. Video thích ứng

Thủ thuật CSS này cho phép video được nhúng kéo dài đến các ranh giới được chỉ định.

Video ( vị trí: tương đối; đệm dưới cùng: 56,25%; chiều cao: 0; tràn: ẩn; ) .video iframe, đối tượng .video, .video nhúng ( vị trí: tuyệt đối; trên cùng: 0; trái: 0; chiều rộng: 100% ; chiều cao: 100%)

2. Chiều rộng tối thiểu và tối đa

Thuộc tính max-width cho phép bạn đặt chiều rộng tối đa của một phần tử. Nó nên được sử dụng để ngăn một phần tử mở rộng ra ngoài một khung nhất định.

Vùng chứa có thuộc tính chiều rộng tối đa

Ví dụ bên dưới xác định kích thước vùng chứa là 800px nhưng đặt giới hạn kích thước là 90%.

Vùng chứa (chiều rộng: 800px; chiều rộng tối đa: 90%; )

Hình ảnh thích ứng

Bạn có thể làm cho hình ảnh tự động thay đổi kích thước đến kích thước tối đa bằng cách sử dụng các thuộc tính max-width:100% và Height:auto.

Img (chiều rộng tối đa: 100%; chiều cao: tự động; )

Đoạn mã trên là dành cho hình ảnh thích ứng hoạt động trong IE7 và IE9, nhưng không hoạt động trong IE8. Để khắc phục tình trạng này, bạn cần thêm thuộc tính width:auto. Bạn có thể sử dụng điều kiện quy tắc CSS dành riêng cho IE8 hoặc thủ thuật dưới đây dành cho IE:

@media \0screen ( img ( width: auto; /* ví dụ 8 */ ) )

thuộc tính chiều rộng tối thiểu

Thuộc tính chiều rộng tối thiểu ngược lại với thuộc tính chiều rộng tối đa. Nó đặt chiều rộng tối thiểu có thể có của phần tử. Dưới đây là ví dụ về cách sử dụng thuộc tính min-width để ngăn trường đầu vào trở nên quá nhỏ khi thu nhỏ.

3. Giá trị tương đối

TRONG mẫu thích ứng cách sử dụng giá trị tương đối có thể đơn giản hóa đáng kể mã CSS và cải thiện vẻ bề ngoài thiết kế.

Các trường tương đối

Dưới đây là ví dụ về các nhận xét sử dụng độ rộng tương đối của lề trái để tạo thụt lề trong cấu trúc cây. Thay vì giá trị tuyệt đối tính bằng px, giá trị phần trăm được sử dụng cho cấp độ tiếp theo trong danh sách. Ở phía bên trái của hình, bạn có thể thấy điều đó trên thiết bị di động không gian có sẵnđối với các phần tử danh sách có thể không đủ để hiển thị bình thường nếu sử dụng giá trị tuyệt đối.

Cỡ chữ tương đối

Sử dụng các giá trị tương đối cho kích thước phông chữ (em hoặc %) bạn có thể dễ dàng đạt được những thay đổi thích hợp về chiều cao dòng và kích thước thụt lề khi điều chỉnh mẫu cho phù hợp với kích thước màn hình thiết bị. Ví dụ: tất cả các phần tử liên quan sẽ tự động được thay đổi kích thước khi bạn đặt kích thước phông chữ mới cho phần tử gốc.

Phần đệm tương đối

Hình dưới đây thể hiện lợi ích của việc sử dụng giá trị % tương đối cho phần đệm. Khối bên trái có không gian không cân bằng khi áp dụng giá trị px tuyệt đối. Khối bên phải có góc nhìn đẹp với việc lấp đầy nội dung theo tỷ lệ.

4. Thủ thuật với thuộc tính tràn:ẩn

Bạn có thể ngăn văn bản bao quanh một phần tử bằng thuộc tính tràn. Rất đơn giản và Cách hữu ích. Bạn có thể mở gói văn bản xung quanh phần tử trước đó và duy trì cấu trúc của nội dung.

Thuộc tính chiều rộng tối đa giúp bạn đặt văn bản không thể ngắt dòng (chẳng hạn như một URL dài) vào nhiều dòng thay vì chỉ một dòng.

Từ ngắt ( word-wrap: break-word; )