需求
今天幫朋友做個小網頁,但一直沒明白對方的需求;
原來是要實現:"網頁內容隨着瀏覽器窗口變大變小,縮放比例不失調,即保持原有比例"
未滿足需求時
滿足需求之前,登陸框的 margin-top 以及 margin-left 的值用的都是精確px(像素值);
整體頁面
css(審查元素)
把瀏覽器窗口縮小
會發現"登陸框"會因為"margin-left:1000px"的原因留在它固有的位置,從而看不到它,自然也就沒有達到全比例自適應的效果
同樣道理,因為"margin-top:300px"的原因,當縱向縮小瀏覽器窗口時,"登陸框"也會留在它固有的位置,從而看不到它
問題原因
因為 margin-top 和 margin-left 的值用的都是精准px值, 所以值是固定的, 位置是固定的;
當你縮小瀏覽器窗口時,目標元素的空間位置是不會改變的.
解決方案
方案一
把margin-top 和 margin-left 的值改成百分比形式;
修改后的css(審查元素)
把瀏覽器窗口縮小
最大限度橫向縮小瀏覽器,目標元素依然顯示
縱向縮放同比之前,縮放幅度基本滿足需求
方案二
把margin-top 和 margin-left 改成 position, 利用position屬性的 absolute 屬性確定目標元素的比例位置
並且位置屬性的值依然要用百分百形式
修改后的css(審查元素)
把瀏覽器窗口縮小
最大限度橫向縮小瀏覽器,目標元素完全顯示
縱向縮放效果
