Hiện tại google rất quan trọng việc hiển thị website đẹp và thân thiện trên mobile. Khi website hiện thị tốt trên mobile thì google sẽ đánh giá rất cao. Vậy để hiển thị tốt web của bạn cần có responsive.
Mục lục
- Responsive là gì?
- Điều kiện cần phải có khi làm responsive là gì?
- Các giá trị của thẻ meta name=”viewport”
Responsive là gì?
Hiểu nôm na thì responsive là website đáp ứng được các trình duyệt khác nhau. Giúp web dễ đọc và tương tác trên các thiết bị. Trên điện thoại sẽ không phải zoom để nhìn phần tử …
Điều kiện cần phải có khi làm responsive là gì?
Để responsive bắt buộc phải có thẻ meta viewport trong
Khi thêm code trên là web đã được nhận respon rồi.
Chú ý: nếu web không có code css đặc biệt dành cho respon thì không lên dùng thẻ meta viewport này. nếu không sẽ phản tác dụng 🙂
Các giá trị của thẻ meta name=”viewport”
| width | The width of the virtual viewport of the device. |
| device-width | The physical width of the device’s screen. |
| height | The height of the “virtual viewport” of the device. |
| device-height | The physical height of the device’s screen. |
| initial-scale | The initial zoom when visiting the page. 1.0 does not zoom. |
| minimum-scale | The minimum amount the visitor can zoom on the page. 1.0 does not zoom. |
| maximum-scale | The maximum amount the visitor can zoom on the page. 1.0 does not zoom. |
| user-scalable | Allows the device to zoom in and out. Values are yes or no. |
Ví dụ: không cho người dùng zoom khi dùng điện thoại thì như sau
Chúc các bạn thành công!
Responsive là phong cách thiết kế website phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Responsive Web Design là xu hướng thiết kế web hiện nay. Hãy cùng tìm hiểu sâu hơn về phong cách này và các bước thực hiện cơ bản trong bài viết dưới đây nhé!
Đầu tiên, hãy cùng Bizfly Cloud tìm hiểu chung về giao diện Responsive trên website.
1. Responsive là gì vậy?
Responsive là một thuật ngữ hay tính từ chỉ một website có thể hiển thị và tương thích với mọi trình duyệt [co dãn theo kích thước trình duyệt]. Ví dụ thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 960px, nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại theo chiều rộng là 320px – 420px, đấy là so với những chiếc điện thoại màn hình nhỏ, còn với những chiếc điện thoại lớn hơn thì sẽ hiển thị khác.
Một trang web có thể thân thiện với khả năng xem trên mọi thiết bị khác nhau sẽ là một điểm cộng to lớn cho doanh nghiệp của bạn. Điều này có lợi cho bạn trong việc dễ dàng tiếp cận khách hàng tiềm năng.
Ví dụ: Hãy mở trang chủ của một website Responsive, sau đó thao tác thu nhỏ trình duyệt, bạn sẽ thấy website đó không hề xuất hiện Scrollbar ngang [thanh cuộn ngang], mà nó sẽ tự động co dãn và sắp xếp lại các thành phần sao cho phù hợp với chiều rộng mới.
2. Lợi ích của Responsive
Bố cục lại giao diện website tương thích với nhiều loại kích cỡ màn hình khác nhau. Làm tăng sự hài lòng và tăng trải nghiệm người dùng.
Giao diện này đảm bảo bạn sẽ luôn luôn có những trải nghiệm lướt tốt nhất, đẹp đẽ nhất khi sử dụng website dù bạn có đang dùng tringh duyệt ở thiết bị nào đi nữa.
3. Hai bước để áp dụng Responsive lên giao diện website
Bước 1: Khai báo trường meta viewport trên website
Trước tiên, đặt thẻ sau đây vào trong cặp trên trong mã HTML của website của bạn.
Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình. Với ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và tương thích trên tất cả các thiết bị dựa vào chiều rộng của thiết bị [device-width] và không cho phép người dùng phóng to, thu nhỏ, theo chiều ngang của màn hình [thiết lập initial-scale với giá trị cố định là 1.0].
Chú thích các giá trị của thẻ meta viewport:
• Width: Định dạng chiều rộng của viewport.
• Device-width: Chiều rộng cố định của thiết bị khác nhau.
• Height: Để thiết lập chiều cao của viewport.
• Device-height: Đó là chiều cao cố định của thiết bị.
• Initial-scale: Định dạng mức phóng to trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng thì người dùng không thể phóng to vì nó đã được cố định.
• Minimum-scale:Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt.
• Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.
• Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.
Bước 2: Viết CSS cho chiều rộng cho các thiết bị
Bạn viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel [px]. Ngoài ra bạn có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm[%],…nhưng để dễ dàng hơn, hãy sử dụng pixel.
Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 [@media query] giúp ta có thể phân các đoạn CSS theo kích thước màn hình. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau:
- Các CSS sau dùng cho toàn bộ website và desktop
body {
background: #fff;
color: #ccc;
}
- Các CSS này cho Ipad ngang [1024 x 768]
@media screen and [max-width: 1024px]{
#wrapper{ width: 100%;}
}
- Các CSS sau dùng cho Tablet nhỏ [480 x 640]
@media screen and [max-width: 480px]{
}
- Các CSS sau dùng cho Iphone [480 x 640]
@media screen and [max-width: 320px]{
}
- Các CSS này Smartphone nhỏ
@media screen and [max-width: 240px]{
}
Lưu ý:
- Các bạn nên sử dụng max - width thay vì width để tránh cố định chiều rộng của website.
- Sử dụng thuộc tính display: none cho các thành phần cần ẩn đi ở từng thiết bị mà mình muốn ẩn.
- Display: block ở các thiết bị mình cần hiển thị ra.
- Hãy sử dụng tùy chọn !important nếu cần viết đè CSS.
Chúc các bạn thao tác thành công!
Theo Bizfly Cloud chia sẻ
Nó đang làm việc! Trên trang của bạn mà bạn đang sử dụng:
Khi tôi mở trang trên điện thoại [ios7 iphone5] tôi thấy kết quả chính xác.
Bạn có chắc chắn 100% rằng bạn đã thực sự thử đưa những điều sau vào mã của mình không?
Nó không bị bỏ qua.
CẬP NHẬT1
Tôi vừa thấy rằng trong mã của bạn, có vẻ như bạn đang sử dụng chế độ xem thứ hai của tôi nhưng tôi có thể bị thay đổi bởi javascript thành chế độ xem 640px. Đó có thể là lý do khiến bạn cảm thấy như bị phớt lờ. Bởi vì trong thời gian chạy, chế độ xem bị thay đổi ...
CẬP NHẬT2
Ok đã tìm thấy vấn đề.
function updateWidth[]{ viewport = document.querySelector["meta[name=viewport]"]; if [window.orientation == 90 || window.orientation == -90] { viewport.setAttribute['content', 'width=1401, initial-scale=0.34, maximum-scale=1.0, user-scalable=1']; } else { viewport.setAttribute['content', 'width=640, initial-scale=0.47, maximum-scale=1.0, user-scalable=1']; } }Trang của bạn đang gọi hàm này, chức năng này sẽ ghi đè chế độ xem của bạn. Bạn đã biết về chức năng đó?
Thế giới tạo hình luôn thay đổi theo thời gian, cái mới đang dần thay thế cho cái cũ, cập nhập mới để phù hợp với xu thế thẩm mỹ. Kể cả giao diện cũng vậy, nó như là một tác phẩm nghệ thuật tạo nên những cung bậc cảm xúc cho người dùng, người thiết kế cũng như một họa sỹ phải biết vẽ lên những nét thâm thúy cũng như sáng tạo ra cái độc đáo nhất, bản thân mỗi người cũng có cảm nhận riêng nhưng nhìn chung đều hướng về tính khả dụng, thẩm mỹ. Trong ngành thiết kế website đòi hỏi có sự ăn khớp giữa thẩm mỹ và tiện dụng. Chính vì thế, trong những năm gần đây đã xuất hiện kỹ thuật thiết kế web Responsive, nhưng vẫn có một số độc giả chưa thực sự nắm được cách một giao diện website có thể hiển thị giao diện Responsive là như thế nào, nên trong bài này chúng tôi 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.
Kiến thức để thiết kế ra giao diện Responsive
Trong bài viết này chúng tôi chú trọng vào giao diện hiển thị Responsive chứ không đi sâu vào kiến thức cơ bản, do vậy để có thể hiểu một cách chọn vẹn tốt nhất bạn cần nên chuẩn bị kiến thức căn bản HTML, CSS [HTML5, CSS3].
Responsive là gì?
Responsive là một thuật ngữ hay tính từ chỉ một website có thể hiển thị và tương thích với mọi trình duyệt [co dãn theo kích thước trình duyệt]. Ví dụ thông thường một website có độ hiển thị chuẩn trên màn hình máy tính ở Việt Nam là 960px, nhưng chắc chắn nó sẽ hiển thị trên màn hình điện thoại theo chiều rộng là 320px – 420px, đấy là so với những chiếc điện thoại màn hình nhỏ, còn với những chiếc điện thoại lớn hơn thì sẽ hiển thị khác. Responsive là gì
- Một điều quan trọng nữa thiết kế website theo kiểu truyền thống người design thường lấy px[pixel] để làm đơn vi tính chiều ngang của một trang web, còn áp dụng kỹ thuật Responsive Designer thường lấy % để định dạng chiều rộng của website, với mục đích tối ưu và thuận tiện xử lý.
- Cách thức hoạt động của Responsive là chúng ta sẽ viết code CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn các bạn có thể code và thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa ở Iphone 4 là 640px. Responsive sử dụng kỹ thuật thiết kế được xử lý từ client-side chứ không thông qua truy vấn đến máy chủ để xử lý [server - side] nên nó có một nhược điểm là làm trình duyệt của bạn phải tốn thời gian chờ đợi để xử lý CSS.
Vậy làm thế nào có thể áp dụng Responsive lên giao diện website?
Để cho website của bạn hiển thị được Responsive, chúng ta có hai bước như sau:
Bước 1. Khai báo trường meta viewport trên website
Trước tiên bạn cần đặt thẻ này vào trong cặp trên trong mã HTML của website của bạn.
Thẻ meta viewport nghĩa là một thẻ thiết lập hiển thị cho trình duyệt tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, bạn có thể định dạng trình duyệt hiển thị cố định và tương thích trên tất cả các thiết bị dựa vào chiều rộng của thiết bị [device-width] và không cho phép người dùng phóng to, thu nhỏ, theo chiều ngang của màn hình [thiết lập initial-scale với giá trị cố định là 1.0].
Ngoài ra thẻ meta viewport này còn có các giá trị mình có thể giải thích như sau:
• Width: Định dạng chiều rộng của viewport. • Device-width: Chiều rộng cố định của thiết bị khác nhau. • Height: Để thiết lập chiều cao của viewport. • Device-height: Đó là chiều cao cố định của thiết bị. • Initial-scale: Định dạng mức phóng to trình duyệt lúc ban đầu, với giá trị là 1 có nghĩa là không phóng to, khi giá trị được thiết lập, định dạng thì người dùng không thể phóng to vì nó đã được cố định. • Minimum-scale:Là mức phóng to tối thiểu đặt cho thiết bị với trình duyệt. • Maximum-scale: Mức phóng to tối đa cho một thiết bị với trình duyệt.
• Muser-scalable: Cho phép người dùng có thể phóng to, giá trị thường là yes hoặc no.
Bước 2. Viết CSS cho chiều rộng cho các thiết bị
Ngay tại bước này, chúng ta sẽ triển viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel[px]. Nhiều người có thể tính dựa trên đơn vị đo là em, rem, DPI, phần trăm[%],…nhưng nếu bạn là người mới thì cứ dùng pixel [px] cho dễ nhé.
Để viết CSS tương ứng cho chiều rộng của trình duyệt sử dụng cú pháp @media trong CSS3 [@media query] giúp ta có thể phân các đoạn CSS theo kích thước màn hình. Kích thước chúng ta đang cần phân chia chính là độ rộng màn hình như sau:
- Các CSS này dùng cho toàn bộ website và desktop body { background: #fff; color: #ccc;
}
- Các CSS này cho Ipad ngang[1024 x 768]
@media screen and [max-width: 1024px]{ #wrapper{ width: 100%;} }
- Các CSS này cho Tablet nhỏ[480 x 640]
@media screen and [max-width: 480px]{
}
- Các CSS này cho Iphone[480 x 640]
@media screen and [max-width: 320px]{
}
- Các CSS này Smartphone nhỏ
@media screen and [max-width: 240px]{
}
Tóm lại một số kiến thức để bạn có thể viết được giao diện CSS Responsive Ngoài đơn vị px ra, thì các đơn vị đo chiều dài trong website tốt nhất nên là phần trăm[%]. Hay nói đúng hơn là sử dụng đơn vị có tính tương đối.
Các bạn nên sử dụng max-width thay vì width để tránh cố định chiều rộng của website.
Sử dụng thuộc tính display: none cho các thành phần cần ẩn đi ở từng thiết bị mà mình muốn ẩn. Và display: block ở các thiết bị mình cần hiển thị ra. Bạn có thể sử dụng tùy chọn !important nếu cần đè viết đè CSS. Căn bản là chỉ vậy thôi, thực ra Responsive thì chỉ căng nhất là phần thiết kế menu nhưng khi thực hành nhiều bạn sẽ nắm rõ chi tiết hơn. Trên đây là những cách chia sẻ nhỏ để các bạn có thể hiểu rõ về thiết kế website áp dụng kỹ thuật Responsive. Nếu các bạn có thắc mắc gì xin liên hệ với chúng tôi.
- Hotline: 0948.854.888 - Địa chỉ: Phòng B1T12, Toà nhà 335 Cầu Giấy, Hà Nội - Website: Nanoweb.vn
- Email: