Làm cách nào để ngăn bố cục CSS bóp méo khi phóng to/thu nhỏ?

Question

Tôi đã thiết lập trang web rất cơ bản với #container div bao gồm #navbar và #content. Tuy nhiên, khi tôi phóng to hoặc thu nhỏ, thanh #navbar biến dạng, nếu tôi phóng to các liên kết được đẩy xuống dưới nhau thay vì ở bên trong. Nếu tôi thu nhỏ, quá nhiều đệm được thêm vào giữa các liên kết. Làm thế nào tôi có thể ngăn chặn điều này?

HTML:

<div id="navbar"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="top.html">Top</a></li> 
    <li><strong><a href="free.html">FREE</a></strong></li> 
    <li><a href="photo.html">Photo</a></li> 
    <li><a href="about.html">About</a></li> 
    <li><a href="contact.html">Contact Us</a></li> 
</ul> 
</div> 

<div id="content"> 

<p>Some sample text.<p> 

</div> 


</div> 

CSS:

#container { 

    position: static; 
    background-color: #00bbee; 
    margin-left: 20%; 
    margin-right: 20%; 
    margin-top: 7%; 
    margin-bottom: 15%; 
    border: 2px solid red; 


} 

#navbar ul{ 

    list-style: none; 



} 

#navbar li{ 

    display: inline; 

} 

#navbar li a{ 

    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 

} 

#navbar li a:hover { 

    background-color: white; 
    color: green; 

} 

#navbar { 

    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 

} 

Làm thế nào tôi có thể ngăn chặn nó từ bóp méo?

Ngoài ra, tôi vẫn còn khá mới với CSS, tôi được dạy sử dụng% thay vì px. Có đúng không? Ngoài ra bất cứ điều gì khác bạn đã có để chỉ ra, xin vui lòng cho tôi biết.

Cảm ơn trước!

Answer 1

Vì câu hỏi này vẫn nhận được lượt xem liên tục, tôi sẽ đăng giải pháp tôi sử dụng hiện tại.

CSS Truyền thông Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/ 

} 

@media screen and (max-width: 800px) { 

} 

Check-out: CSS-Tricks + device sizes và Media Queries

Answer 2

Các trình duyệt khác nhau sử dụng các kỹ thuật khác nhau để thu phóng. Tất cả đều có lỗi. Sử dụng tỷ lệ phần trăm sẽ giới thiệu các lỗi làm tròn. Không có câu trả lời dễ dàng.

Xem: http://www.codinghorror.com/blog/2009/01/the-two-types-of-browser-zoom.html

Answer 3

Hmm .... có bạn đã cố gắng thêm trong thuộc tính min-width/min-height chưa? Bạn chỉ có thể bao gồm các thuộc tính đó trên #container div của bạn. Điều đó có thể chỉ là lừa.

Answer 4

Tôi đã gặp sự cố tương tự mà tôi đã khắc phục bằng cách thêm div phụ xung quanh menu điều hướng của mình. Sau đó, tôi đã thêm

#menu-container { 
    position: absolute; 
    white-space: nowrap; 
    overflow: hidden; 

} 

Điều này đã ngăn không cho nó gói. Hy vọng nó hoạt động.

Answer 5

Để khắc phục vấn đề với phóng to, hãy thử thêm thuộc tính min-width vào bộ đếm bên ngoài của bạn (#container hoặc #navbar?). Đặt min-width ngăn trang web cố gắng thu nhỏ lại vượt quá chiều rộng được chỉ định (nghĩa là 300px). Nếu bạn phóng to quá xa, thay vì các phần tử bên trong <div> nhảy xuống dòng tiếp theo, thanh điều hướng của bạn sẽ ngừng thu hẹp và thanh cuộn sẽ xuất hiện ở cuối trang.

Ví dụ (trong stylesheet của bạn):

#navbar {min-width:300px;} 

Một cách tốt để đạt được điều này là để áp dụng các thuộc tính min-width cho cơ thể trang.

Ví dụ (trong stylesheet của bạn):

body {min-width:300px;} 

Cuối cùng, nếu bạn muốn thực hiện thanh điều hướng mở rộng sang toàn bộ chiều rộng của trang, sử dụng {clear:both;} trong stylesheet.

Answer 6

Tôi sẽ chỉ đặt chiều cao và chiều rộng tuyệt đối cho tất cả các phần tử/div trên trang.

id {height: 250px; width: 500px}

Hoặc bạn cũng có thể sử dụng min/max-width/hight để điều chỉnh bố cục trang trên các kích thước màn hình khác nhau hoặc khi thay đổi kích thước cửa sổ trình duyệt.

Answer 7

Điều này chủ yếu là do u đã đặt độ rộng hoặc thuộc tính lề theo phần trăm. Nếu bạn làm như vậy, hãy đảm bảo u cung cấp chiều rộng tối đa cho phần tử như vậy

Answer 8

Ở đây bạn thực hiện, điều này rất giống với các đề xuất ở trên nhưng nó có diện tích nội dung chiều rộng cố định, nếu bạn đang tìm chiều rộng đầy đủ, xin lỗi (; _;)

<style> 
body { 
    margin:0px; 
} 
#container { 
    width:990px; 
    background-color: #00bbee; 
    margin:0 auto; 
    border: 2px solid red; 
} 
#navbar ul { 
    list-style: none; 
} 
#navbar li { 
    display: inline; 
} 
#navbar li a { 
    text-decoration: none; 
    color: #11ff11; 
    margin: 3%; 
    border: 1px dotted orange; 
    padding-left: 4px; 
} 
#navbar li a:hover { 
    background-color: white; 
    color: green; 
} 
#navbar { 
    background-color: #eeeeee; 
    padding-top: 2px; 
    padding-bottom: 5px; 
    border: 1px solid yellow; 
} 
</style> 

<div id="container"> 
    <div id="navbar"> 
    <ul> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="top.html">Top</a></li> 
     <li><strong><a href="free.html">FREE</a></strong></li> 
     <li><a href="photo.html">Photo</a></li> 
     <li><a href="about.html">About</a></li> 
     <li><a href="contact.html">Contact Us</a></li> 
    </ul> 
    </div> 
    <div id="content"> 
    <p>Some sample text. 
    <p> 
    </div> 
</div> 

Answer 9

Bạn sẽ muốn sử dụng truy vấn phương tiện css để đặt điểm ngắt cho các kiểu khác nhau trong css của bạn. Mà nếu được sử dụng một cách chính xác sẽ sửa chữa bất kỳ vấn đề méo.