Menu đáp ứng chỉ css

Thiết kế giao diện sử dụng HTML5, CSS được giải thích kết hợp với JAVA-SCRIPT thiết kế menu đáp ứng như mẫu sau

2. Hướng dẫn giải

Responsive Menu hiển thị thanh Navbar trên nhiều thiết bị khác nhau như điện thoại, máy tính bảng, laptop, PC, Tivi. Đối với mỗi loại thiết bị có kích thước màn hình khác nhau, chúng sẽ được biểu diễn theo một cách khác nhau sao cho hợp lý nhất về mặt bố cục. Trong bài viết này, nó dành cho sinh viên sẽ hướng dẫn các bạn tạo một thanh điều hướng Responsive đơn giản

Bước 1. Build interface

Bước đầu tiên là xây dựng phần giao diện, bạn tạo tệp Menu-Responsive. html và đặt đoạn mã HTML dưới đây vào phần thân thẻ

Giao tiếp người máy - Học Responsive Nav

NÓ DÀNH CHO SINH VIÊN

Học HTML

Học CSS

Học JAVA-SCRIPT

   

   

With change the screen size to check any

Quan sát thanh menu Thanh điều hướng này, tôi sẽ tạo ra 4 menu đơn giản trong cặp thẻ a

Chú ý vào thẻ a nằm ở vị trí thứ 5, chính là biểu tượng khi hiển thị ở các thiết bị có kích thước màn hình nhỏ, tôi sẽ giải thích kỹ hơn về cách thức hoạt động của nó ở phần sau

Bước 2. Định dạng các thành phần với CSS

Cũng giống như tất cả các thành phần Responsive khác của bài học số 03 tôi đã trình bày, thuộc tính @media vẫn là phần quan trọng nhất của phần CSS này

Tôi sẽ giải thích một chút về cách vận hành của đoạn mã giao diện css

Đầu tiên thẻ có class="icon", trong trường hợp trình duyệt có chiều rộng nhỏ hơn 600px thì ta sẽ làm cho nó xuất hiện với thuộc tính hiển thị. khối. Trường hợp ngươc lại thẻ này sẽ mặc định được ẩn đi

Tiếp theo với menu chính , khi màn hình có chiều rộng nhỏ hơn 600px, chúng ta sẽ bắt đầu ẩn tất cả menu và chỉ hiển thị menu đầu tiên với đoạn mã này.  

---

Điều hướngTop a. không phải(. con đầu lòng) {

trưng bày. không ai;

}

---

Sắp xếp xong rồi các bạn, chúng ta cùng xem thêm bước cuối cùng bên dưới này

Bước 3. Mã JavaScript

Trong hai bước trước đó, chúng ta đã ẩn menu đi rồi, bây giờ tôi sẽ hướng dẫn chúng ta hiển thị lại menu này theo cách sử dụng sự kiện của JavaScript

Chèn đoạn mã sau vào trong cặp thẻ

hàm clickFunction() {

var x = tài liệu. getElementById("myNavigationTop");

nếu (x. className === "NavigationTop") {

x. className += "đáp ứng";

} khác {

x. className = "NavigationTop";

}}

Ở phần trên khi tạo thẻ liên kết với class="icon" Tôi đã khai báo thêm sự kiện onclick khi sử dụng click vào sẽ gọi hàm clickFuntion(), Các bạn xem mã của hàm clickFunction được trình bày rất cụ thể, khi

OK vậy là đã hoàn thành chung ta chạy file thử Menu-Responsive. html để xem kết quả đạt được nhé

4. SourceCode minh họa

   

   
   ItForStudent-Bai04
    

Giao tiếp người máy - Học Responsive Nav

    NÓ DÀNH CHO SINH VIÊN
    Học HTML
    Học CSS
    Học JAVA-SCRIPT
   

With change the screen size to check any

5. Kết luận

Qua bài viết hướng dẫn này Tôi mong rằng các bạn sẽ hiểu được cách vận hành của menu responsive bằng cách sử dụng Html, Css kết hợp với JavaScript, chúc các bạn thực hiện thành công

Trong lúc mình có gắn cái khung nhận ý tưởng viết bài theo yêu cầu có độc giả, thì trong đó có tới 7% yêu cầu viết bài liên quan đến việc làm cho trang web giao diện hiển thị theo dạng Responsive. Từ đó mình nhận thấy có rất nhiều độc giả ở đây vẫn chưa nắm bắt được cách một website giao diện có thể hiện Responsive là như thế nào nên trong bài này mình sẽ giải thích và hướng dẫn các bạn áp dụng Responsive vào website của mình

Yêu cầu kiến ​​thức

Trong bài này mình chỉ nói qua Responsive nên kiến ​​thức cơ bản mình sẽ không nói qua, vậy nên bạn cần chuẩn bị kiến ​​thức cơ bản HTML và CSS căn bản để có thể hiểu được là Trâu bò

Responsive là gì?

Responsive là một tính từ để chỉ một trang web có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ: thông thường nếu trang web giao diện đặt chiều rộng cố định là 800px thì chắc chắn rằng nếu xem qua trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.

