HTML怎么跟随页面缩放,如何让网页跟着 浏览器全比例缩小(示例代码)

需求

今天帮朋友做个小网页,但一直没明白对方的需求;

原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例"

未满足需求时

满足需求之前,登陆框的 margin-top  以及 margin-left 的值用的都是精确px(像素值);

整体页面

2b69415b7675ba8bfb171bd746aedc2a.png

css(审查元素)

8b085cc26b6e6f34fe9fce9acce76ca5.png

把浏览器窗口缩小

会发现"登陆框"会因为"margin-left:1000px"的原因留在它固有的位置,从而看不到它,自然也就没有达到全比例自适应的效果

8596de149342c124a7b523324abcac8d.png

同样道理,因为"margin-top:300px"的原因,当纵向缩小浏览器窗口时,"登陆框"也会留在它固有的位置,从而看不到它

36631d2f22f98f29cbfc513d622f376e.png

问题原因

因为 margin-top 和 margin-left 的值用的都是精准px值, 所以值是固定的, 位置是固定的;

当你缩小浏览器窗口时,目标元素的空间位置是不会改变的.

解决方案

方案一

把margin-top 和 margin-left  的值改成百分比形式;

修改后的css(审查元素)

441c5aa734de85c0beabf06a76c2b868.png

把浏览器窗口缩小

最大限度横向缩小浏览器,目标元素依然显示

e639006a85bef20e91fab05bbea732de.png

纵向缩放同比之前,缩放幅度基本满足需求

346acdc0d8cf880db0b1614c809df9f9.png

方案二

把margin-top 和 margin-left  改成 position, 利用position属性的 absolute 属性确定目标元素的比例位置

并且位置属性的值依然要用百分百形式

修改后的css(审查元素)

e126869fc7048951aeaa6f46b63ce858.png

把浏览器窗口缩小

最大限度横向缩小浏览器,目标元素完全显示

e27b250c86e094f55e52bd33de3b4058.png

纵向缩放效果

2ef910f103eb78d3fc4e9620f22af24b.png

  • 8
    点赞
  • 43
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值