Cố định cấu trúc UI khi resize screen

#1

Em thấy vài website như Lazada, Shopee, tainghe.com.vn, … khi resize screen thì cả chữ và cấu trúc các thành phần nó vẫn được giữ nguyên.

image
image539×529 135 KB

image
Em đã thử set cố dịnh width thì khi resize nó bị tràn UI ra khỏi screen.
Còn responsive bằng flexbox thì chữ bị nhảy dòng khi resize.
Các cao nhân cho em hỏi làm thế nào để có thể giữ cố định cả cấu trúc lẫn chũ khi resize screen như vậy ạ.

<!DOCTYPE html>
<html lang="vi-vn">
  <head>
    <style>
      body {
        width: 1188px;
        margin: 0 auto;
      }
      .wrapper {
        display: flex;
      }
      .wrapper > .item {
        flex: 1;
        font-size: 16px;
        padding: 12px;
      }
      .item > .background-img {
        display: block;
        max-width: 100%;
        height: auto;
        margin: 16px 0;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <div class="item">
        <img src="https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000" class="background-img" />
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      <div class="item">
        <img src="https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000" class="background-img" />
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
      <div class="item">
        <img src="https://img.freepik.com/free-vector/hand-painted-watercolor-pastel-sky-background_23-2148902771.jpg?w=2000" class="background-img" />
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </div>
    </div>
  </body>
</html>
#2

đưa code demo của bạn lên đây, chứ nói kiểu đó thì ai biết bạn sai ở đâu mà giúp
còn từ khoá thì bạn đã tự nhắc responsive rồi, bạn tự search thôi

#3

Sorry bác :sweat_smile:, mình mới add thêm demo code vào rồi. Trong demo của mình thì khi resize screen nhỏ đi, thì số lượng hàng của chữ tăng lên thay thì cố định

#4

tại vì giaod iện của các web trên đều được scale theo em, rm, percent chứ không cố định px.
ngoài ra các dòng text cũng được cố định lại bằng thuộc tính -webkit-line-clamp: 2

1 Like
#5

Bạn có thể tham khảo từ khóa responsive nhé

Bạn có thể dùng thư viện boostrap. Boostrap có hỗ trợ tính năng này. Mà Bootstrap nó cũng đơn giản dễ học lắm: https://studio.youtube.com/video/g88Zj1S4r3w/edit

#6

vậy bạn muốn khi nó nhỏ lại, thì layout sẽ như thế nào?

#7

Là mình muốn giữ layout như đã set, nhưng nội dung bên trong vẫn phải cố định khi resize screen nhỏ lại. Vd khi ở màn lớn (1920px+) nội dung text trong box có 3 dòng, thì mình muốn khi resize xuống 500-1000px thì nó vẫn cố định 3 dòng ở trong box.
Như các trangt ở trên thì mình đã resize xuống rất nhỏ (500 - 600), nhưng text trong các box sản phẩm vẫn cố định trong dòng đó chứ không bị rớt hàng hay mất chữ gì cả. Mình xem thì họ cũng set font size 14px thôi chứ không scale theo rem hay em.

#8

mình không nhìn thấy cái textbox nào trong code của bạn -> chắc là nên cải thiện câu từ, khi câu từ viết ra mà người ta đọc không hiểu thì cũng chả muốn hỗ trợ
chắc là bạn đang nhắc đến đoạn text, lúc nào cũng là 3 dòng text => cái này là không hợp lý, mình cũng chưa thấy yêu cầu kiểu như nào bao giờ
giả sử trên mobile, đoạn text dài ngoằn đó, mà chỉ có 3 dòng, đã thế mà màn hình còn phải chia làm 3 nữa, thì chữ nó phải nhỏ cỡ nào
bạn nên tìm hiểu lại khái niệm responsive

#9

Mình đang nói về đoạn text ở trong box chứ không liên quan gì tới textbox hay input cả. Chủ yếu là mình tò mò về cách vận hạnh của nó, chứ các trang ở trên họ đã chia layout tách ra giữa mobile và desktop rồi. Nên cách xây dựng trên của họ là để support medium screen trở lên là chính.

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?