Bạn có thể cho rằng chúng ta có thể chỉ định giá trị chiều rộng từ tuyệt đối (800px) sang loại giá trị tương đối là phần trăm (%) thì có thể hiển thị tương ứng được không. Điều này cũng đúng, nhưng giả sử trang web của bạn có 3 cột trên một hàng thì liệu rằng trên trình duyệt di động, mắt thường của con người có thể thấy chi tiết mà không cần phóng to màn hình hay không?

Responsive active bằng cách chúng ta sẽ viết CSS để cho phép trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt tốt nhất. Chẳng hạn, bạn có thể thiết lập một đoạn CSS bất kỳ mà chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa là 320px (điện thoại). Điều này có nghĩa là Responsive là một kỹ thuật thiết kế kỹ thuật được xử lý từ phía máy khách chứ không phải gửi bất kỳ truy vấn nào đến máy chủ để xử lý (phía máy chủ) nên nó xử lý có một nhược điểm là làm trình duyệt của bạn phải không?

Vì sao phải làm thế nào để áp dụng Responsive lên giao diện trang web?

Để trang web của bạn trở thành Responsive, chúng ta có hai bước như sau

Bước 1. Khai báo chế độ xem meta

Trước tiên bạn cần đặt thẻ này vào cặp trên trong mã HTML của website.

