Trang chủ Web DevelopmentHTML/CSS Làm sao để cho website hiển thị Responsive?

Làm sao để cho website hiển thị Responsive?

bởi Thạch Phạm
73 bình luận 24040 views
Khuyến mãi hosting

https://www.youtube.com/watch?v=0yirTUH8Q70&feature=youtu.be

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ó đến 7% các yêu cầu viết bài liên quan đến việc cho giao diện website 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 được cách một giao diện website có thể hiển thị 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 các kiến thức cơ bản mình sẽ không nói qua, do vậy bạn cần chuẩn bị kiến thức HTML và CSS căn bản để có thể hiểu được trọn vẹn.

Responsive là gì?

responsive

Responsive là một tính từ để chỉ một website 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 giao diện website đặt một chiều rộng cố định là 800px thì chắc chắn nếu xem ở 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.

Có thể bạn cho rằng chúng ta có thể gán giá trị chiều rộng từ tuyệt đối (800px) sang kiểu giá trị tương đối là phần trăm (%) thì có thể sẽ hiển thị tương ứng được. Điều này cũng đúng, nhưng giả sử website 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? Do vậy, chúng ta sẽ muốn giao diện sẽ được hiển thị khác đi một xíu trên trình duyệt nhỏ hơn các trình duyệt thông thường, và Responsive là giải pháp làm việc này nhanh nhất và dễ nhất.

Responsive hoạt động bằng cách chúng ta sẽ viết 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 bạn có thể 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 là 320px (điện thoại). Điều này có nghĩa là Responsive là một kỹ thuật thiết kế được xử lý từ client-side chứ không hề gửi truy vấn nào đế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 mất nhiều thời gian hơn để xử lý CSS.

Vậy làm thế nào để áp dụng Responsive lên giao diện website?

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

Bước 1. Khai báo meta viewport

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

<meta name="viewport" content="width=device-width, initial-scale=1">

meta viewport nghĩa là một 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 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 (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive.

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

  • width: thiết lập chiều rộng của viewport.
  • device-width: Chiều rộng cố định của thiết bị.
  • height: thiết lập chiều cao của viewport.
  • device-height: Chiều cao cố định của thiết bị.
  • initial-scale: 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 thì người dùng không thể phóng to vì nó đã được cố định.
  • minimum-scale: Mức phóng to tối thiểu của thiết bị với trình duyệt.
  • maximum-scale: Mức phóng to tối đa của thiết bị với trình duyệt.
  • user-scalable: Cho phép người dùng phóng to, giá trị là yes hoặc no.

Tại sao lại sử dụng meta viewport? Hãy cứ xem ví dụ của một nội dung có meta viewport và không có meta viewport nhé.

responsive-without-metaviewport

responsive-with-metaviewport

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 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. Nhiều người có thể tính dựa trên đơn vị là 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 cho chiều rộng của trình duyệt, chúng ta sẽ sử dụng thẻ truy vấn @media 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à website của bạn mặc định sẽ có nền (background) 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 @media all and (max-width: 320px) nghĩa là thiết lập breakpoint cho toàn bộ thiết bị (all – media type) và có chiều rộng cố định tối đa là 320px (max-width – media features), 320px tương ứng với kích thước chiều rộng của màn hình iPhone. Và các đoạn CSS nằm bên trong query này sẽ được thực thi khi co màn trì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à query này sẽ chỉ áp dụng cho màn hình desktop, máy tính bảng, smartphone và có kích thước màn hình tối thiểu là 320px nhưng nhỏ hơn 860px.

Về các giá trị của media type và media features trong @media query, bạn có thể tham khảo thêm tại W3Schools cho đầy đủ hơn nhưng thông thường ta cứ viết CSS cho media type là screen và media features chỉ quanh quẩn min-width, max-width mà thôi.

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ẹ. Hãy xem cách sử dụng bằng ảnh dưới:

resizer

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, việc 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 dụng để có thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng.

Bạn có thể tham khảo các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:

  • max-width: 320px (điện thoại di động, hiển thị chiều dọc)
  • max-width: 480px (điện thoại di động, hiển thị chiều ngang)
  • max-width: 600px (máy tính bảng, hiển thị chiều dọc)
  • max-width: 800px (máy tính bảng, hiển thị chiều ngang)
  • max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
  • max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
  • min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).

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


