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

2021-07-23 21:03:06 字數 407 閱讀 2325

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...

影響網頁響應的乙個小習慣

我承認我是個懶貨,寫個博文都要死要活的,今天突然發現個以前的coding小習慣會嚴重影響效能,特地來跟你們分享一下。先聊天別的,不喜跳過。可能是最近的小籠包看多了,出門看到哪個妹子都美若天仙的趕腳。但是作為一枚程式猿哥哥,我們還是保持良好的加班勢頭吧。尤其是周四,因為這樣加班到10點剛好可以看到更新...