英文:
How to add and remove class elements based on window width?
问题
根据屏幕宽度调整页面大小是您目前的问题。以下是已翻译的代码部分：
echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1a</div><iframe src='cam1a.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1b</div><iframe src='cam1b.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 2</div><iframe src='cam2.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 3</div><iframe src='cam3.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 4</div><iframe src='cam4.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
$(document).ready(function(){
if ($(window).width() <= 768) {
$(".col-4").addClass("col-12");
$(".col-4").removeClass("col-4");
$(".col-6").addClass("col-12");
$(".col-6").removeClass("col-6");
} else if ($(window).width() <= 992) {
$(".col-4").addClass("col-6");
$(".col-4").removeClass("col-4");
}
});
请注意，我已将 < 和 " 替换为正常的 < 和 "，以便代码更容易阅读。如果您希望继续使用转义字符，可以保留它们。希望这可以帮助您调整页面以适应窗口宽度。
英文:
As the titles implies, I am trying to resize my page based on the width of the screen it is displaying on. Currently this is what my code will display:
echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1a</div><iframe src='cam1a.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-6\"><div class=\"videoTitle\">Dyno 1b</div><iframe src='cam1b.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 2</div><iframe src='cam2.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 3</div><iframe src='cam3.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
echo "<div class=\"col-4\"><div class=\"videoTitle\">Dyno 4</div><iframe src='cam4.shtml' width='100%' height='240' scrolling='no' frameborder='0'></iframe></div>";
And this is how I am trying to resize my data:
$(document).ready(function(){
if ($(window).width() <= 768) {
$( ".col-4" ).addClass(".col-12");
$( ".col-4" ).removeClass(".col-4");
$( ".col-6" ).addClass(".col-12");
$( ".col-6" ).removeClass(".col-6");
} else if ($(window).width() <= 992) {
$( ".col-4" ).addClass(".col-6");
$( ".col-4" ).removeClass(".col-4");
}
});
Currently when I resize my data it will display the original format, which cuts off the image that is displaying. How could I rearrange my code so that my data will adjust to the window width?
答案1
得分: 1
我认为解决您的问题更多地涉及CSS响应式设计解决方案，而不是JavaScript和PHP。
首先，设置您的文档视口：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
此外：
- 不要使用大的固定宽度元素。
- 由于屏幕尺寸和CSS像素宽度在不同设备之间变化很大，内容不应依赖于特定的视口宽度来良好渲染。
- 使用CSS媒体查询来为小屏幕和大屏幕应用不同的样式 - 为页面元素设置大的绝对CSS宽度会导致在较小的设备上元素太宽。相反，考虑使用相对宽度值，例如
width: 100%。此外，谨慎使用大的绝对定位值，它可能导致元素在小设备上超出视口。
英文:
I think the solution to your problem is more of a CSS responsive design solution than JavaScript and PHP.
First, set your document viewport:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Also:
- Do NOT use large fixed width elements
- Since screen dimensions and width in CSS pixels vary widely between devices, content should not rely on a particular viewport width to render well.
- Use CSS media queries to apply different styling for small and large screens - Setting large absolute CSS widths for page elements will cause the element to be too wide for the viewport on a smaller device. Instead, consider using relative width values, such as width: 100%. Also, be careful of using large absolute positioning values. It may cause the element to fall outside the viewport on small devices.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论