/* Các CSS này dành cho toàn bộ website và desktop */
body {
   background: #fff;
   color: 333;
}

/* Dành cho điện thoại */
@media all and (max-width: 480px) {

}

/* Dành cho máy tính bảng */
@media all and (max-width: 1024px) {

}

Khái niệm Mobile-First

mobile-first

Khi nói về làm giao diện Responsive thì bạn cũng cần nê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ên 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, desktop, retina,…

Đặc điểm của quy trình mobile-first là chúng ta chỉ sử dụng media features là min-width 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, dĩ nhiên nó cũng sẽ bao gồm luôn giao diện máy tính bảng, desktop,…

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:

/* Dành cho điện thoại */
@media all and (min-width: 320px) {...<span style="line-height: 1.5;">}</span>

/* Dành cho máy tính bảng chiều dọc */
@media all and (min-width: 600px) {...}

/* Dành cho máy tính bảng chiều ngang */
@media all and (min-width: 1024px) {...}

/* Dành cho màn hình desktop */
@media all and (min-width: 1280px) {...}

Thế tại sao lại nên sử dụng mobile-first? Có rất nhiều lý do như:

  • Tập trung tối đa vào giao diện ở điện thoại vì xu hướng sử dụng điện thoại ngày càng tăng.
  • Tránh việc viết lại CSS, vì một CSS ở điện thoại có thể được tái sử dụng trên desktop. Nhưng nếu bạn viết CSS trên desktop 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 triển khai 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 việc tùy biến từ CSS ở desktop.
  • Và nhiều lý do khác mà chỉ khi làm mới biết.

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 website nên 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 max-width thay vì width để tránh cố định chiều rộng.
  • Sử dụng display: none cho các thành phần cần ẩn đi ở từng thiết bị mà bạn muốn ẩn. Và display: block ở các thiết bị cần hiển thị ra.
  • Sử dụng tùy chọn !important nếu cần đè viết đè CSS.

Cơ bản là chỉ vậy thôi, thực ra Responsive thì chỉ căng nhất là phần làm menu nhưng khi thực hành bạn sẽ nắm 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 triển khai một giao diện Responsive là như thế nào. Bây giờ bạn có thể thực hành bằng cách tạo một tập tin HTML đơn giản, rồi khai báo thẻ meta viewport rồi thử viết CSS để nắm 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 tutorial làm một giao diện website HTML dạng Responsive hoàn chỉnh để bạn có thể tự thực hành. Và khi mà bạn đã nắm được cách làm một 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ừ từ.

73 bình luận

Có thể bạn quan tâm

73 bình luận

Responsive là gì? Tại sao cần làm website responsive 19/08/2020 - 11:25 Sáng

[…] đầu hàng của một web responsive chính là khả năng hiển thị tốt trên nhiều thiết bị di động giao diện kích thước . Từ smartphone, tablet, ipad… nên rất được các nhân và doanh nghiệp lựa chọn […]

Reply
Phạm Vũ 05/06/2020 - 9:15 Sáng

/* Dành cho điện thoại */
@media all and (min-width: 320px) {…<span style=”line-height: 1.5;”>}</span>
 
 
Đoạn này sai nè a, thẻ </span> phải ở trong } chứ anh

Reply
SẢN PHẨM PHẦN MỀM – TechExpress 16/06/2019 - 9:57 Chiều

[…] 20 thg 5, 2016 – Hướng dẫn cách Sử dụng @Media CSS tạo Responsive cho … CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone …‎@media CSS là gì? · ‎Sử dụng @media để tạo … · ‎Sử dụng @Media với các … · ‎IpadLàm sao để cho website hiển thị Responsive? – Thach Pham […]

Reply
SẢN PHẨM CABLING – TechExpress 16/06/2019 - 9:51 Chiều

[…] 20 thg 5, 2016 – Hướng dẫn cách Sử dụng @Media CSS tạo Responsive cho … CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone …‎@media CSS là gì? · ‎Sử dụng @media để tạo … · ‎Sử dụng @Media với các … · ‎IpadLàm sao để cho website hiển thị Responsive? – Thach Pham […]

