Đ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ó 1499 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ử …

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

PropertyDescription
widthThe width of the virtual viewport of the device.
device-widthThe physical width of the device’s screen.
heightThe height of the “virtual viewport” of the device.
device-heightThe physical height of the device’s screen.
initial-scaleThe initial zoom when visiting the page. 1.0 does not zoom.
minimum-scaleThe minimum amount the visitor can zoom on the page. 1.0 does not zoom.
maximum-scaleThe maximum amount the visitor can zoom on the page. 1.0 does not zoom.
user-scalableAllows 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