如何实现浏览器窗口调整大小缩放的网页？

技术标签： javascript. HTML. CSS. ajax.

如何实现浏览器窗口调整大小缩放的网页？

我可以使用表格或CSS浮动部分铺设页面的元素，但是当浏览器窗口调整大小时，我希望显示屏重新括起来

我使用Ajax Pro和Divs具有溢出的工作解决方案：自动和onWindowresize挂钩，但它很麻烦。有没有更好的办法？

谢谢大家为了到目前为止的答案，我打算尝试所有（或至少大多数），然后选择最佳解决方案作为此线程的答案
使用CSS和百分比似乎最佳工作，这是我在原始解决方案中所做的;使用可见性：隐藏div设置为100％到100％给出了测量窗口的客户区的方法[IE否则]，并且onWindowresize javascript函数允许窗口调整大小以重绘时启动AjaxPro方法新分辨率的布局 - 细胞内容

编辑：我的道歉没有完全清楚;我需要一个“液体布局”，其中主要元素（'窗格）将被扩展，因为浏览器窗口被调整大小。我发现我必须使用Ajax调用来重新显示“窗格”内容，在调整大小之后，并保持溢出：自动打开以避免滚动

看答案

而不是使用CSS说“宽度：200px”，使用类似“宽度：50％”的东西

这使得它可以使用它的50％，所以在：

<body>
 <div style="width:50%">
  <!--some stuff-->
 </div>
</body>

DIV现在总是占用一半的窗户Hationalaly。

智能推荐

永久调整firefox浏览器网页显示比例

永久调整firefox浏览器网页显示比例 1.打开firefox 2.在地址栏输入`about:config` 3.点击我接受此风险 4.然后在搜索栏输入`layout.css.devPixelsPerPx`之后改变value值就可以啦。 1.打开firefox 2.在地址栏输入about:config 3.点击我接受此风险 4.然后在搜索栏输入layout.css.devPixelsPerPx之...

JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

常用: JS 获取浏览器窗口大小详细: 关于获取各种浏览器可见窗口大小: 在我本地测试当中：在IE、FireFox、Opera下都可以使用 document.body.clientWidth document.body.clientHeight 即可获得，很简单，很方便。而在公司项目当中： Opera仍然使用 document.body.clientWidth document...

vue中watch监听浏览器窗口大小的改变

首先,watch监听的是data中的属性,并不能直接监听window,如图先定义data中一个screenwidth属性,然后这个时候我们可以用watch监听到screenWidth,但是当改变窗口大小时,并不会打印改变之后的值,即只监听了一次,不能持续监听,于是在mounted中调用window.onresize方法,然后就可以持续监听了...

跨浏览器确定一个窗口的大小

跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和 Chrome 均为此提供了4个属性： innerWidth 、 innerHeight 、 outerWidth 和 outerHeight 。在 IE9+、Safari 和 Firefox 中， outerWidth ...

微信开发者工具从注册到运行

前段时间一直想学学微信中的小程序是如何制作的，昨天终于有时间就尝试了一下。话不多说，以免跑偏。。。。 1.微信小程序开发需要先在微信公众平台（https://mp.weixin.qq.com）上注册一个自己的公众号。 2.在公众平台上注册成功后，在公众号左侧有一个小程序栏目。点击小程序管理，在左侧就会出现两个选项，在第一次使用小程序当然是没有小程序账号的，点击右侧注册小...

猜你喜欢

qt（+vs2017）显示点云

参考链接： Win10+VS2015环境下安装编译PCL1.8.1和VTK8.0.0（踩坑大全）https://blog.csdn.net/weixin_39871164/article/details/102879962 1.vs2017编译安装VTK （PCL点云显示是基于VTK做的） - PCL191匹配的VTK版本是VTK8.1（PCL191\3rdParty\VTK\include\vt...

第四周作业

一、union注入基于union的信息获取： union联合查询:可以通过联合查询来查询指定的数据用法举例： select username,password from user where id =1 union select 字段1,字段2 from 表名先登入PHPmyadmin 进入pikachu的数据库中得到此结果上述为一般查询 union查询：除了通过遍历查询数据库内容外，...

String常用的几个方法

String常用的几个方法介绍首先在讲之前我想说几句题外话，关于string的常用方法我查了很久csdn，我发现要不就是一大坨，还有一些乱七八糟的拓展，看的你一脸懵逼，要不就是简洁的很，该写的你不写出来，所以搞得你很难受。但是在你看了我这篇文章以后我觉得你可能会缓解很多，那就开始吧。 String的方法是有很多的，这里我只列举一些我常用的，喷子不要喷。直接上代码先。方法一：charAt: 很...

计算机组成原理第五章测试(下) 答案

本次得分为：15.00/15.00, 本次测试的提交时间为：2020-04-24, 如果你认为本次测试成绩不理想，你可以选择再做一次。【第5章测试（下）】 1单选(1分) 下图可以表示哪种控制方式的CPU工作效率？选A 得分/总分 A. DMA方式 1.00/1.00 B.无正确答案 C.程序中断方式 D.程序查询方式 2单选(1分) 在程序中断方式下，中断响应发生在__B_ 得分/总分 A....

LeetCode刷题笔记-回文数

一、题目描述判断一个整数是否是回文数。回文数是指正序（从左向右）和倒序（从右向左）读都是一样的整数。示例 1: 输入: 121 输出: true 示例 2: 输入: -121 输出: false 解释: 从左向右读, 为 -121 。从右向左读, 为 121- 。因此它不是一个回文数。示例 3: 输入: 10 输出: false 解释: 从右向左读, 为 01 。因此它不是一个回文数。进...