Hướng dẫn html zoom in mess up layout - html phóng to bố cục lộn xộn

Tôi có một vấn đề khi tôi phóng to và ra khỏi bố cục của trang bị rối. Tôi đã tìm kiếm các bài viết khác trực tuyến nhưng không thực sự có ích. Có lẽ đó là vì cách tôi sắp xếp CSS của mình. Hy vọng rằng ai đó có thể giải thích cho tôi cách khắc phục vấn đề này, cảm ơn. Đây là cách nó trông như thế nào trước và sau.

TRƯỚC

SAU

HTML

   

    

        

            
ABOUT KDU
            
ADMISSION
        
            
 
            
CAMPUS LIFE
            
INTERNATIONAL STUDENT
        
    



    

        

        

        
  
        
     
        
     
   
         

CSS

*{
    margin: 0;
    padding: 0;
    user-select: none;
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans-
    serif;
    font-weight: bold;
    overflow-x: hidden;
}

body{
    background: #f5f5f0;  
}


.MainImage{
    position: relative;
    width: 10%;
    margin: auto;
    display: block;
    transition: all .6s linear;
}

.items>li{
    color: black;
    cursor: pointer;
    margin-left: 150px;
    position: absolute;
    top: 100px;
    display: inline;
    text-decoration: none;
    transition: all .2s linear;
}

.items>li:hover{
    text-decoration: underline;
    text-decoration-color: black;
    transition: all .2s linear;
    transform: scale(1.5,1.5);
}

#blocks{
    background-color:  #262626;
    width: 100%;
    height: 517;
    position: static;
    margin-top: 50px;
}

#blocks >ul>li{
    display:block;
    float:left; 
    border: 20px;
    margin-top: 30px;
    margin-left: 80px;
}


#Images{
    position: absolute;
    display: inline;
}

#Image>li{
    position: absolute;
    display: block;
}

.imageSize{
    cursor: pointer;
    width: 340px;
    height: 200px;
    transition: all .4s linear;
}

.imageSize:hover{
    opacity: 0.5;
    transition: all .4s linear;
}


#container{ 
    width: 100%;
    margin: 0 auto;

Hỏi ngày 15 tháng 4 năm 2017 lúc 9:48Apr 15, 2017 at 9:48

1

Lý do mà nó bị phá vỡ bố cục như thế là do bạn đang sử dụng tỷ lệ phần trăm, điều đó có nghĩa là khi bạn thay đổi mức thu phóng, chiều rộng đang được thay đổi để phù hợp với kích thước mới của trang có nghĩa là điều xảy ra.

Thay đổi CSS của bạn để được cố định ở một mức độ nhất định sẽ giúp khắc phục vấn đề này nhưng sẽ không khắc phục đầy đủ mọi thứ vì cách thức hoạt động của nó. Tôi đề nghị như một điểm khởi đầu tốt rằng bạn thay đổi container max-width thành một cái gì đó phù hợp để thiết kế bắt đầu.will help remedy this issue but won't fully fix everything because of how it's currently working. I'd suggest as a good starting point that you change the container max-width to something suitable for the design to begin with.

#container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

Tuy nhiên, sau đó bạn có thể sử dụng các truy vấn phương tiện để thay đổi chiều rộng của container tùy thuộc vào kích thước màn hình sẽ đáp ứng kích thước trang một cách thích hợp. Ví dụ: khi kích thước màn hình trở nên nhỏ hơn so với máy tính bảng hoặc điện thoại di động, bạn có thể làm điều này (ví dụ)., you can then use media queries to change the width of the container depending on the screen size which will respond to the page size appropriately. For example, when the screen size becomes smaller to a tablet or mobile, you could do this (as an example).

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

    #container {
        max-width: 960px;
    }

}

Đã trả lời ngày 15 tháng 4 năm 2017 lúc 10:21Apr 15, 2017 at 10:21

2

Tôi khuyên bạn nên sử dụng W3Schools cho tất cả các nhu cầu phát triển web của bạn.

Kiểu dáng của nội dung của bạn là phá vỡ mọi thứ.

Đã sửa một vài vấn đề CSS nhưng cách bạn đang thực hiện nó sẽ khiến nó không thể đi xuống mức đáp ứng. Ngoài ra, hãy thử và giữ riêng HTML và CSS của bạn (không làm CSS nội tuyến).

HTML:

    

        
ABOUT KDU
        
ADMISSION
        

        
CAMPUS LIFE
        
INTERNATIONAL STUDENT
    




    

        

        

        

        

        

    

CSS:

    *{
    margin: 0;
    padding: 0;
    user-select: none;
    font-family: "Futura PT Multilingual W02",Futura,Helvetica,Arial,sans-
    serif;
    font-weight: bold;
    overflow-x: hidden;
}

body{
    background: #f5f5f0;
}


.MainImage{
    width: 10%;
    transition: all .6s linear;
    float: left;
}

.items > li{
    color: black;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s linear;
    float: left;
    width: 22.5%;
    text-align: center;
    margin-top: 100px;
}


.items>li:hover{
    text-decoration-color: gray;
    transition: all .2s linear;
    transform: scale(1.2,1.2);
}

#blocks{
    background-color: #262626;
    width: 100%;
    min-height: 717px;
    float: left;
    clear: both;
    margin-top: 20px;
}

#blocks >ul>li{
    display:block;
    float:left;
    border: 20px;
    margin-top: 30px;
    margin-left: 80px;
}


#Images{
    position: absolute;
    display: inline;
}

#Image>li{
    position: absolute;
    display: block;
}

.imageSize{
    cursor: pointer;
    width: 340px;
    height: 200px;
    transition: all .4s linear;
}

.imageSize:hover{
    opacity: 0.5;
    transition: all .4s linear;
}


#container{
    width: 100%;
    margin: 0 auto;
}

Đã trả lời ngày 15 tháng 4 năm 2017 lúc 10:11Apr 15, 2017 at 10:11

1

Khi tôi phóng to một bố cục trang web bị rối?

Zoom CSS là gì?

Tôi có thể sử dụng CSS Zoom không?