響應式網頁,div的高和寬保持比例放大 縮小

2022-09-12 02:39:10 字數 407 閱讀 4675

1,方案一:響應式來做,可以根據**查詢,設定在不同螢幕寬度下div的高度和寬度,具體的設定看你響應式想怎麼顯示

@media only screen and (min-width: 100px) and (max-width: 640px)

}@media only screen and (min-width: 641px) and (max-width: 789px)

}2.方案二:百分比來做,這裡需要運用乙個小技巧,padding用百分比做單位時是相對於容器的寬度來算的,所以你可以把高度設為0,內容自然溢位,設定個padding-bottom

height:0;

width:50%;

padding-bottom:30%

那麼這個div的高寬比就是30%:50%

響應式網頁讓乙個div的高和寬保持比例放大縮小

1,方案一 響應式來做,可以根據 查詢,設定在不同螢幕寬度下div的高度和寬度,具體的設定看你響應式想怎麼顯示 media only screen and min width 100px and max width 640px media only screen and min width 641p...

響應式網頁,讓div的高和寬保持等比例放大 縮小

1,方案一 響應式來做,可以根據 查詢,設定在不同螢幕寬度下div的高度和寬度,具體的設定看你響應式想怎麼顯示 media only screen and min width 100px and max width 640px media only screen and min width 641p...

將div的寬 高按比例設定有什麼效果

在新增div時,對它的大小 寬 高 有兩種設定方法 固定值和百分比。1 若div的寬高為固定值,則該div的顯示效果會隨著其父div的縮放而變化。如下所示 2 若div的寬 高值為百分比,且其父div的寬 高值也為百分比,body的寬高預設未設定為指定值時,則該div的顯示不會因為瀏覽器的縮放而變化...