Reply
test – generatepress.ellon.club 16/06/2019 - 6:15 Chiều

[…] 20 thg 5, 2016 – Hướng dẫn cách Sử dụng @Media CSS tạo Responsive cho … CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone …‎@media CSS là gì? · ‎Sử dụng @media để tạo … · ‎Sử dụng @Media với các … · ‎IpadLàm sao để cho website hiển thị Responsive? – Thach Phamhttps://thachpham.com/web-deve… […]

Reply
Lập trình wordpress – blogduong 28/07/2017 - 11:08 Sáng

[…] có Responsive, mà nếu bạn muốn thêm Responsive thì có thể làm dễ dàng từ bài Làm sao để có giao diện Responsive của […]

Reply
Thiết kế wordpress – blogduong 28/07/2017 - 11:03 Sáng

[…] có Responsive, mà nếu bạn muốn thêm Responsive thì có thể làm dễ dàng từ bài Làm sao để có giao diện Responsive của […]

Reply
Giới thiệu serie Lập trình theme WordPress 2015 – webfreetest 28/07/2017 - 10:46 Sáng

[…] có Responsive, mà nếu bạn muốn thêm Responsive thì có thể làm dễ dàng từ bài Làm sao để có giao diện Responsive của […]

Reply
Cường Trương 25/06/2017 - 2:08 Chiều

Chào anh.
Anh làm video hướng thiết kế giao diện Responsive có thêm #menu đi anh.

Reply
Minh 03/06/2017 - 1:49 Chiều

Chào bạn. Mình có 1 vấn đề muốn nhờ bạn giúp. Website của mình dùng Genesis child theme (Wellness pro). Mình dùng Thrive content builder viết 1 post, trong post có table. Khi xem trên điện thoại thì table tự động co chiều rộng cột lại làm cho chữ nhảy lung tung. Mình đã thêm dòng code sau vào additional ccs của theme rồi nhưng không có tác dụng:

@media all and (min-width: 320px) {
body {
background: #e7e7e7;
color: #333333;
}
}
Nhờ bạn chỉ giúp cách khắc phục. Cảm ơn bạn rât nhiều

Reply
Minh 03/06/2017 - 12:47 Chiều

Bạn giúp mình 1 vấn đề này nhé. website của mình dùng genesis child theme (wellness pro). Dùng Thrive content builder để tạo 1 post, trong post có table. Sau đó xem trên laptop thì ok, nhưng xem trên đtdđ thì các cột của table bị co lại, chữ nhảy lung tung. Mình muốn là trên đt xem đến đoạn có table thì chiều rộng cột không bị co lại mà có thể vuốt sang trái hay phải để xem hết table.Mình có thêm đoạn code sau vào additional ccs của theme nhưng không có kết quả

@media screen and (max-width: 640px) {
table {
overflow-x: auto;
display: block;
}
}
Bạn có thể giải thích giúp mình với. Cảm ơn bạn trước

Reply
Chu Đức Thương 01/06/2017 - 3:53 Chiều

Chào bạn. Cho mình hỏi sao website của mình đăng nhập bằng pc thì vào được mà đăng nhập bằng mobile lại không được. Hồi trước vào bình thường, bây giờ bị chuyển hướng sang seokirja.com. Mình dùng themes Sysney. Cám ơn bạn

Reply
Phạm Duy Quân 29/05/2017 - 10:18 Chiều

Anh ơi anh có thể cho em biết anh dùng trình soan thảo nào và plugin nào mà trang web lại tự thay đổi theo mình gõ code ngay lập tức vậy ạ? Trên sublimetext em dùng auto-save và liveReload nhưng vẫn bị trễ 1s

Reply
thiện 23/05/2017 - 8:50 Chiều

hi anh, e thấy web của anh để initial-scale=1 mà khi lướt trên di động vẫn zoom đc vậy anh, anh hướng dẫn em để zoom được như vậy ạ

Reply
HungPhan 11/05/2017 - 10:47 Sáng

