Thiết kế web thích ứng và đáp ứng. Mẫu thích ứng cho chính WordPress. Khả năng thích ứng “ít máu”

Xin chào những vị khách bình thường và những độc giả thường xuyên của trang blog!

Trong quá trình tồn tại của trang web này, tôi đã thay đổi mẫu nhiều lần và thậm chí còn tạo mẫu của riêng mình từ đầu.
Một trong những nhiệm vụ chính khi chọn mẫu mới là bố cục thích ứng của trang web cho mọi độ phân giải màn hình.

Sơ lược về bài viết:

Trong một bài viết trước tôi đã viết về lý do tại sao nó lại cần thiết. Nhưng làm thế nào để đạt được khả năng thích ứng cao này?

Đối với điều này có những cách khác. Một số sử dụng javascript, một số sử dụng cái gì đó khác. Nhưng tôi tin rằng cách đơn giản nhất và Đúng cách là một thích nghi sử dụng CSS.

Cách tạo bố cục trang web đáp ứng

Trước hết, nếu bạn bắt đầu trang điểm thiết kế thích ứng trang web, hãy chèn đoạn mã sau vào giữa các thẻ:

Tôi thật ngu ngốc khi đã không làm điều này ngay lập tức khi tôi đang cố gắng tạo một bố cục trang web thích ứng!!!
Vấn đề với các trình duyệt di động là việc mở rộng bố cục trang web, thậm chí cả những bố cục thích ứng.

Hãy tưởng tượng, tôi vẽ một thiết kế, sau đó viết ra tất cả các kiểu và truy vấn cần thiết, kiểm tra khả năng thích ứng của trang web ở các độ phân giải khác nhau. Tất cả trông đều ổn! Nhưng khi tôi mở blog trên điện thoại thông minh của mình, tôi thấy trang web đã bị thu nhỏ lại. Nó không thích ứng với thiết bị di động mà chỉ đơn giản là giảm kích thước phông chữ, hình ảnh, v.v.

Làm sao vậy? Tôi bắt đầu kiểm tra kỹ tất cả các kiểu để xem liệu tôi đã viết các lớp một cách chính xác hay chưa và cuối cùng tôi đã kiểm tra độ rộng của cửa sổ trình duyệt bằng px bằng cách sử dụng javascript. Tôi đã bị sốc. Khi kiểm tra trên máy tính xách tay, tôi nhận được kết quả là 1024px và tôi cũng nhận được kết quả tương tự khi mở trang web trên điện thoại thông minh!

Nhưng điều này không thể được!

Hóa ra là nếu bạn không viết mã mà tôi đã chỉ ra ở trên, trình duyệt trên thiết bị di động sẽ không hiểu rằng trang web có khả năng thích ứng và chỉ cố gắng thu nhỏ trang web sao cho phù hợp. màn hình nhỏđiện thoại di động

Vì sự ngu ngốc và kém cỏi của mình, tôi đã đánh mất rất nhiều thời gian. Nhưng bây giờ tôi nhớ mãi))).

Thích ứng Bố cục CSS truy vấn phương tiện truyền thông

Để làm cho nó phản hồi nhanh bằng CSS, bạn cần sử dụng truy vấn phương tiện.

Làm như thế nào? Vâng, rất đơn giản. TRONG tập tin CSS bạn cần viết các truy vấn như:

@media screen và (min-width: 1440px) và (max-width: 1599px)( )

Mã này có nghĩa là các kiểu được đặt giữa “( )” sẽ hoạt động đối với các màn hình có chiều rộng tối thiểu là 1440px và tối đa là 1599px.

Nghĩa là, những kiểu thành phần trang web phải được điều chỉnh tùy theo độ phân giải màn hình phải được viết riêng cho từng chiều rộng màn hình có thể.

nhất quyền quan trọng màn hình, với bố cục thích ứng

320 px - Thiết bị di động (hướng dọc);
480 px - Thiết bị di động (hướng ngang);
600 px - Máy tính bảng nhỏ;
768 px - Máy tính bảng (hướng dọc);
1024 px - Máy tính bảng (hướng ngang)/Netbook;
1280 px trở lên - PC.

Chính những quyền này cần được nhấn mạnh và trao cho Đặc biệt chú ý với bố cục thích ứng. Đây là những loại độ phân giải màn hình phổ biến nhất.

thiết kế đáp ứng bootstrap

