使用onresize实现div随屏幕尺寸变化自适应的代码
5星
- 浏览量: 0
- 大小:None
- 文件类型：PDF
简介：
本段代码展示如何利用JavaScript中的onresize事件，使页面元素（如div）能够随着浏览器窗口大小调整而自动适应布局，提供更好的用户体验。
在网页设计中让元素随屏幕大小自适应是创建响应式布局的关键。当需要使div居中时，通常有两种方法：使用像素绝对定位或用百分比相对定位。虽然固定宽度的像素绝对定位适用于特定尺寸的设计，但这种方法无法实现随着屏幕变化而自动调整的效果；相比之下，采用百分比进行相对定位则可以更好地适应不同大小的屏幕。
然而，在某些情况下会遇到问题——例如当页面包含如下文档类型声明时：``，百分比定位下的top属性可能会失效。这可能是由于这种doctype导致浏览器进入一种特殊的解析模式（如怪异模式），影响了某些CSS规则的执行效果。
为解决这个问题，并确保div能够随着屏幕尺寸的变化而动态调整位置，可以利用JavaScript来监听窗口大小变化事件并相应地更新元素的位置信息。具体来说，在`window.onload`函数中获取页面初始宽度和特定div距离左侧边缘的距离值；然后在用户改变浏览器窗口大小时触发的`onresize`事件里重新计算这些尺寸，并将结果应用于相关元素，从而保持布局的一致性和响应性。
以下是一个简单的JavaScript实现示例：
```javascript
var height, width, width_cha1, width_cha2;
function getwah() {
if (document.documentElement && document.documentElement.clientWidth) {
d_width = document.documentElement.clientWidth;
} else if (document.body) {
d_width = document.body.clientWidth;
}
width = parseInt(d_width);
width_cha1 = width - parseInt(document.getElementById(backi).style.left);
width_cha2 = width - parseInt(document.getElementById(massage_box).style.left);
}
function test() {
if (document.documentElement && document.documentElement.clientWidth) {
d_width = document.documentElement.clientWidth;
} else if (document.body) {
d_width = document.body.clientWidth;
}
var now_left1 = parseInt(d_width) - width_cha1;
var now_left2 = parseInt(d_width) - width_cha2;
document.getElementById(backi).style.left = now_left1 + px;
document.getElementById(massage_box).style.left = now_left2 + px;
}
```
其中，`backi`和`massage_box`代表需要进行自适应调整的div元素ID。通过上述代码可以确保在用户改变浏览器窗口大小时，这些元素的位置能够根据当前屏幕宽度重新计算并更新，从而实现良好的用户体验。
综上所述，在处理特定doctype导致百分比定位失效的问题时，结合使用JavaScript来动态控制和调整元素位置是一种有效的策略。
全部评论 (0)
