android适配横屏竖屏的web代码 v4 v7

chezabo6116

已于 2024-08-15 15:33:16 修改

阅读量610

点赞数 31

文章标签：前端

于 2024-04-22 11:11:15 首次发布

本文链接：https://blog.csdn.net/chezabo6116/article/details/138067808

版权

本文介绍了如何使用JavaScript在浏览器窗口大小变化时动态改变`w3_agileits_grid_right`类的宽度，以及如何通过CSS媒体查询实现相同效果。两种方法都涉及检测窗口宽度并相应调整百分比属性。

摘要由CSDN通过智能技术生成

是想要在网页中根据屏幕宽度是否超过800像素来动态更改CSS样式中某个类（w3_agileits_grid_right）的百分比属性。实现这一功能通常需要使用JavaScript或者CSS媒体查询（Media Queries）。这里分别给出两种方法的示例：
方法一：使用JavaScript
在HTML文档中添加一个脚本，检测窗口宽度并动态修改相关CSS属性。

function adjustGridWidth() {
const windowWidth = window.innerWidth;

if (windowWidth > 800) {
maiGridElement.style.width = 'calc(30% - 10px)';
} else {
maiGridElement.style.width = 'calc(50% - 10px)';
}
}

adjustGridWidth();
window.addEventListener('resize', adjustGridWidth);
});
</script>
</body>

在CSS文件中使用媒体查询根据屏幕宽度应用不同的样式规则。

/* 默认样式 */
.w3_agileits_grid_right {
/* 假设要修改的是宽度属性 */
width: calc(50% - 10px); /* 作为示例，初始值为50%减去10px */
}

/* 当屏幕宽度大于等于800px时应用的样式 */
@media (min-width: 800px) {
.w3_agileits_grid_right {
width: calc(30% - 10px); /* 修改为30% */
}
}

Android Support v7及以下包详解
https://blog.csdn.net/ThePromonkeyOf_HeLuo/article/details/72817663