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

Những điểm cần sử dụng cho thiết kế thích ứng. Thiết kế web thích ứng và đáp ứng. Thiết kế đáp ứng là gì

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 danh mục khác nhau và sắp chữ cho từng thứ một cách riêng biệt, nhưng sẽ mất quá nhiều thời gian, và ai biết được những tiêu chuẩn nào 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, đây không phải là một phương pháp hoàn hảo nhưng nó giúp loại bỏ 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, điều này sẽ làm tăng thời gian tải trên thiết bị di độ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 Touch có một tính năng: một thiết kế được tạo 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ề-top: 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.

Bạn có thể tải một trang tính cụ thể với các kiểu cho các giá trị truy vấn phương tiện khác nhau 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ị tùy chọn nội dung

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 thanh bên trái | Nội dung thanh bên phả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.

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 làm thiết kế thích ứng thông qua việc chỉnh sửa các kiểu CSS bằng đầu và ngón tay của bạn. Sẽ không thể trình bày mọi thứ một cách chi tiết 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 họ không gặp vấn đề gì khi hiển thị trang web trên máy tính thông thường vì ai đó đã đặt 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:

  • - 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ụ),
  • - 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.

    Trước khi chuyển thể (tôi đã lưu cái cũ cho lịch sử) tập tin CSS) thù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ó để loại bỏ thao tác cuộn ngang, điều này rất hữu ích cho việc điều chỉnh trên thiết bị di động, đôi khi việc chỉ biểu thị lệnh cấm là hợp lý 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 bóp màn hình, chúng tôi chưa chuyển sang thiết bị di động, chúng tôi đã làm được rồi công việc cơ bản cho màn hình lớn.

    CSS bên dưới 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). Các sửa chữa đã được thực hiện đối với đầu ra. thực đơn trên cùng(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ẽ làm điều đó sau) và việc 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ọ nó được chỉ ra rằng Kích thước tối đa Chiều rộng của hình ảnh là 96% (có vết lõm đẹp) 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.

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

    • Thông qua màn hình @media và đảm bảo đóng các khối hiển thị không cần thiết cho thiết bị di động, nhưng chuyển đổi thành % những giá trị được hiển thị không chính xác, vì chúng được để lại dưới dạ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.

    Mọi người đang nói về thiết kế web đáp ứng. Nhưng phải chăng điều này có nghĩa là mọi người đều hiểu nó dùng để làm gì?

    Thiết kế đáp ứng không chỉ là phát triển trang web cho thiết bị di động, ở đây Chúng ta đang nói về về việc điều chỉnh bố cục cho kích cỡ khác nhau màn hình (khung nhìn).

    Trong hướng dẫn này, chúng ta sẽ xem xét các nguyên tắc cơ bản đằng sau thiết kế web đáp ứng để hiểu rõ hơn về kỹ thuật này. Tiếp theo, chúng tôi sẽ tạo một trang web đáp ứng có khả năng mở rộng hoàn hảo trên màn hình lớn và nhỏ. Thiết kế web đáp ứng đã trở nên rất phổ biến với ngày càng nhiều người sử dụng các thiết bị di động như iPhone, iPad, BlackBerry cũng như các điện thoại thông minh và máy tính bảng hỗ trợ internet khác.

    Điều quan trọng là phải hiểu rằng trang web không nên được xây dựng cho một máy tính để bàn hoặc thiết bị di động cụ thể. Điều quan trọng ở đây là khả năng thích ứng của bố cục với các kích thước khác nhau.

    Sự thất vọng của người dùng

    Một số người cho rằng việc người dùng giảm bớt chức năng và loại bỏ nội dung mà họ cho là không quan trọng là điều bình thường. Nhưng làm sao bạn có thể chắc chắn rằng thông tin bạn cắt hoặc chuyển sang trang phụ không phải là nội dung quan trọng nhất đối với tôi?!

    Đầu tiên, bạn cần hiểu rằng thiết kế đáp ứng không chỉ là thiết kế dành cho thiết bị di động. Thứ hai, việc phát triển một trang web đáp ứng tốt đòi hỏi một số lượng lớn thời gian và công sức chứ không chỉ nhờ sự trợ giúp của các phương tiện truy vấn. Với số lượng thiết bị web khổng lồ và ngày càng tăng, điều rất quan trọng là tạo cơ hội cho trang web của bạn tạo điều kiện thuận lợi cho trải nghiệm người dùng một cách hiệu quả.

    Đối với một trang web phản hồi nhanh, chúng ta có thể sử dụng cùng một mã cho cả máy tính để bàn và thiết bị di động. Điều này thuận tiện vì chúng ta không phải điều chỉnh riêng nội dung cho từng thiết bị. Nhưng nhiều trang web ẩn nội dung của họ vì cho rằng nó không cần thiết đối với người dùng di động. Có hai vấn đề này:

    • Đầu tiên, nó trừng phạt người dùng di động duyệt trang web một cách hiệu quả.
    • Thứ hai, kiểu ẩn trong CSS không có nghĩa là nội dung không được tải. Điều này có thể có tác động lớn đến hiệu quả, đặc biệt đối với những người có kết nối kém.

    Do đó, cách tiếp cận tốt nhất để phát triển trang web là xem xét thiết bị di động hoặc thiết bị nhỏ, Trước hết. Bằng cách này, bạn có thể tập trung vào thông tin quan trọng nhất mà trang web của bạn cần cung cấp. Và sau đó, nếu cần thiết, bạn có thể sử dụng phương pháp có điều kiện tải lên trong đó lưới bố cục, hình ảnh lớn và truy vấn phương tiện được xếp chồng lên trên thiết kế màn hình nhỏ hiện có.

    Hướng dẫn từng bước một

    Đối với hướng dẫn này, chúng tôi đã tạo một trang web có tỷ lệ hoàn hảo giữa màn hình lớn và màn hình nhỏ. Bạn lưu tất cả nội dung, trên mọi kích thước màn hình. Và với sự trợ giúp của truy vấn phương tiện, điều hướng sẽ được chuyển từ hiển thị ngang sang hiển thị dọc đối với các thiết bị nhỏ hơn.

    Yếu tố chính của tính linh hoạt trong thiết kế đáp ứng là chiều rộng bố cục linh hoạt. Tất cả những gì bạn cần làm là tạo trình bao bọc, nội dung và độ rộng cột sẽ thích ứng với các độ rộng thiết bị khác nhau. Điều này không có gì mới nhưng hiện nay nó quan trọng hơn bao giờ hết. Để đơn giản hóa mọi thứ, chúng tôi sẽ tạo một trang linh hoạt bao gồm điều hướng, hình ảnh chính và hai cột, có tính đến vị trí trên thiết bị Đa dạng về kích cỡ. Chúng tôi cũng đã đưa vào Reply.min.js, cho phép truy vấn phương tiện hoạt động trong IE6-8.

    Chủ yếu Cấu trúc HTML:

    Bản trình diễn trang web đáp ứng

    • Di chuyển đến nội dung
    Logo
    • trang chủ
    • Mua
    • Dịch vụ
    • Liên lạc
    Câu chuyện

    Lịch sử của mẫu xe Mercedes SL bắt đầu từ năm 1954 - khi đó người Đức đã giới thiệu chiếc Mercedes 190 SL hai cửa tại Triển lãm ô tô New York. Bạn có thể tưởng tượng mức độ sốc thẩm mỹ của những du khách đến xem triển lãm ô tô lúc bấy giờ. Dưới thân xe của vẻ đẹp quyến rũ là nền tảng rút gọn từ chiếc sedan Mercedes W120 Ponton và một chiếc xe liền khối bằng thép. Hệ thống treo hoàn toàn độc lập - với xương đòn kép ở phía trước và trục trục xoay ở phía sau. Chiều dài - 4290 mm, khoảng cách giữa các trục - 2400 mm.

    Khi nói đến CSS, việc đặt độ rộng tối đa là một ý tưởng hay; nó sẽ ngăn trang web mở rộng trên các màn hình lớn, nhưng sẽ không ngăn các trang bị thu nhỏ. Một trong những vấn đề chính khi chuyển từ chiều rộng cố định sang linh hoạt là hình ảnh. Trong CSS, có một giải pháp đơn giản cho vấn đề này. Chỉ cần đặt chiều rộng hình ảnh thành 100%. Ngoài ra, hãy thêm tính năng tự động điều chỉnh chiều cao của hình ảnh để tránh hình ảnh bị nén trong Opera và Safari trên màn hình nhỏ:

    /* Bố cục */ #wrapper ( width: 96%; max-width: 920px; lề: auto; đệm: 2%; ) #main ( width: 60%; lề-phải: 5%; float: left; ) sang một bên ( chiều rộng: 35%; float: phải; ) /* Logo H1 */ tiêu đề h1 ( chiều cao: 98px; chiều rộng: 216px; float: left; display: block; nền: url(images/sllogo.png) 0 0 no- lặp lại; thụt lề văn bản: -9999px; ) /* Điều hướng */ điều hướng tiêu đề ( float: right; lề-top: 40px; ) điều hướng tiêu đề li ( display: inline; Margin-left: 15px; ) điều hướng tiêu đề ul li a ( text-trang trí:none; color:#333;) #skipTo ( display: none; ) #skipTo li ( nền: #ccc; ) /* Hình ảnh chính*/ #banner ( float: left; lề-bottom: 15px; chiều rộng : 100%; ) #banner img ( chiều rộng: 100%; chiều cao: tự động; )

    Hình ảnh của bạn sẽ xuất hiện trên phần tử gốc ở toàn bộ chiều rộng và sẽ co lại theo phần tử đó. Chỉ cần đảm bảo rằng chiều rộng tối đa của hình ảnh không vượt quá chiều rộng tối đa của vùng chứa nó.

    Sử dụng hình ảnh lớn có thể ảnh hưởng đến thời gian tải. Vì vậy đối với màn hình nhỏ, có một phương pháp đáp ứng cho hình ảnh phát hiện kích thước màn hình của người dùng và tạo ra hình ảnh nhỏ hơn/lớn hơn tùy thuộc vào những gì cần thiết. Phương pháp này vẫn khó gọi là lý tưởng nhưng vẫn đáng để xem xét.

    Chuyển đổi điều hướng chính

    Lý do chính khiến bạn cần thay đổi điều hướng của mình là do quá trình giảm thiểu xảy ra, điều này có thể khiến các nút không thể đọc được và khó nhấp vào. Sử dụng phương pháp này sẽ giúp cuộc sống của người dùng dễ dàng hơn. Bạn cũng sẽ nhận thấy trong mã rằng chúng tôi đã thực hiện các thay đổi đối với phần #main và phần sang một bên để kết hợp chúng thành một cột.

    /* Truy vấn phương tiện */ @media screen và (max-width: 480px) ( #skipTo ( display: block; ) điều hướng tiêu đề, #main, sang một bên ( float: left; clear: left; Margin: 0 0 10px; width : 100%; ) điều hướng tiêu đề li ( lề: 0; nền: #ccc; display: block; lề-dưới: 3px; ) điều hướng tiêu đề a ( display: block; đệm: 10px; căn chỉnh văn bản: center; )

    Bạn sẽ nhận thấy rằng trên một số thiết bị di động, trang web của bạn sẽ tự động thu nhỏ lại cho phù hợp. của màn hình này. Điểm này trở thành vấn đề khi chúng ta cần tăng kích thước màn hình để điều hướng qua các nội dung bất tiện.

    Để cho phép các truy vấn phương tiện có hiệu lực đầy đủ, một trang web phản hồi, được tối ưu hóa cho thiết bị di động điển hình phải chứa nội dung như sau:

    Thuộc tính width chịu trách nhiệm về kích thước của khung nhìn. Nó có thể được đặt thành một số pixel cụ thể, chiều rộng = 960 hoặc thành giá trị chiều rộng của thiết bị, là chiều rộng của màn hình tính bằng pixel ở tỷ lệ 100%. Thuộc tính tỷ lệ ban đầu kiểm soát tỷ lệ khi trang được tải lần đầu tiên. Các thuộc tính tỷ lệ tối đa, tỷ lệ tối thiểu và khả năng mở rộng của người dùng kiểm soát cách người dùng có thể chia tỷ lệ trang (lớn hơn/nhỏ hơn).

    Gần đây hơn, đúng nghĩa là 10 năm trước, khi tạo trang web, các nhà thiết kế web đã được hướng dẫn bởi chiều rộng màn hình trung bình nhất định của màn hình người dùng. Lúc đầu, độ phân giải phổ biến nhất là 800*600, sau đó tăng lên 1024*768. Trên Internet, người ta có thể bắt gặp những từ sau: “Trang web được tối ưu hóa cho độ phân giải như vậy và như vậy”. Với sự gia tăng số lượng kích thước màn hình, bố cục cao su của các trang web đã trở nên phổ biến, điều mà tôi đã viết trong bài báo cùng tên. Nhờ kiểu bố cục này, bạn có thể xem các trang web trên màn hình với các độ phân giải khác nhau.

    Tuy nhiên, trong những năm trước bố trí cao su đã không còn là thuốc chữa bách bệnh. Một mặt, màn hình với kích thước màn hình khổng lồ xuất hiện, mặt khác, một cuộc cách mạng di động đã diễn ra - số lượng kết nối Internet của các thiết bị di động (máy tính xách tay, điện thoại thông minh, máy tính bảng) tăng lên số lượng nhiều hơn máy tính để bàn. Lưu lượng truy cập trên thiết bị di động ngày càng tăng và cần phải hiển thị trang web chính xác trên màn hình số lượng lớn phong phú các thiết bị khác nhau. Phạm vi kích thước quá rộng.

    Nếu trang web trông tệ trên màn hình nhỏ thì khách truy cập chỉ cần rời khỏi nó, lưu lượng truy cập giảm và yếu tố hành vi.

    Để kiểm tra xem trang web của bạn trông như thế nào khi được xem trên nhiều thiết bị khác nhau, bạn có thể sử dụng dịch vụ Screenfly. Để thực hiện việc này, hãy nhập địa chỉ trang web và chọn từ một số lượng vừa đủ danh sách lớn thiết bị mong muốn. Đây có thể là máy tính để bàn hoặc máy tính bảng nhiều loại khác nhau, và điện thoại di động. Bạn có thể thay đổi hướng màn hình từ ngang sang dọc và ngược lại.

    Làm thế nào để giải quyết vấn đề hiển thị trang web bình thường trên các thiết bị khác nhau? Có hai cách thoát ra:

    • Sử dụng hai phiên bản của trang web, phiên bản thông thường dành cho máy tính để bàn và di động.
    • Sử dụng thiết kế đáp ứng.

    Tất nhiên, việc áp dụng tùy chọn nào trong số này là tùy thuộc vào chủ sở hữu hoặc khách hàng của trang web quyết định. Nếu trang web đã được tạo ra từ lâu, có thiết kế vẽ tay là một phần của thương hiệu thì có thể đáng để tạo một trang web phiên bản điện thoại, và bỏ đi cái cũ. Tất nhiên, đối với các trang web mới, bạn nên chọn thiết kế đáp ứng.

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

    Đây là loại thiết kế gì và nó khác với cao su như thế nào?

    Mẫu cao su không thay đổi cấu trúc khi chiều rộng màn hình thay đổi mà chỉ thay đổi kích thước của nó. Ví dụ: một trang web có ba cột: bên trái là menu có chiều rộng bằng 25% chiều rộng cửa sổ, ở giữa là nội dung – 50%, bên phải là thanh bên – 25%. Với chiều rộng cửa sổ 1000 px, chúng sẽ có kích thước lần lượt là 250, 500 và 250 px, điều này khá bình thường. Nhưng nếu bạn sử dụng điện thoại di động có màn hình nhỏ rộng 320 px, các cột sẽ co lại về kích thước 80, 160, 80 px và không thể đọc được.

    Giải pháp là gì? Nó liên quan đến việc thay đổi hoàn toàn trang web. Sự thay đổi này bao gồm thực tế là sau khi giảm dần độ rộng của các cột, cấu trúc của trang sẽ được xây dựng lại - nó được kéo dài thành một cột. Nhưng đây không phải là sự khác biệt duy nhất.

    Yêu cầu thiết kế đáp ứng
    • Thích ứng với kích thước và hướng màn hình, từ màn hình lớn máy tính để bàn và cái kết điện thoại di động.
    • Thay đổi kích thước hình ảnh khi thay đổi độ phân giải màn hình. Ngay cả trên các trang web có thiết kế “linh hoạt”, kích thước hình ảnh không thay đổi và ở một chiều rộng màn hình nhất định, sọc ngang cuộn để xem chúng. Khi sử dụng thiết kế responsive, hình ảnh cũng “vừa vặn” với kích thước màn hình.
    • Loại bỏ các phần tử mẫu không quan trọng. Họ có thể giống như yếu tố trang trí và phần mềm không hoạt động trên thiết bị di động.
    • Tốc độ cao lượt tải xuống. Tốc độ Internet di động vẫn còn tương đối nhỏ và điều này phải được tính đến khi phát triển một trang web dành cho việc xem trên thiết bị di động.
    • Cách sử dụng là tương đối nút lớn. Thiết bị di động sử dụng đầu vào cảm ứng và việc không có con trỏ phải được tính đến khi phát triển thiết kế.
    • Làm việc với chức năng di động, ví dụ: định vị địa lý.
    Thiết kế đáp ứng được tạo ra như thế nào

    Thiết kế này dựa trên việc sử dụng Phương tiện CSS truy vấn (truy vấn phương tiện). Nhờ những yêu cầu này, các thông số của thiết bị mà khách truy cập đang sử dụng trước tiên được xác định và tùy thuộc vào lựa chọn này, kiểu phù hợp sẽ được kết nối, nghĩa là với thiết kế thích ứng, một trang web được sử dụng với một bộ kiểu cho các kiểu khác nhau. thiết bị. Ví dụ: nếu một khách truy cập vào trang web với máy tính thông thường, một biểu định kiểu được kết nối và anh ấy nhìn thấy một trang web có tiêu đề lớn đầy màu sắc, menu ngang, một số cột nội dung và khi sử dụng iPad, một kiểu khác sẽ được áp dụng và thay vì tiêu đề lớn, một biểu tượng nhỏ sẽ xuất hiện. được hiển thị, menu sẽ chuyển thành danh sách dọc và nội dung được kéo dài thành một cột.

    Mẫu đáp ứng

    Có thể chuyển đổi mẫu trang web hiện có thành phiên bản đáp ứng không? Tất nhiên, bạn có thể làm được nếu bạn có đủ kiến ​​thức về HTML và CSS. Tuy nhiên, nếu bạn sử dụng bất kỳ hệ thống quản lý nội dung nào - WordPress, Joomla!, Drupal, thì tốt hơn hết bạn nên tìm mẫu làm sẵn, Hiện nay mẫu thích ứng rất nhiều đã được phát triển. Nhân tiện, trong bài viết của tôi “Cách chọn mẫu cho WordPress” bây giờ bạn nên thêm một mục khác “Kiểm tra khả năng phản hồi của mẫu”.

    Vì vậy, chúng ta có thể nói rằng thiết kế đáp ứng là Hiện nay Nó là nhất theo cách hiện đại phát triển trang web và mặc dù tương đối phức tạp nhưng đó là tương lai. Tiến trình không đứng yên, các thiết bị mới phức tạp hơn xuất hiện và phần mềmđiều đó cũng trở nên khó khăn hơn đối với họ.

    Nhân tiện, một khóa học độc đáo của Andrei Kudlay vừa xuất hiện. sử dụng Khung khởi động, ngày nay bạn có thể tạo một trang web có thiết kế đẹp, dễ chịu, chuyên nghiệp và bạn không cần phải là người chuyên nghiệp về bố cục. Bằng cách sử dụng các khung, ngay cả những người mới bắt đầu xây dựng trang web cũng có thể bố cục một trang, tạo trang web một trang hoặc trang đích. Hơn nữa, trang web sẽ khá chuyên nghiệp và thời gian dành cho việc tạo ra nó là rất ít.

    Tất cả điều này là rất nghiêm trọng, nhưng để nghỉ ngơi, tôi khuyên bạn nên ghép các câu đố lại với nhau và xem một bức tranh khác của người đồng hương của tôi, Nghệ sĩ Nhân dân Nga N.P.

    Viết ý kiến ​​​​của bạn về thiết kế đáp ứng trong phần bình luận.

    Chào mọi người! Gần đây, nhìn vào số liệu thống kê về một trong các dự án của mình, tôi nhận ra rằng đã đến lúc phải học cách tạo ra một thiết kế trang web thích ứng, tức là một thiết kế trông đẹp mắt trên cả hai nền tảng. máy tính để bàn cả máy tính xách tay và thiết bị di động. Hãy tự mình xem xét, Metrica gợi ý.

    Bạn thích bức ảnh này như thế nào? Có lẽ trong một số chủ đề tỷ lệ phần trăm lưu lượng truy cập di động Nó sẽ ít hơn, ở những nơi khác sẽ nhiều hơn, nhưng trong mọi trường hợp, bạn không thể bỏ qua những khách truy cập đọc bạn từ điện thoại thông minh hoặc máy tính bảng nữa.

    Bạn có biết người dùng thiết bị di động nhìn thấy trang web của bạn như thế nào không? May mắn thay, có một cách để kiểm tra dịch vụ tuyệt vời- người phản hồi.com

    Mọi thứ ở đây cực kỳ đơn giản - bạn nhập địa chỉ trang web và xem nó trông như thế nào trên thiết bị di động. Hãy lấy một ví dụ về một blog mà có lẽ mọi người đều quen thuộc.


    Tại Alexander Borisov's mẫu đẹp, rõ ràng là rất nhiều tiền đã được đầu tư vào thiết kế và bố cục. Tuy nhiên, việc đọc blog từ điện thoại rất bất tiện và tôi sẽ không ngạc nhiên nếu tỷ lệ thất bại ở người dùng thiết bị di động cao hơn nhiều so với những người truy cập trang web từ máy tính.

    Phải làm gì? Có hai cách giải quyết: để nguyên mọi thứ và xem các dự án khác bỏ qua dự án của bạn như thế nào trong kết quả tìm kiếm. công cụ tìm kiếm hoặc làm cho thiết kế trang web của bạn đáp ứng.

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

    Lúc đầu, tôi không thấy sự khác biệt giữa bố cục thích ứng và bố cục “linh hoạt”, khi kích thước khối thay đổi tùy thuộc vào chiều rộng màn hình. Tuy nhiên, có một sự khác biệt.

    Thiết kế đáp ứng không chỉ kéo dài hoặc thu nhỏ chiều rộng mà còn thích ứng với kích thước màn hình, đôi khi thay đổi hoàn toàn kiểu dáng của các khối.

    Ví dụ đơn giản nhất: vùng nội dung được kéo dài trên toàn bộ chiều rộng của màn hình và thanh bên được di chuyển xuống dưới hoặc biến mất hoàn toàn khỏi trang. Hoặc menu chuyển từ dạng ngang thông thường thành danh sách thả xuống.

    Cách tạo một thiết kế đáp ứng cho trang web của bạn

    Tùy thuộc vào ngân sách và kiến ​​thức về CSS/HTML của bạn, có thể có một số tùy chọn.

    Đặt hàng bố cục thích ứng từ một freelancer

    Theo tôi, phương án đúng nhất cũng là phương án không được ưa chuộng nhất. Vì niềm vui không hề rẻ. Chưa hết, nếu kinh phí cho phép và không muốn hiểu sự phức tạp của bố cục, tốt hơn hết bạn nên tìm một studio hoặc người làm việc tự do, người sẽ điều chỉnh mẫu của bạn cho phù hợp với thiết bị di động hoặc tạo một mẫu mới. Và bạn đã biết cách kiểm tra hoạt động của nó trên các thiết bị có độ phân giải khác nhau - responsinator.com có ​​thể trợ giúp.

    Tìm thấy thiết kế sẵn sàng

    TRONG Gần đây Hầu như tất cả các nhà thiết kế đều cố gắng điều chỉnh mẫu của họ cho phù hợp với thiết bị di động. Bạn có thể tìm kiếm một thiết kế làm sẵn, chẳng hạn như ở đây:

    • www.templatemonster.com là một trong những bộ sưu tập mẫu trả phí phổ biến nhất dành cho nhiều CMS khác nhau và chỉ các trang HTML.
    • www.templatemo.com - nhiều tùy chọn miễn phí thiết kế hiện đại.

    Tùy chọn này phù hợp với những người không theo đuổi một thiết kế độc quyền hoặc có thể tự thực hiện các thay đổi đối với mã để làm cho mẫu trở nên độc đáo.

    Sử dụng khung

    Khung - người ta có thể nói, khung của mẫu, các tệp chính của nó và một mạng lưới các khối. Các nhà thiết kế yêu thích chúng vì tính dễ sử dụng và tiết kiệm thời gian, bởi vì mẫu “cá” làm sẵn cho phép bạn không lãng phí thời gian vào công việc thường ngày. Nếu bạn biết cách làm việc với các framework, sử dụng chúng để tạo ra thiết kế đáp ứng là một giải pháp tuyệt vời.

    Bạn sẽ tìm thấy một danh sách khổng lồ các khung thích ứng cho mọi sở thích trên Habré. Nhưng hầu hết chúng đều khá khó sử dụng và nặng về dung lượng. Do đó, đối với những người yêu thích sự tối giản, tôi đề xuất một danh sách các khung thích ứng nhẹ khác từ Beloweb.ru. Đồng thời, tìm hiểu kỹ hơn blog, có rất nhiều “món ngon” hữu ích dành cho dân thiết kế, thiết kế bố cục.

    Tự mình tạo bố cục

    Phương pháp này dành cho những người không tìm kiếm những cách dễ dàng và muốn tự mình tìm ra mọi thứ. Về cơ bản, để làm cho mẫu của bạn phản hồi nhanh, bạn cần sử dụng hai thứ:

    Thẻ meta khung nhìn
    Xác định loại thiết bị mà khách truy cập đã truy cập trang web và đặt độ rộng màn hình chính xác. Chỉ cần sao chép mã này vào phần đầu trang web của bạn.

    quy tắc @media
    Nhờ đó chúng ta có thể viết những phong cách khác cho các khối tương tự trong tệp css của bạn. Nó trông giống như thế này:

    #left( width: 600px; float: left; lề-phải: 10px; ) #right( width: 400px; float: right; ) @media chỉ có màn hình và (max-width: 1010px)( #left, #right( width : 98%; float: không có; lề: tự động 10px;

    Trong ví dụ này, khối #left rộng 600 pixel và sẽ được đặt ở bên trái của khối #right rộng 400 px. Nhưng nếu độ phân giải màn hình nhỏ hơn 1010 pixel, chúng tôi sẽ xóa phần bao bọc khỏi cả hai khối và kéo dài chúng đến 98% chiều rộng màn hình.

    Và đây là cách bạn cần viết quy tắc cho các kích thước màn hình sau:

    • 320px cho iPhone 3-5 ở vị trí dọc
    • 480px cho iPhone 3-4 ở vị trí nằm ngang
    • 568px cho iPhone 5 theo chiều ngang
    • 384px cho điện thoại thông minh ở vị trí thẳng đứng
    • 600px cho điện thoại thông minh ở vị trí nằm ngang
    • 768px cho iPad theo chiều ngang
    • 1024px cho iPad ở vị trí dọc

    Bạn có thể tìm thấy danh sách đầy đủ các giải pháp trên responsinator.com hoặc trong báo cáo Yandex.Metrica cho trang web của bạn (phần Công nghệ/Độ phân giải hiển thị). Nói một cách dễ hiểu, sẽ không khó để những người quen với bố cục trang web có thể hiểu được vấn đề này.

    Bạn biết đấy, tôi hiếm khi đưa liên kết đến khóa học trả phí(vì tôi chưa bao giờ giới thiệu thứ gì đó mà bản thân tôi cũng chưa từng sử dụng), nhưng đây thực sự là tài liệu đào tạo về bố cục hay nhất mà tôi từng xem. Nhờ có Mikhail mà mẫu blog của tôi giờ đây không chỉ thích ứng với các độ phân giải màn hình khác nhau mà còn trở nên nhẹ hơn phiên bản trước và được tối ưu hóa tốt hơn cho các công cụ tìm kiếm.

    Nhân tiện, nếu bạn đang đọc bài viết từ điện thoại di động, hãy viết xem mọi thứ đã ổn chưa, mọi thứ có thuận tiện không? Đó là tất cả cho ngày hôm nay. Nếu bạn có bất kỳ câu hỏi hoặc bổ sung nào, vui lòng nhận xét như mọi khi, chúng luôn sẵn sàng chào đón tất cả mọi người.