Rất thuận tiện để sử dụng để tạo thích ứng bố cục khởi động. Sự tiện lợi là tất cả các kiểu điều chỉnh khối, nút, bảng, v.v. đều có thể thực hiện được. đã được đăng ký trong boottpap. Bạn chỉ cần tìm ra lớp nào để gán cho phần tử nào.

Để bắt đầu, hãy tải xuống phiên bản bootstrap mới nhất và kết nối nó với trang web của bạn. Xin lưu ý rằng việc kết nối các kiểu và tập lệnh với WordPress có những đặc điểm riêng.

Bố cục trên Bootstrap khác ở chỗ chiều rộng của khối hoặc màn hình được chia thành 12 phần bằng nhau. Và bằng cách chỉ định một lớp nhất định cho một khối, bạn có thể đặt chiều rộng của khối bằng số phần được yêu cầu.

Ví dụ: thiết kế này sẽ cho phép bạn phân bổ một khối rộng cho nội dung rộng 8 phần và một khối hẹp cho thanh bên rộng 4 phần:

Chiều rộng của các khối sẽ được tính toán tự động tùy thuộc vào chiều rộng của màn hình. Và khi xem trên thiết bị di động, các khối này sẽ dịch chuyển theo nhau.

Bạn cũng có thể điều chỉnh lại khoảng cách của khối từ cạnh bằng cách số lượng yêu cầu các bộ phận. Ví dụ như thiết kế này:

Một khối rộng 10 phần sẽ được tạo với phần thụt vào bên trái là 1 phần của màn hình.

Nếu bạn nhìn vào nó, làm việc với bootstrap khiến công việc diễn ra rất nhanh. Hơn nữa, những phong cách này chắc chắn hoạt động chính xác và sẽ không có gì sai lệch trên trang web.

Trong tương lai tôi dự định đăng một số bài học về cách làm việc với bootrap. Vì vậy, tôi khuyên bạn không nên bỏ lỡ khoảnh khắc này.

Kiểm tra khả năng thích ứng của trang web

Nhưng câu hỏi đặt ra: làm thế nào để kiểm tra khả năng thích ứng của trang web? Bây giờ bạn đã viết các truy vấn phương tiện bằng CSS, kết nối bootstrap và sử dụng các lớp cần thiết. Làm cách nào bạn có thể kiểm tra xem trang web có thích ứng chính xác ở mọi độ phân giải màn hình không?

Rất chính xác và quan trọng nhất dịch vụ miễn phí, điều này xứng đáng nhận được sự tôn trọng và biết ơn từ các quản trị viên web và nhà thiết kế bố cục, những người xử lý bố cục trang web thích ứng.

Vâng, bạn thích bài viết như thế nào? Tất cả rõ ràng? Nếu không, hãy viết bình luận, chúng ta sẽ cùng nhau tìm ra.

Đúng vậy, để tạo ra một thiết kế trang web đáp ứng, bạn cần phải làm việc chăm chỉ. Nhưng những nỗ lực này sẽ được đền đáp bằng thái độ tích cực đối với trang web của bạn từ các công cụ tìm kiếm và quan trọng nhất là khách truy cập vào trang web của bạn.

Ngày nay, hầu hết mọi người truy cập Internet thông qua các thiết bị di động - máy tính bảng, điện thoại và 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ủ khái niệm cụ thể này, chẳng hạn như Google Corporation, nơi có phiên bản di động của trang web có thiết kế đáp ứ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 có khả năng tắt phiên bản điện thoại- 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, xét về những nhược điểm được liệt kê, nó phù hợp với các doanh nghiệp nhỏ, tài nguyên đơ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. Anh ấy nổi tiếng trong số cửa hàng trực tuyến lớn, ví dụ: 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.

Chắc chắn, phương pháp này hầu như không phù hợp với các nguồn tài nguyên quan 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 có đầy đủ 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 nên đơn giản và sạch sẽ. 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 sẻ không gian màn hình nhỏ thành những 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 len đề 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 hoàn thành

Đ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ể sẽ được xem trên một 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 một 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 nếu Chúng ta đang nói về về cửa hàng trực tuyến.

Một số thống kê

Khi nói về việc điều chỉnh 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 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ỉ có một phần nhỏ thứ 5 được sử dụng.

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

