Thiết kế đáp ứng hoặc phiên bản di động. Hiển thị nội dung tùy chọn. CSS cho thiết bị di động
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?
Có nhiều cách khác nhau để làm điều này. 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 và đúng đắn nhất là sử dụng CSS đáp ứng.
Cách tạo bố cục trang web đáp ứng
Trước hết, Nếu bạn quyết định tạo một thiết kế trang web đáp ứng, 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 của trang web để vừa với màn hình nhỏ của điện thoại di động.
Vì sự ngu ngốc và kém cỏi của mình mà tôi đã đánh mất rất nhiều thời gian. Nhưng bây giờ tôi nhớ mãi))).
Truy vấn phương tiện CSS có bố cục thích ứ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 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ể.
Độ phân giải màn hình quan trọng nhất cho 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 độ phân giải này mà bạn cần tập trung và đặc biệt chú ý khi tạo 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 khi sử dụng bootstrap để tạo bố cục thích ứ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 đến số phần được yêu cầu. 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?
Một dịch vụ miễn phí rất chính xác và quan trọng nhất đáng được 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.
Các nhà phát triển và tiếp thị web hiện đại đang ngày càng ưu tiên thiết kế đáp ứng, cho phép họ tạo một trang có thể xem được trên mọi thiết bị. Và mặc dù cách tiếp cận này khá tốt theo quan điểm của Google, vốn “yêu thích” các trang web phản hồi, nhưng nó không phải là lựa chọn duy nhất có thể thích ứng với nhu cầu của người dùng.
Cái gọi là thiết kế thích ứng đã không xuất hiện ngày hôm qua, nhưng mọi người chỉ mới bắt đầu nói đến nó một cách nghiêm túc gần đây, nhờ những cải tiến mà nó có thể mang lại cho trải nghiệm người dùng.
Để hiểu loại thiết kế nào trong hai loại thiết kế phù hợp nhất với mình, bạn cần hiểu rõ ưu điểm và nhược điểm của cả hai phương pháp, cũng như biết giải pháp tối ưu nhất hiện có cho các loại trang web và thiết bị khác nhau.
Thiết kế web đáp ứng
Thiết kế web đáp ứng đang mở rộng giao diện để phù hợp với thiết bị của người dùng bằng cách sử dụng truy vấn phương tiện hoặc mô-đun CSS3 cho phép bạn đặt các kiểu khác nhau (hoặc thậm chí là biểu định kiểu) tùy thuộc vào độ phân giải màn hình, kích thước của màn hình và các đặc điểm khác.
Việc sử dụng phương pháp này phù hợp hơn với các địa điểm có cấu trúc linh hoạt hoặc “cao su”. Nếu không, các nhà phát triển sẽ dành nhiều thời gian và nguồn lực để thiết kế lại trang web cho máy tính bảng và điện thoại di động để bù đắp cho sự thiếu linh hoạt hiện có.
Bên cạnh cấu trúc thay đổi, thiết kế đáp ứng còn có một số ưu điểm khác:
1. Hình thức giống nhau của tài nguyên trong các trình duyệt khác nhau và trên các nền tảng khác nhau
2. Site có URL giống nhau góp phần tối ưu SEO
3. Nhà phát triển chỉ cần duy trì một trang web, giúp giảm thời gian dành cho thiết kế và nội dung
Và mặc dù các khía cạnh tích cực của thiết kế đáp ứng là hiển nhiên nhưng phương pháp này vẫn có một số nhược điểm. Vấn đề lớn nhất trong số này là tốc độ tải, bị giảm đáng kể bởi hình ảnh có độ phân giải cao và các yếu tố hình ảnh khác cần thiết để tạo ra diện mạo của tài nguyên.
Nếu bạn chọn cách tiếp cận đáp ứng, các nhà thiết kế của bạn sẽ luôn bị giới hạn bởi yếu tố này vì các yếu tố hình ảnh phức tạp có thể làm chậm quá trình tải trên thiết bị di động.
Thiết kế web đáp ứng
Thiết kế đáp ứng hoạt động hơi khác một chút. Nó phân chia người dùng thành các danh mục dựa trên thiết bị mà họ đang xem trang web.
Mặc dù các trang web được tạo bằng công nghệ thiết kế đáp ứng trông giống nhau bất kể kích thước thiết bị, tài nguyên phản hồi sẽ phát hiện người dùng đang truy cập trang web từ thiết bị nào và hiển thị phiên bản được thiết kế riêng cho loại thiết bị đó.
Thay vì hiển thị bản sao tài nguyên nhỏ hơn, máy chủ trang web phản hồi sẽ xác định loại thiết bị của người dùng và hiển thị phiên bản blog đơn giản hóa, chỉ chứa các thành phần giao diện cần thiết nhất và hình ảnh chất lượng thấp hơn.
Nói cách khác, máy chủ thực hiện tất cả những công việc nặng nhọc thay vì buộc trang web phải tự tối ưu hóa. Trong số những ưu điểm của thiết kế thích ứng là:
Sự hấp dẫn của phương pháp này bị lu mờ bởi thực tế là việc tạo một trang web phản hồi không dễ dàng như vậy. Do sự thích ứng của thiết kế với các thiết bị khác nhau, thời gian dành cho việc phát triển sẽ tăng lên đáng kể. Hơn nữa, nếu bạn cần thực hiện bất kỳ sửa đổi nào đối với trang web, bạn sẽ phải thực hiện thay đổi đối với tất cả các phiên bản của nó. Do đó, nếu bạn có ngân sách nhỏ và không có đội ngũ chuyên gia hỗ trợ một trang web đáp ứng, tốt hơn hết bạn nên từ bỏ ý tưởng này ngay bây giờ.
Lựa chọn nào phù hợp cho việc gì?
Ngay cả khi bạn thích một trong hai loại thiết kế được mô tả, điều quan trọng là phải nhận ra rằng bạn cần phải nghĩ đến trải nghiệm người dùng trước hết.
Nếu người dùng của bạn tương tác với tài nguyên có cùng cấu trúc trên tất cả các thiết bị sẽ thuận tiện hơn thì hãy chọn thiết kế đáp ứng. Nếu người dùng của bạn hiểu biết hơn về công nghệ và bạn muốn đặt nền tảng tốt cho tương lai thì thiết kế đáp ứng sẽ là giải pháp tối ưu.
Gần đây, các thuật ngữ như thiết kế đáp ứng và thích ứng đã được sử dụng khá thường xuyên. Hóa ra, đối với một số người, hai khái niệm này gần như giống hệt nhau. Trong bài viết này, chúng ta sẽ nói về thiết kế đáp ứng và thích ứng là gì cũng như sự khác biệt giữa chúng.
Kể từ khi máy tính bảng và điện thoại thông minh trở nên phổ biến với công chúng, các trang web ngày càng được xem bằng các thiết bị điều khiển cảm ứng có màn hình nhỏ. Nhiều tài nguyên Internet hóa ra hoàn toàn không phù hợp để chủ sở hữu các thiết bị đó sử dụng.
Hai cách tiếp cận cơ bản khác nhau để tạo trang web cho thiết bị di động đã xuất hiện: Thiết kế web thích ứng và Thiết kế web đáp ứng. Chúng ta hãy xem xét từng loại một cách riêng biệt, sau đó so sánh các ứng dụng và tính năng của chúng.
Thiết kế web đáp ứng (RWD) là một cách tiếp cận để tạo ra một thiết kế trong đó trang web được thiết kế để đảm bảo sử dụng dễ dàng nhất: xem trang web một cách thuận tiện với mức thay đổi kích thước tối thiểu và cuộn không cần thiết - trên phạm vi rộng nhất của thiết bị. Thiết kế đáp ứng có các tính năng sau:
- Thiết kế đáp ứng chỉ sử dụng HTML và CSS mà không bao gồm JavaScript để xác định “khả năng phản hồi” của các thành phần thiết kế.
- Bố cục đáp ứng xác định các thành phần trang web sẽ trông như thế nào trên các thiết bị khác nhau; tuy nhiên, những phần tử này không bị ẩn/thay thế bởi những phần tử khác và hành vi của chúng cũng như các chức năng mà chúng thực hiện không thay đổi.
- Ba nguyên tắc cốt lõi của thiết kế đáp ứng:
- sắp xếp tất cả các phần tử trong lưới mô-đun;
- tất cả các thành phần bố cục và tệp phương tiện (bao gồm cả hình ảnh) đều “linh hoạt” - kích thước của chúng phụ thuộc vào kích thước màn hình;
- làm việc với Truy vấn phương tiện - mô-đun CSS3 cho phép bạn đặt các kiểu khác nhau (hoặc thậm chí các biểu định kiểu) tùy thuộc vào độ phân giải màn hình, kích thước của màn hình và các đặc điểm khác.
- Thiết kế đáp ứng được tạo bằng cách sử dụng đánh dấu đáp ứng (đừng nhầm lẫn với thiết kế đáp ứng). Bố cục thích ứng có nghĩa là một số kiểu được tạo trên trang web, các tùy chọn để sắp xếp các thành phần trên lưới mô-đun và một số tùy chọn về kiểu của các thành phần thiết kế. Các tùy chọn này thay thế lẫn nhau khi kích thước màn hình thay đổi và các điểm chuyển tiếp nhất định được hình thành giữa các loại bố cục/kiểu trang web khác nhau.
- Thiết kế đáp ứng không ngụ ý làm việc với mô hình đối tượng của các thành phần trên trang, cũng không ngụ ý thay đổi thứ bậc/lồng nhau của các khối và đối tượng khi loại đánh dấu thay đổi.
Thiết kế web thích ứng (AWD) là một thiết kế thao tác các bố cục hoặc bố cục trang web khác nhau để đảm bảo sử dụng tốt nhất trên các thiết bị và độ phân giải màn hình cụ thể, được xác định trước.
- Trong trường hợp thiết kế thích ứng, các thành phần của trang web có thể bị ẩn và thay thế bằng các thành phần khác; Hành vi và chức năng của từng thành phần trang web riêng lẻ có thể thay đổi.
- Thiết kế đáp ứng sử dụng rộng rãi JavaScript để kiểm soát hành vi và chức năng của các đối tượng trên trang web.
- Thiết kế thích ứng yêu cầu làm việc với mô hình đối tượng của các thành phần trên trang và liên quan đến việc thay đổi thứ bậc/lồng nhau của chúng trên các thiết bị khác nhau.
- Không cần thiết phải đảm bảo sự xuất hiện giống nhau của trang web và chức năng của nó trong các trình duyệt khác nhau. Có thể sử dụng các công nghệ mới không được hỗ trợ bởi các phiên bản chương trình cũ hơn - vì thiết kế, như đã đề cập ở trên, phù hợp với một số loại thiết bị nhất định.
Trong RuNet, các khái niệm về thiết kế đáp ứng và thích ứng gần như giống hệt nhau. Cần phải hiểu rằng những cách tiếp cận này khác nhau chủ yếu ở các nhiệm vụ mà chúng được sử dụng.
Đánh dấu đáp ứng và thiết kế đáp ứng là những thứ hoàn toàn khác nhau. Bố cục trang web thích ứng liên quan đến việc thay đổi kiểu dáng của các thành phần trên các thiết bị khác nhau và được sử dụng trong thiết kế đáp ứng. Thiết kế thích ứng là một cách tiếp cận riêng biệt để thiết kế và tạo giao diện người dùng của trang web.
Đặc điểm của các phương pháp tiếp cậnCó một số khía cạnh quan trọng trong đó thiết kế đáp ứng và thích ứng khác nhau về cơ bản:
Tốc độ trang web. Một trang web được tạo theo nguyên tắc thiết kế thích ứng có thể tải nhanh hơn nhiều lần, vì người dùng sẽ chỉ cần tải xuống từ máy chủ những phần của thiết kế cần thiết để trang web hoạt động trên thiết bị của mình. Trong trường hợp thiết kế đáp ứng, người dùng sẽ buộc phải đợi cho đến khi tất cả các kiểu và hình ảnh được tải, bất kể khách truy cập đang sử dụng thiết bị nào.
Sự phức tạp của sự phát triển. Tạo một trang web với thiết kế thích ứng đòi hỏi trình độ chuyên môn cao hơn từ nhà phát triển. Đặc biệt, có kinh nghiệm vững chắc với JavaScript.
Khía cạnh SEO. Có tin đồn rằng Google chấp nhận các trang web phản hồi nhanh hơn nhiều so với các trang web thích ứng.
Trong thực tế, thiết kế Responsive khá phổ biến, không giống như thiết kế Adaptive. Điều này là hiển nhiên: xét cho cùng, mẫu đầu tiên dễ thực hiện và thành thạo hơn. Hầu hết các mẫu được bán trên thị trường đều có tính đáp ứng chứ không thích ứng.
Thiết kế thích ứng thường được sử dụng nhiều hơn trong các sản phẩm nghiêm túc và đa chức năng. Ví dụ rõ ràng nhất: trong phiên bản di động của mạng VKontakte, thư từ Google.
tái bút Nếu để ý, bạn sẽ nhận thấy rằng bố cục trang web của chúng tôi là một ví dụ về thiết kế đáp ứng. Để xác minh điều này, trên máy tính của bạn, hãy thử thay đổi độ rộng của cửa sổ trình duyệt - và bạn sẽ nhận thấy kiểu bố cục của trang web dần thay đổi, chuyển sang chế độ xem trên thiết bị di động.
Thiết kế thích ứng của một trang web hiện đại là một trong những chỉ số chính về chất lượng của nó.
Không có gì ngạc nhiên khi tỷ lệ sử dụng thiết bị di động để truy cập Internet không ngừng tăng lên. Xu hướng này là điển hình cho toàn bộ Internet và Runet nói riêng.
Và nếu chúng tôi không muốn mất khách truy cập, độc giả và người mua tiềm năng thì chúng tôi nên đảm bảo rằng trang web của bạn được hiển thị chính xác và dễ đọc trên thiết bị di động từ máy tính bảng đến điện thoại thông minh.
Ngoài ra, các công cụ tìm kiếm xếp hạng các trang web phù hợp với thiết bị di động một cách thuận lợi hơn. Điều này đặc biệt áp dụng cho Google PS, nơi trực tiếp áp đặt các yêu cầu như vậy trên các trang web.
Thiết kế trang web đáp ứng là gìÝ nghĩa của thiết kế thích ứng là khả năng xem và đọc các tài liệu được đăng trên trang web một cách thoải mái trên nhiều thiết bị khác nhau.
Các tiêu chí chính để đánh giá sự thuận tiện khi xem là:
Nói cách khác, văn bản phải dễ đọc, hình ảnh và video phải hiển thị rõ ràng, các mục menu và liên kết phải hiển thị, dễ truy cập và dễ hiểu.
Làm thế nào để làm cho trang web của bạn phản ứng nhanhCó một số cách để đảm bảo rằng trang web của bạn phản hồi nhanh khi xem trên các thiết bị có độ phân giải màn hình khác nhau. Những cái chính là:
- Mẫu trang web thích ứng.
- Phiên bản di động của trang web.
- Cài đặt một ứng dụng đặc biệt trên thiết bị của người dùng.
Kinh nghiệm cho thấy giải pháp tối ưu nhất là tạo một mẫu thích ứng. Hai phương pháp còn lại cũng giải quyết được vấn đề này, nhưng kém hơn đáng kể so với phương pháp đầu tiên.
Khi sử dụng phiên bản di động của trang web, lượng công sức, tiền bạc và thời gian bỏ ra tương đương với việc tạo và hoàn thiện một mẫu thích ứng.
Nhưng trong quá trình hoạt động, các hành động được thêm vào để duy trì mức độ liên quan của phiên bản di động của trang web và đồng bộ hóa thông tin với trang chính. Và để quảng bá SEO, các câu hỏi bổ sung có nội dung trùng lặp, v.v. sẽ được thêm vào.
Ưu điểm của phiên bản di động là tất cả các yếu tố, hiệu ứng, quảng cáo, đăng ký, v.v. không cần thiết đều bị loại bỏ. Trang web sẽ không chỉ hiển thị chính xác trên thiết bị di động mà còn tải nhanh nhất có thể. Đây là lợi thế chính của nó.
Những phiên bản như vậy có sẵn cho các cổng thông tin lớn, trang mạng xã hội, trang web công ty lớn...
Việc cài đặt ứng dụng trên thiết bị di động hoàn toàn không phụ thuộc vào bạn. Thứ nhất, nó không thể được triển khai trên mọi thiết bị. Thứ hai, điều này đòi hỏi kiến thức và hành động bổ sung và không phải tất cả người dùng đều đồng ý với những rắc rối thêm.
Những ứng dụng như vậy thường được cài đặt bởi những người dùng tin tưởng tác giả và mong đợi những thông tin hữu ích mới từ tác giả. Điều này hơi giống với việc đăng ký email.
Tóm lại, chúng tôi kết luận: tạo một thiết kế đáp ứng cho trang web của bạn sẽ là giải pháp mang lại lợi nhuận cao nhất cho một trang web vừa và nhỏ.
Bố cục trang web thích ứngĐể tạo ra một thiết kế thích ứng, bạn sẽ phải sử dụng công nghệ bố cục thích ứng. Bản chất của nó là như sau:
Làm mẫu “cao su”
Tức là không tuân thủ nghiêm ngặt về chiều rộng của trang mà hãy sử dụng các đơn vị tương đối. Tức là làm cho mẫu của bạn có khả năng nén theo tỷ lệ, tức là "cao su".
Để thực hiện việc này, chiều rộng của trang được đặt bởi thuộc tính chiều rộng tối đa css thay vì chiều rộng và liên quan đến giá trị này, chiều rộng của các phần tử khác được chọn dưới dạng phần trăm (%).
Xác định "điểm kiểm soát" chiều rộng màn hìnhViệc xác định các điểm kiểm soát (CP) của chiều rộng màn hình là cần thiết để lập kế hoạch cho các hành động tiếp theo.
Ví dụ.
Chiều rộng màn hình tối đa là 1000 pixel. Chiều rộng màn hình của máy tính bảng là 800 pixel, điện thoại thông minh là 420 pixel.
Các điểm kiểm soát (CP) này có thể khác nhau đối với các loại địa điểm khác nhau. Đôi khi một cái là đủ, chẳng hạn như 600 pixel và chất lượng xem ở độ phân giải nhỏ hơn được đảm bảo do “khả năng phục hồi” của mẫu.
Lập kế hoạch bố trí màn hình cho mỗi lần chụp CTTheo các điểm kiểm soát này, hãy sắp xếp vị trí của các khối riêng lẻ trên trang web sao cho chúng được phản ánh chính xác trên thiết bị di động.
Để làm được điều này, một số khối, chẳng hạn như thanh bên, sẽ phải được đặt bên dưới khối nội dung chính và các khối phụ như quảng cáo, thanh trượt, trình bảo vệ màn hình có thể bị bỏ hoàn toàn.
Bạn có thể nhận được thông tin chi tiết hơn về cách giải quyết những vấn đề như vậy bằng cách tham gia khóa học miễn phí về thiết kế đáp ứng từ nhóm WebFormMySelf.
Truy vấn phương tiện truyền thôngĐể đặt điểm kiểm soát, bạn phải sử dụng truy vấn phương tiện. Các chỉ thị này là các tiêu chuẩn CSS3 để kiểm soát việc hiển thị nội dung trang của trang cho các độ phân giải màn hình khác nhau.
Lệnh này trông giống như thế này:
Có một số cách bạn có thể tạo mẫu đáp ứng cho blog WordPress của mình.
Quyết định theo kịp thời đại, tôi cũng bắt đầu chuẩn bị điều chỉnh blog của mình. Có rất nhiều thông tin chi tiết trên Internet về các plugin thích ứng chủ đề cho WP. Tôi đã quen với công việc và yêu cầu của các plugin phổ biến và quyết định rằng việc sử dụng chúng sẽ không phải là giải pháp tối ưu nhất cho blog của mình.
Mua một mẫu thích ứng hiện đại trên Internet cũng khá đơn giản, chỉ cần bạn có tiền. Nhưng bạn cần phải thích bản thân mẫu đó và đáp ứng mọi mong muốn của bạn.
Nói tóm lại, tôi đã quyết định lựa chọn thứ ba và quyết định tự điều chỉnh mẫu của mình.
Mẫu đáp ứng cho chính WordPressLàm quen với các nguyên tắc thiết kế thích ứng cho thiết bị di động, tôi vui vẻ bắt tay vào kinh doanh nhưng cảm thấy kiến thức về html, css, php của mình là chưa đủ.
Và tôi đã bắt đầu có ý định mua một mẫu làm sẵn, nhưng đúng lúc đó tôi nhận được thông tin về khóa học của hai Andreev Bernatsky và Kudlay “Bậc thầy WordPress từ Blog cá nhân đến Mẫu cao cấp”. Một trong những phần của khóa học này bao gồm các bài học về cách điều chỉnh mẫu tạo sẵn cho thiết bị di động.
Giá của khóa học tương đương với giá của một mẫu đáp ứng hiện đại mới. Và tôi quyết định chi số tiền này để mua một khóa học và nhận kiến thức thay vì một mẫu có sẵn. Tôi nghĩ. Rằng khoản đầu tư là chính xác và hoàn toàn hợp lý.
Dịch vụ của Google để kiểm tra tốc độ tải trang web cho thiết bị di động và máy tính để bàn - https://developers.google.com/speed/pagespeed/insights/
Ở đây chúng tôi đưa ra các đề xuất về các biện pháp để tăng tốc độ tải trang web của bạn.
Tôi muốn mô tả ngắn gọn thêm một vài dịch vụ. nhưng tôi đã xem được một bài viết chi tiết, hợp lý và quyết định không làm bản thân căng thẳng mà cung cấp cho bạn một liên kết đến nó - http://habrahabr.ru/post/189726/.
Nếu bạn thích ấn phẩm này, hãy chia sẻ nó với bạn bè của bạn trên mạng xã hội.
Bạn có thể thêm ý kiến của bạn vào bài viết.
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 mà 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ìnhVề 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ạtTấ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ạtLà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 ứngKỹ 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 độ phân giải lớn và nhỏ: đầu tiên là một hình ảnh nhỏ có tiền tố .r(để cho thấy rằng hình ảnh phải phản hồi), sau đó liên kết đến hình ảnh lớn bằng data-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).
iPhone và iPod Touch có một đặc điểm: thiết kế được tạo cho màn hình lớn sẽ chỉ thu gọn trong trình duyệt có độ phân giải thấp mà không cần cuộn hoặc bố cục di động bổ sung. 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. Điều này có thể được thực hiện một cách thuận tiện thông qua một tệp kiểu riêng biệt hoặc hiệu quả hơn 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 kiểu chính chỉ đị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, các thanh bên trái và phải vừa khít với nhau. 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 CSS3Hã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 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ọnKhả 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 đây không phải là 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 giảm, bạn có thể sử dụng tập lệnh hoặc tệp tạo kiểu thay thế để 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.