Chào anh Thạch!
Em có sử dụng Storefont cho website của mình theo hướng dẫn của anh. Ban đầu thì nó hiển thị rất tốt trên các loại thiết bị vì Themes này như anh có đề cập là có hỗ trợ Responsive, nhưng sau khi em dùng CSS để chỉnh sữa giao diện trên máy tính thì hiển thị trên điện thoại có vấn đề. Em cũng đã dùng đơn vị tương đối là: em, rem, % thay cho px nhưng cũng không ăn thua. (website của em là: Babyhb.com)
Nhờ anh chỉ em cách khắc phục với ạ. Many Thanks

Reply
sada 27/05/2020 - 2:33 Chiều

:))))

Reply
Vũ Thắng 17/04/2017 - 10:32 Chiều

Chào bạn! mình đang viet trang web để bán hàng theo hướng dẫn mình có tìm hiểu và chuyển trang web từ http sang https nhưng sau đó giao diện Responsive lại không hiển thị được lữa. Mình chưa biết khắc phục thế nào. dù dùng chrome khi kéo nhỏ lại trang web vẫn hiển thị giao diện mobile nhưng dùng điện thoại thì không được. bạn có thể xem giúp mình được không. web của mình là bephadong,vn
mình mới làm nên rất mong được giúp đỡ – Thanks !

Reply
phan 14/04/2017 - 8:52 Sáng

chỉ cần làm 4 loại mức…@media screen{1200–992–768-480–}là nó sẽ đẹp trên tất cả các thiết bị

Reply
binh 25/03/2017 - 2:53 Sáng

bạn có thể giúp mình làm một trang web chuẩn seo dạng web xổ số. tên miền và host nữa. mình trả mọi phí

Reply
nguyen nhat minh 08/01/2017 - 8:48 Chiều

Thành thật cảm ơn về bài viết và nhờ a chỉ giáo e blog này a: http://www.blogchiasetailieu89.tk
Chúc Thach Pham sức khỏe!
Trân trọng!

Reply
nguyen nhat minh 08/01/2017 - 8:46 Chiều

Thành thật cảm ơn về bài viết và video hướng dẫn khá chi tiết, mình đã tự làm được cho trang chuyennha.today

Chúc Thach Pham sức khỏe!
Trân trọng!

Reply
iphone 5s 26/12/2016 - 10:04 Chiều

liệu có pubin nào hỗ trợ việc này không thạch Phạm

Reply
Tiến 23/12/2016 - 10:08 Chiều

Chào anh. Em đang gặp vấn đề về giao diện của website trên điện thoại. Khi em nhấp 2 thanh menu trên hình thì mấy tab không hiện ra mà nó chỉ hiện ra dấu # ở cuối URL thôi. Em thử 2-3 theme khác nhau từ Mythemeshop hay ThemeJunkie rồi nhưng mà nó vẫn bị vậy. Em không biết đang bị lỗi gì, anh giúp em được không ạ.

Em cảm ơn anh

Reply
Chuyển nhà Quận 7 23/12/2016 - 4:05 Chiều

Thành thật cảm ơn về bài viết và video hướng dẫn khá chi tiết, mình đã tự làm được cho trang chuyennha.today

Chúc Thach Pham sức khỏe!
Trân trọng!

Reply
Thạnh 30/12/2016 - 12:07 Sáng

Web của bạn đã có responsive đâu?

Reply
chi 15/12/2016 - 9:44 Sáng

em muốn xin code hiển thị cái menu số 1 2 3 bên phải đc ko anh cám ơn nhiều
http://congnghecit.com

Reply
Quang 15/12/2016 - 9:21 Sáng

