Tạo đệm đáp ứng

Question

Tôi mới bắt đầu sử dụng Bootstrap và tôi mới phát triển giao diện người dùng nói chung. Tôi đang gặp vấn đề với đệm, vì nó vẫn có cùng kích thước trong máy tính để bàn và thiết bị di động.

HTML code:

<div class="container" id="i-container"> 
     <h3>We possess high quality products &mdash; therefore our customers are always loyal</h3> 
    </div> 

mã CSS:

#i-container{ 
     border: solid; 
     border-color: rosybrown; 
     padding-left: 150px 
     padding-top: 10px; 
    } 

Như tôi đã đề cập ở trên, trong các thiết bị di động padding vẫn giữ nguyên (nó dường như không được đáp ứng). Tôi đã thử sử dụng em quá, nhân tiện. Nó cũng không giúp được gì.

Answer 1

Sử dụng tỷ lệ phần trăm làm đơn vị đo lường trong khi làm cho trang web của bạn phản hồi. Pixel không hoạt động nếu bạn muốn nó đáp ứng. Nếu bạn sử dụng tỷ lệ phần trăm, phép đo được lấy theo kích thước của màn hình. Nhưng nếu bạn sử dụng pixel, phần đệm vẫn giữ nguyên cho tất cả các kích thước. Chỉ cần thay đổi CSS của bạn như sau:

#i-container{ 
     border: solid; 
     border-color: rosybrown; 
     padding-left: 12%; 
     padding-top: 0.5%; 
    } 

Sử dụng tỷ lệ phần trăm bạn muốn.

Answer 2

Vì chúng tôi không biết bạn muốn tạo nội dung gì và bạn đang tìm kiếm kết quả gì, thật khó viết bất cứ điều gì cụ thể.

Với điều đó cho biết: pixel sẽ là pixel bất kể thiết bị bạn đang mở trang web. Vì vậy, việc đặt kích thước cố định trên các phần tử thường sẽ dẫn đến các phần tử nằm ngoài vùng hiển thị và tương tự. Đó có lẽ là những gì bạn đang trải qua. Đặt padding bằng pixel, sẽ giữ chính xác số lượng đệm đó bất kể thiết bị được sử dụng để mở trang web.

NHƯNG bạn đề cập đến Bootstrap, có hệ thống lưới khá tốt hoạt động độc lập với thiết bị. Họ sử dụng các truy vấn phương tiện để kiểm soát thiết bị và bố cục. Cụ thể là họ đang sử dụng .col-xs- (nhỏ hơn 768px), .col-sm- (lớn hơn hoặc bằng 768px), .col-md- (lớn hơn hoặc bằng 992px), .col-lg- (lớn hơn hoặc bằng 1170px). Điều đó có nghĩa là bạn có thể đặt nội dung của mình theo nhóm và hàng, nơi bạn có thể kiểm soát hoàn toàn cách chúng được hiển thị và được đặt trên các kích thước màn hình khác nhau.

Vì vậy, đối với dự án của bạn và để kiểm soát bố cục và vị trí tốt hơn, tôi khuyên bạn nên xem xét hệ thống lưới HERE.