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

需求

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

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

未满足需求时

满足需求之前,登陆框的 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(审查元素)

把浏览器窗口缩小

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

纵向缩放效果

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

如何让网页跟着浏览器全比例缩小
需求今天帮朋友做个小网页,但一直没明白对方的需求; 原来是要实现:"网页内容随着浏览器窗口变大变小,缩放比例不失调,即保持原有比例" 未满足需求时满足需求之前,登陆框的 mar ...
公众号分享页面php,微信公众号网页分享功能开发的示例代码
现在每天都可以看到很多微信分享的链接上面有网站或者商家的自定义的分享标题,和分享链接的描述及分享出去的图像,例如下面的分享出去的链接: 上面这个是微信的js-SDK页面分享给微信好友在聊天列表中显示的 ...
python登录网页账号密码_Python 通过爬虫实现GitHub网页的模拟登录的示例代码
1. 实例描述通过爬虫获取网页的信息时,有时需要登录网页后才可以获取网页中的可用数据,例如获取 GitHub 网页中的注册号码时,就需要先登录账号才能在登录后的页面中看到该信息,如下图所示.那么该如 ...
python登录各种网页示例_Python 通过爬虫实现GitHub网页的模拟登录的示例代码
1. 实例描述通过爬虫获取网页的信息时,有时需要登录网页后才可以获取网页中的可用数据,例如获取 GitHub 网页中的注册号码时,就需要先登录账号才能在登录后的页面中看到该信息,如下图所示.那么该如 ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
html如何设置网页的背景图片，使放大或缩小浏览器时，页面排版和背景可以随浏览器放大缩小而排版不会改变，
用DIV+CSS写网页背景代码时,应该先写一个DIV,在这个DIV的CSS里面添加背景图片,并设置其margin为auto,宽度为100%或者auto:然后在这个DIV里面在写一个DIV,在第二个DI ...
php后台登录页修改成ajax,使用php后台给自己做一个页面路由，配合ajax实现局部刷新。(示例代码)...
今天就要放假了,把近来囤积的小玩意儿总结整理一下. 在请求一个html页面来嵌入到当前页会有一个问题,就是跟随请求过来的html他的样式表和脚本会失效.是因为文档加载的先后顺序等问题造成的.因此,加载 ...
html微信打开网页要求用sa,微信网页授权获取用户基本信息(示例代码)
微信公众号可以通过微信网页授权机制,来获取用户基本信息,可以用于微信登录功能关于网页授权的两种scope的区别说明 1.静默授权:以snsapi_base为scope发起的网页授权,是用来获取进入页 ...
python编辑代码的页面_使用CodeMirror实现Python3在线编辑器的示例代码
一.编写页面主要是引入相关的css文件和js文件,这里采用简单插入link和script标签的形式. Document click 二.配置CodeMirror 在index.js中配置CodeMi ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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