search

HieuPham2000 / Reponsive-Web-Design-Project

Project trong khóa Responsive Web Design trên freeCodeCamp
0 stars 0 forks source link

Tribute Page chưa giống mẫu #1

Closed HieuPham2000 closed 3 years ago

HieuPham2000 commented 3 years ago

So sánh với page mẫu: https://codepen.io/freeCodeCamp/full/zNqgVx (code) thì thấy chưa giống. VD họ dùng px, em chứ không dùng vmin; cách dùng margin, padding, max-width, @media.... Đặc biệt khi mở trên điện thoại thì page mình code hiển thị chưa ổn.

HieuPham2000 commented 3 years ago

Thêm @media để tạo reponsive trên màn hình mobile

HieuPham2000 commented 3 years ago

Thêm html { font-size: 10px; } và dùng đơn vị tương đối rem (khi đó 1 rem = 10 px)

HieuPham2000 commented 3 years ago

Sử dụng Chrome Dev tools xem margin, padding, border,... Một số chú ý:

  1. % là đơn vị tương đối, phụ thuộc kích thước parent => xem xem đã set cho parent chưa
  2. Chú ý sự ảnh hưởng của padding: Stackoverflow. Dùng box-sizing: border-box;
HieuPham2000 commented 3 years ago

Trường hợp để width 100%, khi hiển thị vẫn còn rìa trắng nhỏ nhỏ bên trái (phải...) => dùng chrome dev tool => body có margin 8 px (mặc định ?? User-agent....??) => fix: body { margin: 0; }

HieuPham2000 commented 3 years ago

Closed!