Hôm 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 đó, để phấn đấu 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 sử dụng 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 ứng dụng di động mà người dùng có thể truy cập thuận tiện hơn và ở lại trang.

Bố cục thích ứng thay đổi thiết kế trang tùy thuộc vào hành vi của người dùng, nền tảng, kích thước màn hình và hướng thiết bị và là một phần không thể thiếu trong quá trình phát triển web hiện đại. Nó cho phép bạn tiết kiệm đáng kể và không phải vẽ thiết kế mới cho mỗi độ phân giải, nhưng thay đổi kích thước và vị trí của từng phần tử.

Bài viết này sẽ xem xét các yếu tố chính của trang web và cách điều chỉnh chúng.

Điều chỉnh độ phân giải màn hình

Về nguyên tắc, bạn có thể chia các thiết bị thành các loại khác nhau và thiết kế riêng cho từng loại, nhưng việc này sẽ mất quá nhiều thời gian và ai biết được tiêu chuẩn nào sẽ có trong 5 năm tới? Hơn nữa, theo thống kê, chúng ta có đầy đủ các giải pháp khác nhau:

Rõ ràng là chúng tôi sẽ không thể tiếp tục thiết kế riêng cho từng thiết bị. Nhưng sau đó phải làm gì?

Giải pháp từng phần: làm mọi thứ linh hoạt

Tất nhiên là không Cách hoàn hảo, nhưng nó khắc phục được hầu hết các vấn đề.

Ethan Marcotte đã tạo một mẫu đơn giản thể hiện việc sử dụng bố cục đáp ứng:

Thoạt nhìn có vẻ như mọi thứ đều dễ dàng, nhưng thực tế không phải vậy. Hãy nhìn vào biểu tượng:

Nếu bạn giảm toàn bộ hình ảnh, dòng chữ sẽ không thể đọc được. Do đó, để lưu logo, hình ảnh được chia thành hai phần: phần thứ nhất (hình minh họa) được dùng làm nền, phần thứ hai (logo) thay đổi kích thước tương ứng.

Phần tử h1 chứa hình ảnh làm nền và hình ảnh được căn chỉnh theo nền của vùng chứa (tiêu đề).

Hình ảnh linh hoạt

Làm việc với hình ảnh là một trong những vấn đề quan trọng nhất khi làm việc với thiết kế đáp ứng. Có nhiều cách để thay đổi kích thước hình ảnh và hầu hết chúng đều khá đơn giản để thực hiện. Một giải pháp là sử dụng độ rộng tối đa trong CSS:

Img (độ rộng tối đa: 100%;)

Chiều rộng tối đa của hình ảnh là 100% chiều rộng của màn hình hoặc cửa sổ trình duyệt, do đó chiều rộng càng nhỏ thì hình ảnh càng nhỏ. Lưu ý rằng max-width không được hỗ trợ trong IE, vì vậy hãy sử dụng width: 100% .

Phương pháp được trình bày là một lựa chọn tốt để tạo hình ảnh thích ứng, nhưng bằng cách chỉ thay đổi kích thước, chúng ta sẽ giữ nguyên trọng lượng của hình ảnh, đó là lý do tại sao thời gian tải sẽ lâu hơn. thiêt bị di động sẽ tăng.

Một cách khác: hình ảnh đáp ứng

Kỹ thuật được Filament Group giới thiệu không chỉ thay đổi kích thước hình ảnh mà còn nén độ phân giải của hình ảnh trên màn hình nhỏ để tăng tốc độ tải.

Kỹ thuật này yêu cầu một số tệp có sẵn trên Github. Đầu tiên chúng ta lấy tệp JavaScript ( rwd-images.js), tài liệu .htaccess Và rwd.gif(tệp hình ảnh). Sau đó, chúng tôi sử dụng một số HTML để liên kết các độ phân giải lớn và nhỏ: đầu tiên hình ảnh nhỏ với tiền tố .r(để cho thấy rằng hình ảnh phải phản hồi), sau đó liên kết tới hình ảnh lớn sử dụng dữ liệu-fullsrc:

Đối với bất kỳ màn hình nào rộng hơn 480 px, hình ảnh có độ phân giải cao hơn sẽ được tải ( lớnRes.jpg) và trên màn hình nhỏ nó sẽ tải ( nhỏRes.jpg).

