Điều cần biết khi làm web responsive

Cập nhật lần cuối 12/05/2015 by trong HTML&CSS vào 12/05/2015 có 1798 Views

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.

responsive web design

Mục lục

  1. Responsive là gì?
  2. Điều kiện cần phải có khi làm responsive là gì?
  3. 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ử …

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

Đ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 <head>

<!--Thêm thẻ này vào trong thẻ <head> của html-->
<meta name="viewport" content="width=device-width">

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”

Property Description
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

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

Chúc các bạn thành công!

5/5 - (2 votes)
Từ khóa:
  • Bình luận
Sản phẩm nổi bật của Toản
x