Chao bạn, mình rất thích những kiến thức bạn đã chia sẻ và hướng dẫn mọi người, mỗi khi mình bí hay vào đây đọc những kiến thức bạn share, hiện mình đang gặp chút rắc rối với trang web của mình ( http://www.aioclick.com),
Vướng mắc:
1. Trong phần bảng giá: nếu mình để dạng text và bảng thì xem trên lap thì ok, nhưng xem trên mobile thì không tự resize bảng giá được, không phóng to thu nhỏ được ( các phần khác thì bình thường )
2. Nếu chuyển phần bàng giá thành file hình ảnh để up lên thì xem trên lap ok, và trên mobile cũng resize ok , nhưng phần chữ quá nhỏ mà không phóng to hay thu nhỏ như những trang khác được
Mình đã vọc vạch nhưng chưa biết cách xử lý vấn đề này, rất mong bạn nghía qua và gợi ý giúp mình vấn đề còn thiếu sót,
Cảm ơn nhiều
Thân

Reply
Trần Lực 07/12/2016 - 8:54 Chiều

Anh ơi cho em hỏi xíu được không ạ.
Em đang muốn code 1 trang web có chức năng test responsive như thế này để làm đồ án tốt nghiệp sắp tới. Nhưng em chưa biết phải triển khai như thế nào. Anh có thể cho em ý kiến được không ạ. Em gửi anh link trang web:
http://responsivetest.net/#u=http://www.zootemplate.com|1024|768|1
Em cảm ơn anh

Reply
Hoàng 06/12/2016 - 11:23 Sáng

Anh ơi anh có thể giúp em viết thế nào để mobile hiển thị bài post theo kiểu:
Nội – bài liên quan – nội dung bình luận.
Hiện tại của em đang hiển thị kiểu:
nội dung – bình luận – bài liên quan.
Anh chỉ em với, cái này em chịu luôn rồi.

Reply
Nguyễn 28/11/2016 - 10:42 Sáng

Nếu chỉ dựa vào đơn vị tính pixel, mình thấy bây giờ nhiều điện thoại có độ phân giải tới fullHD không thua gì máy tính, như vậy khi hiển thị trang web rất nhỏ, có cách gì xử lý không ạ?

Reply
Thạch Phạm 01/12/2016 - 12:55 Sáng

Như trong bài mình có đề cập là không nên sử dụng đơn vị tuyệt đối như px mà nên dùng đơn vị tương đối như % hoặc em, rem.

Reply
trần hữu phú 18/11/2016 - 8:44 Chiều

giả sử m cho max-width: 700 px; thì lúc này m chia các div với độ rộng như thế nào cho hợp lý với độ rộng tính bằng %, có cách tính nào k ạ, gsu 3 div thuoc 1 div lớn
sau khi cho co div lớn là 95%, thì 3 div nhỏ chi thế nào cho hợp lý ạ

Reply
phanhuutieu 30/10/2016 - 3:21 Chiều

chào anh, cho em hỏi làm thế nào để giao diện di dộng hiển thị như trên pc ạ.em cảm ơn.

Reply
Thạch Phạm 30/10/2016 - 5:46 Chiều

Bạn xóa cái dòng meta viewport đi là được nhé.

Reply
Thịnh 29/10/2016 - 9:16 Sáng

Chào anh, cho em hỏi em đã Khai báo meta viewport trên web, và kiểu chữ đã được bó lại cho gọn màn hình, nhưng hình ảnh thì nó vẫn giữ nguyên thế nên nhìn rất xấu. Em xin hỏi có câu lệnh nào cho nó bó gọn lại như kiêu chữ không anh nhỉ. Em chỉ mới Khai báo meta viewport mà gg đã đánh giá web em thân thiện với di động luôn rồi anh à

Reply
Thạch Phạm 30/10/2016 - 6:19 Chiều

BẠn có thể thêm đoạn CSS sau nhé:

img { max-width: 100%; height: auto }

Reply
Tran Duc Thao 14/11/2016 - 1:09 Sáng

Đúng câu hỏi mình cần. TP giúp thêm chút là ngoài hình ảnh, có CSS danh cho video youtbue không TP?

Reply
Thạch Phạm 16/11/2016 - 12:03 Sáng

Youtube dùng player của họ nên không có CSS thêm được bạn nhé.

Reply
Thắng Lê 24/10/2016 - 11:32 Chiều

Reply
Ty Sàn 17/10/2016 - 9:12 Chiều

Bài viết rất hay rất chi tiết. Cảm ơn Thachpham nhiều.

Reply
Nhất 06/10/2016 - 10:09 Sáng

thạch có thể trợ giúp mình: sao mình dùng plugin Responsive mà không hiển thị được trên ĐTdd: http://vetranhtuongpro.com/ve-tranh-tuong-mam-non/ , thaks Thạch

Reply
Mĩ kiểm định 02/10/2016 - 2:35 Chiều

website của mình trên site google https://sites.google.com/site/kiemdinhat2/ không tương thích với kích thước mỗi màn hình khác nhau, mình không biết cách responsive, bạn có thể chỉ giúp mình cách đơn giản nhất được không? cảm ơn bạn!

Reply
Doan 29/09/2016 - 3:38 Chiều

mình có trang web này http://dulichmygiare.vn và muốn Responsive để chạy tốt trên mobile và thì phải làm như thế nào. mình dang sử dung them WPZOOM.

hoặc plugin chuyển sang mobile mà tương thích không ? mình cài mấy cái rồi nhưng không được.

Reply
Thạch Phạm 30/09/2016 - 8:18 Sáng

Với theme có độ phức tạp như vậy bạn dùng các plugin hỗ trợ giao diện mobile là không được vì nó sẽ hiển thị không đồng bộ với cách hiển thị trên website. Mình nghĩ thay vào đó bạn nên tìm các theme khác hỗ trợ hiển thị như vậy mà có Responsive, bản thân WPZoom bây giờ các bản theme mới đều có Responsive cả.

Reply
Duy 21/09/2016 - 9:34 Chiều

Thanks

Reply
Nguyễn Văn Tuấn 19/09/2016 - 11:21 Chiều

Nhờ Thạch trợ giúp mình sự cố này!
Site mình làm miễn phí từ google. Tức site.google. Mình đã để chế độ tự động điều chỉnh theo thiết bị di động. Về cơ bản mọi thứ rất ổn, nhưng chỉ riêng phần table báo giá khi trình duyệt trên mobile thì bị thiếu và không hiển thị hết. Mình đã sử dụng cả 2 phương thức % và px nhưng không cải thiện được tình hình. Tiện đây cho mình gửi link site nhờ Thạch cho mình hướng giải quyết. https://sites.google.com/site/bandatdichvuyennghia/datdichvuyennghiakhuc
Cảm ơn Thạch!

Reply
Blessings 29/08/2016 - 8:31 Sáng

Thạch cho mình hỏi chút là giao diện mobi kiểu của mấy tờ báo như Cafef.vn là gì thế, khi mình click vào link trên facebook thì nó load rất nhanh và dễ chịu cho người đọc, giao diện kiểu bên ngoài màu đen ý. Site WordPress có làm đc như vậy không nhỉ? Thanks

Reply
Bich 26/08/2016 - 11:31 Chiều

Cho em hỏi nếu e design 1 trang login nằm trên trang trắng của màn hình lap top.
Thì e có cần deisgn một rang login riêng đê dùng trên Tab vs thiết bị di động.
Hay e design 1 trang login thồi và sử dụng responsive đê thay đổi kich thước trên các thiết bị lun hả anh ??

Reply
hoanghung 21/08/2016 - 10:40 Sáng

Em thêm thẻ meta vào cặp nhưng không biết thêm vào đoạn nào, nhét vào đoạn nào nó cũng báo lỗi vậy anh chỉ lại thêm như thế nào giúp em với ạ

Reply
Nguyet 24/08/2016 - 9:14 Chiều

`
Vi du

Reply
Nguyet 24/08/2016 - 9:18 Chiều

Bạn đặt trong cặp thẻ head,
(head)
(title) (/title)
(meta …../)
(/head)

Reply
Thinkahead 15/08/2016 - 11:00 Chiều

anh Thạch ơi sao em nhúng Video Youtube vào thì nó không hiển thị Responsive vậy…
Có code nào giải quyết vấn đề này không ??

Reply
Nguyễn Hữu Quang 08/08/2016 - 11:10 Chiều

Thạch Phạm cho mình hỏi. Web của mình đã chỉnh responsive nhưng đang bị lỗi:
Nội dung hiện một nửa và 1 nửa là trắng. Tìm hoài mà chưa biết lỗi tại đâu? Nhờ bạn chỉ giáo giúp với

“ieltssieutoc.com”
Many thanks,

Reply
Nhựt 23/08/2016 - 11:10 Sáng

Mình cũng bị trường hợp tương tự. Mong có lời giải đáp.

Reply
p0ilp0il 24/11/2016 - 1:40 Chiều

Bạn thêm vào đoạn css này nhé
html {
overflow-y: scroll;
overflow-x: hidden;
}

Reply
Vu Hoang 06/08/2016 - 3:21 Chiều

Thachj Phạm cho mình hỏi bạn thiết lập đường dẫn 127.0.0.1 port 54861 để chạy “real-time” như thế nào với sublime-text vậy? mình thấy làm như thế rất tiện mà chưa biết cách bạn config ntn. 🙂

Reply
Hoàng Hùng 27/07/2016 - 11:00 Chiều

Mình làm giao diện mobile dạng Responsive . Khi check trên trình duyệt chrome thì nó hiển thị rất tốt . nhưng sang các trình duyệt khác thì nó không thể hiển thị đc . Lý do tạo sao vậy bạn . Với lại mình thấy mấy web lớn như facebook check giao diện mobile trên chrome thì không hiển thị dạng Responsive nhưng khi vào tất cả trình duyệt lại hiển thị trên giao diện mobile rất tốt . Bạn cho mình biết khúc mắc này với ?

Reply
Thạch Phạm 28/07/2016 - 4:32 Sáng

Cụ thể là trình duyệt nào bạn? Facebook họ sử dụng adaptive chứ không phải là Responsive nhé, nghĩa là có một địa chỉ riêng để hiển thị giao diện cho điện thoại. Các trình duyệt kiểu như UC Browser hay gì đó có thể hiển thị không tốt do nó chưa hỗ trợ CSS3.

Reply
Bin 23/07/2016 - 7:58 Chiều

cho em hỏi anh đang sài phần mềm gì để có thể vừa viết code vừa hiển thị được không ạ, em cảm ơn trước

Reply
Thạch Phạm 24/07/2016 - 6:39 Sáng

Phần mềm tên Brackets đó bạn.

Reply
Bin 24/07/2016 - 11:07 Sáng

Cám ơn !

Reply
HIEN_DT 06/06/2017 - 4:26 Chiều Reply
Bin 24/07/2016 - 11:14 Sáng

Mà anh ơi cài xong rồi có cài đặt gì k hay chỉ thế thôi

Reply
Nguyễn Hồng Nguyên 22/07/2016 - 11:59 Sáng

Cám ơn Thạch Phạm. Giờ mình có 1 bản design bằng PSD rồi làm sao cắt HTML với chế độ responsive. Hướng dẫn giúp. Xin cám ơn

Reply
Thạch Phạm 23/07/2016 - 5:41 Sáng

Bạn xem qua video trong bài này của mình, mình đã có nói rất chi tiết làm sao để làm một giao diện Responsive. Sau đó bạn chỉ việc cắt ra bằng HTML và CSS dựa theo guide đó là được.

Reply
tuê 08/09/2020 - 10:24 Chiều

anh ơi trả lời trong gmail em được 0. em muốn nhờ anh giúp 1 chút thôi.
Xin được giúp đỡ.
thui em nói luôn là em muốn reponsive cả web hiển thi nó phù hợp với điện thoại
vd: ở điện thoại làm cho cái khung nó bé đi phù hợp hơn
web: https://phimmoixnxx.blogspot.com/

Reply
AnhKieu 20/07/2016 - 12:02 Sáng

Cảm ơn rất nhiều những bài viết của anh ạ.

Reply
Nguyễn Ngọc Bích 16/07/2016 - 11:42 Sáng

Cảm ơn bạn về bài viết hữu ích trên. Mong sẽ được đọc thêm nhiều bài viết của bạn nữa.

Reply
Trung Huy 13/07/2016 - 11:03 Chiều

hay quá . rất bổ ích . thks a ạ 😀

Reply
Nguyễn Hưng 29/06/2016 - 4:03 Sáng

Cho e hỏi chạy chương trình này như nào? e ko biết bắt đầu chạy nó ở đâu?

Reply
DanhNguyen717 30/06/2016 - 1:27 Sáng

Nó chỉ là 1 trang html, bạn viết 1 file .html rồi mở lên là nó tự chạy dc rồi.

Reply
hung 25/06/2016 - 5:24 Chiều

Sao hay mà không có ai comment vậy ta. thanks a

Reply

Để lại một bình luận

* Khi bình luận, bạn đồng ý rằng thông tin bạn nhập vào bao gồm tên, email và địa chỉ IP sẽ được lưu giữ tại website.