Trên iPhone và iPod cảm ứng có một tính năng đặc biệt: một thiết kế được tạo ra cho màn hình lớn, sẽ chỉ thu nhỏ trong trình duyệt có độ phân giải nhỏ mà không cần cuộn hoặc bổ sung bố cục di động. Tuy nhiên, hình ảnh và văn bản sẽ không hiển thị:

Để giải quyết vấn đề này, hãy sử dụng thẻ meta:

Nếu tỷ lệ ban đầu bằng 1 thì chiều rộng của hình ảnh sẽ bằng chiều rộng của màn hình.

Cấu trúc bố cục trang có thể tùy chỉnh

Đối với những thay đổi đáng kể về kích thước trang, bạn có thể cần thay đổi cách sắp xếp tổng thể của các thành phần. Thật thuận tiện để làm điều này thông qua tập tin riêng biệt với các kiểu hoặc hiệu quả hơn là thông qua truy vấn phương tiện CSS. Sẽ không có bất kỳ vấn đề gì vì hầu hết các kiểu dáng sẽ vẫn giữ nguyên và chỉ một số ít sẽ thay đổi.

Ví dụ, bạn có tập tin chính với các kiểu xác định #wrapper , #content , #sidebar , #nav cùng với màu sắc, nền và phông chữ. Nếu kiểu chính làm cho bố cục của bạn quá hẹp, ngắn, rộng hoặc cao, bạn có thể xác định điều này và đưa vào các kiểu mới.

style.css (chính):