meta viewport có nghĩa là thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt để hiển thị cố định và tương ứng trên tất cả các thiết bị dựa trên chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to ( . Đây là thẻ mình khuyến mãi bạn sử dụng cho toàn bộ các dự án Responsive

Ngoài thẻ meta viewport này còn có các giá trị như

• bề rộng. setting width of viewport
• chiều rộng thiết bị. Định nghĩa chiều rộng của thiết bị
• Chiều cao. setting chiều cao của viewport
• chiều cao thiết bị. Chiều cao cố định của thiết bị
• quy mô ban đầu. Thiết lập mức độ phóng to lúc ban đầu, giá trị là 1 nghĩa là không phóng to, và khi giá trị được thiết lập, người dùng không thể phóng to vì nó đã được định sẵn
• quy mô tối thiểu. Zoom to minimum of device with browser
• quy mô tối đa. Độ phóng to tối đa của thiết bị với trình duyệt
• người dùng có thể mở rộng. Cho phép người dùng phóng to, value is yes or no

In sao lại sử dụng chế độ xem meta?

Bước 2. Viết CSS cho chiều rộng của thiết bị

Ngay tại bước này, chúng ta sẽ tiến hành viết CSS tương ứng với từng mức độ rộng hoặc chiều cao của thiết bị, thông thường thì chúng ta chỉ viết dựa trên chiều rộng và được tính trên đơn vị là pixel. Nhiều người có thể tính toán dựa trên đơn vị như em, rem, DPI, phần trăm,… nhưng nếu bạn là người mới thì cứ dùng pixel cho dễ nhé.

Để viết CSS tương ứng với chiều rộng của trình duyệt, chúng ta sẽ sử dụng thẻ truy vấn

body {

   background: #fff;

   color: 333;

}
@media all and (max-width: 320px) {

   body {

      background: #e7e7e7;

   }

}

3 trong CSS3 (@media query) như sau

body {

   background: #fff;

   color: 333;

}
@media all and (max-width: 320px) {

   body {

      background: #e7e7e7;

   }

}

Điều này có nghĩa là trang web của bạn mặc định sẽ có nền (nền) màu trắng, nhưng khi thu nhỏ trình duyệt xuống còn từ 0px đến 320px thì nó sẽ có nền là màu xám với mã màu #e7e7e7

Trong đoạn trên, đoạn

body {

   background: #fff;

   color: 333;

}
@media all and (max-width: 320px) {

   body {

      background: #e7e7e7;

   }

}

4 có nghĩa là thiết lập điểm dừng cho toàn bộ thiết bị (tất cả – loại phương tiện) và có chiều rộng cố định tối đa là 320px (chiều rộng tối đa – tính năng phương tiện), 320px tương ứng với chiều rộng của chiều rộng . Và các đoạn CSS nằm bên trong truy vấn này sẽ được thực thi khi màn hình duyệt lại đúng với kích thước từ 320px trở xuống

Ngoài ra, bạn cũng có thể thiết lập thêm nhiều điều kiện như

@media only screen and (min-width: 320px) and (max-width: 860px) {…}

Tức là truy vấn này sẽ chỉ áp dụng cho màn hình máy tính để bàn, máy tính bảng, điện thoại thông minh và có kích thước màn hình tối thiểu là 320px nhưng nhỏ hơn 860px

Về giá trị của loại phương tiện và các tính năng phương tiện trong truy vấn @media, bạn có thể tham khảo thêm tại W3Schools để đầy đủ hơn nhưng thông thường ta cứ viết CSS cho loại phương tiện là màn hình và các tính năng phương tiện chỉ quanh quẩn giữa chiều rộng tối thiểu, tối đa

Làm sao để kiểm tra Responsive?

Khi làm việc, bạn có thể kiểm tra Responsive bằng cách co giãn kích thước trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Mà mình sẽ khuyến khích các bạn sử dụng các công cụ hỗ trợ kiểm tra, một trong những công cụ kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ sử dụng và gọn nhẹ. Vui lòng xem cách sử dụng bằng hình ảnh bên dưới

Danh sách các kích thước màn hình thiết bị

Khi viết CSS cho giao diện Responsive, điều quan trọng nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông minh để có thể viết CSS theo ý muốn và đảm bảo rằng nó hoạt động tốt trên nhiều thiết bị, tốt nhất là

Bạn có thể tham khảo kích thước chiều rộng của các thiết bị tại đây, nhưng bạn chỉ cần tạo các điểm ngắt CSS như sau

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  5 (Điện thoại di động, hiển thị theo chiều dọc)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  6 (Điện thoại di động, hiển thị chiều ngang)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  0 (bảng máy tính, hiển thị theo chiều dọc)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  1 (bảng máy tính, hiển thị chiều ngang)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  2 (bảng loại máy tính, hiển thị theo chiều dọc)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  3 (bảng loại máy tính, hiển thị chiều ngang)

• 
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  4 (từ size này trở thành thông thường cho desktop list)

Ví dụ cấu trúc CSS của một giao diện Responsive thông thường

________số 8

Mobile-First

Khi nói về làm giao diện Responsive thì bạn cũng cần biết qua khái niệm Mobile-first vì nó sẽ giúp quy trình làm giao diện Responsive của bạn nhanh hơn rất nhiều. Mobile-first nghĩa là đặt tên cho một quy trình thiết kế mà chúng ta sẽ bắt đầu thiết kế cho giao diện ở điện thoại trước và sử dụng điện thoại làm nền tảng ban đầu, sau đó sẽ đến các thiết bị khác như máy tính bảng,

Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng các tính năng phương tiện là chiều rộng tối thiểu chứ không sử dụng cái gì khác. Mình có ví dụ sau

@media all and (min-width: 320px) {

body {

   background: #e7e7e7;

   color: #333333;

}

}

Điều này có nghĩa là các thiết bị có chiều rộng tối thiểu là 320px sẽ áp dụng các CSS bên trong, đương nhiên nó cũng sẽ bao gồm luôn giao diện máy tính bảng, máy tính để bàn,…

Và khi sử dụng quy trình mobile-first thì CSS của bạn sẽ có cấu trúc thế này

body {

   background: #fff;

   color: 333;

}
@media all and (max-width: 320px) {

   body {

      background: #e7e7e7;

   }

}

0

Thế tại sao lại nên sử dụng mobile-first?

• Tập trung tối đa vào giao diện trên điện thoại vì xu hướng sử dụng điện thoại ngày càng tăng
• Chuyển việc viết lại CSS, vì CSS trên điện thoại có thể được tái sử dụng trên máy tính để bàn. Nhưng nếu bạn viết CSS trên máy tính để bàn trước thì ở giao diện điện thoại bạn vẫn phải viết lại nếu muốn tùy biến
• Dễ dàng trong việc khai thác và quản lý, nâng cấp sau này
• Tránh các lỗi hiển thị trên điện thoại do tùy chọn biến CSS từ máy tính để bàn
• And many reason do other which only when doing new know

Một số kiến thức cần biết khi viết CSS Responsive

• Ngoài đơn vị của breakpoint là px, thì các đơn vị đo chiều dài trong trang web phải là phần trăm. Hay nói đúng hơn là sử dụng đơn vị tương đối
• Nên sử dụng

  
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  5 thay vì

  
  
  body {
  
     background: #fff;
  
     color: 333;
  
  }
  @media all and (max-width: 320px) {
  
     body {
  
        background: #e7e7e7;
  
     }
  
  }
  
  

  6 để tránh cố định chiều rộng
• Sử dụng hiển thị. none for other components to hide in each device that you want to hide. And display. chặn ở các thiết bị cần hiển thị ra
• Sử dụng tùy chọn. quan trọng nếu cần thiết overs over CSS

Cơ bản chỉ là vậy thôi, thực hiện Responsive thì căng thẳng nhất là phần làm menu nhưng khi thực hiện bạn sẽ nêu rõ chi tiết hơn

Lời kết

Trong bài này mình đã nói chi tiết qua khái niệm Responsive và cách phát triển khai một giao diện Responsive là như thế nào. Bây giờ bạn có thể thực hiện hành động bằng cách tạo một tệp HTML đơn giản, rồi khai báo thẻ meta viewport rồi thử viết CSS để xác định rõ hơn về cách hoạt động của nó nhé.

Hy vọng trong tương lai, mình sẽ có một bài hướng dẫn làm website giao diện HTML dạng Responsive hoàn chỉnh để bạn có thể tự thực hiện. Và khi mà bạn đã nắm được cách làm giao diện Responsive rồi thì việc làm theme WordPress Hỗ trợ Responsive không còn quá khó khăn nữa. Mọi thứ sẽ được mình trình bày từ