/* Các kiểu cơ bản sẽ được kế thừa bởi style sheet con */ html,body( nền... font... color... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Các phần tử cấu trúc */ #wrapper( width: 80%; lề: 0 auto; nền: #fff; đệm: 20px; ) #content( width: 54%; float: left; lề-phải: 3%; ) # sidebar-left( chiều rộng: 20%; float: trái; lề phải: 3%; ) # sidebar-right( chiều rộng: 20%; float: left; )

mobile.css (con):

#wrapper( width: 90%; ) #content( width: 100%; ) #sidebar-left( width: 100%; clear: cả hai; /* Kiểu bổ sung cho thiết kế mới */ border-top: 1px Solid #ccc ; lề trên: 20px; ) #sidebar-right( width: 100%; clear: cả hai; /* Kiểu bổ sung cho bố cục mới của chúng tôi */ border-top: 1px Solid #ccc; lề-top: 20px; )

TRÊN màn hình rộng bên trái và bên phải mặt bên phù hợp tốt ở bên cạnh. Trên màn hình hẹp hơn, các khối này được đặt chồng lên nhau để thuận tiện hơn.

Truy vấn phương tiện CSS3

Hãy xem cách bạn có thể sử dụng truy vấn phương tiện CSS3 để tạo ra các thiết kế đáp ứng. chiều rộng tối thiểu chỉ định chiều rộng tối thiểu của cửa sổ trình duyệt hoặc màn hình mà các kiểu nhất định sẽ được áp dụng. Nếu bất kỳ giá trị nào nhỏ hơn min-width thì kiểu sẽ bị bỏ qua. chiều rộng tối đa thì ngược lại.

@media screen và (min-width: 600px) ( .hereIsMyClass ( width: 30%; float: right; ) )

Truy vấn phương tiện sẽ chỉ hoạt động khi chiều rộng tối thiểu lớn hơn hoặc bằng 600 px.

@media screen và (độ rộng tối đa: 600px) ( .aClassforSmallScreens ( clear: cả hai; cỡ chữ: 1.3em; ) )

Trong trường hợp này lớp ( aClassforSmallscreens) sẽ hoạt động khi chiều rộng màn hình nhỏ hơn hoặc bằng 600 px.

Mặc dù chiều rộng tối thiểu và chiều rộng tối đa có thể áp dụng cho cả chiều rộng màn hình và chiều rộng cửa sổ trình duyệt, nhưng chúng tôi có thể chỉ cần làm việc với chiều rộng thiết bị. Ví dụ: bỏ qua các trình duyệt được mở trong một cửa sổ nhỏ. Bạn có thể sử dụng chiều rộng thiết bị tối thiểu và chiều rộng thiết bị tối đa cho việc này:

@media screen và (max-device-width: 480px) ( .classForiPhoneDisplay ( font-size: 1.2em; ) ) @media screen và (min-device-width: 768px) ( .minimumiPadWidth ( clear: cả hai; lề dưới : 2px rắn #ccc; ) )

Đặc biệt đối với iPad, truy vấn phương tiện có thuộc tính định hướng, giá trị của nó có thể là phong cảnh(ngang), hoặc chân dung(thẳng đứng):

Màn hình @media và (hướng: ngang) ( .iPadLandscape ( chiều rộng: 30%; float: phải; ) ) @media màn hình và (hướng: dọc) ( .iPadPortrait ( clear: cả hai; ) )

Bạn cũng có thể kết hợp các giá trị truy vấn phương tiện:

@media screen và (min-width: 800px) và (max-width: 1200px) ( .classForaMediumScreen ( nền: #cc0000; width: 30%; float: right; ) )

Mã này sẽ chỉ được thực thi cho màn hình hoặc cửa sổ trình duyệt có chiều rộng từ 800 đến 1200 px.

Tải một biểu định kiểu cụ thể cho những nghĩa khác nhau truy vấn phương tiện có thể được thực hiện như thế này:

JavaScript

Nếu trình duyệt của bạn không hỗ trợ truy vấn phương tiện CSS3 thì việc thay thế kiểu có thể được thực hiện bằng sử dụng jQuery:

$(document).ready(function())( $(window).bind("resize", thay đổi kích thướcWindow); function thay đổi kích thướcWindow(e)( var newWindowWidth = $(window).width(); // Nếu chiều rộng là dưới 600 px, biểu định kiểu trên thiết bị di động được sử dụng if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Nếu chiều rộng lớn hơn 600 px, biểu định kiểu máy tính để bàn sẽ được sử dụng $("link").attr((href: "style.css")); ) ) ));

Hiển thị nội dung tùy chọn

Khả năng thu nhỏ và sắp xếp lại các phần tử để vừa với màn hình nhỏ rất tuyệt vời. Nhưng nó không phải như vậy sự lựa chọn tốt nhất. Thiết bị di động thường có nhiều thay đổi hơn: điều hướng đơn giản hóa, nội dung tập trung hơn, danh sách hoặc hàng thay vì cột.

Đây là đánh dấu của chúng tôi:

Nội dung chính Thanh bên trái Thanh bên phải

style.css (chính):

#content( chiều rộng: 54%; float: trái; lề-phải: 3%; ) #sidebar-left( chiều rộng: 20%; float: left; lề-phải: 3%; ) #sidebar-right( chiều rộng: 20 %; float: left; ) .sidebar-nav( display: none; )

mobile.css (được đơn giản hóa):

#content( chiều rộng: 100%; ) #sidebar-left( display: none; ) #sidebar-right( display: none; ) .sidebar-nav( display: inline; )

Ví dụ: nếu kích thước màn hình bị giảm, bạn có thể sử dụng tập lệnh hoặc tập tin thay thế với các kiểu để tăng khoảng trắng hoặc thay thế điều hướng để thuận tiện hơn. Do đó, có khả năng ẩn và hiển thị các thành phần, thay đổi kích thước của hình ảnh, các thành phần, v.v., bạn có thể điều chỉnh thiết kế cho phù hợp với mọi thiết bị và màn hình.

Chủ đề của tháng này là khả năng phản hồi của trang web, vì vậy chúng tôi quyết định nói nhiều hơn về nó. thiết kế web đáp ứng, 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 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 mang lại trải nghiệm tuyệt vời cho người dùng. 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ể 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) Đối với từng loại hệ điều hành bạn cần phiên bản ứng dụng/trang web của riêng bạn. Đ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ế trang web thích ứng.

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

Thiết kế bắt đầu với phiên bản đáp ứng của 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ỏ những nội dung không cần thiết khối thông tin và để lại những điều 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 thích ứng

Bài viết 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. Một phần của trang web LukeW Ideation + Design 4) Khả năng thích ứng “với chi phí thấp”

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) Bảng điều khiển

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 giải pháp phổ quát- Với mỗi dự án cần lựa chọn phương pháp phù hợp nhất với nhu cầu và khả nă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ự. TRONG bài học này Trình bày 5 phương thức để sử dụng trong CSS cho mẫu phản hồi. Có những cái rất đơn giản Thuộc tính CSS, chẳng hạn 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; phần đệ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 đáp ứng, việc sử dụng các giá trị tương đối có thể đơn giản hóa đáng kể mã CSS của bạn 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 px sử dụng giá trị phần trăm 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; )