JQuery：如何检测移动宽度和更改我的CSS，它与使用jquery？ [英] JQuery: How to detect mobile width and change my css to it's with using jquery?

问题描述

如何使用jquery检测移动宽度并将CSS更改为当前窗口宽度？

How to detect mobile width and change my css to it's current window width using jquery?

例如

.page {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    float: left;
    margin: 40px 0;
    max-width: 480px;
    min-height: 720px;
    height: auto;
    min-width: 360px;
    padding: 10px;
    width: 100%;
}

然后我有这个功能，但我不知道如果它真的工作。

and then I have this function but I am not sure if it's really working.

function responsiveFn() {
    width = $(window).width();
    document.getElementById('widthID').innerHTML = width;
    jQuery('.page').css({
        max-width: width
    });
}

感谢您的回答！ ：）

推荐答案

不需要使用Javascript / jQuery，请检查以下几点。

No need of using Javascript/jQuery, check the below points.

建议：

1. 使用百分比使用 width 它会自动调整


2. 使用媒体查询获取解决方案特定样式


3. 从Javascript，使用引号周围的属性名称或使用驼峰。例如， maxWidth或'max-width'

1. Use width in percentages so, when resized it'll auto adjust
2. Use media queries for resolution specific styles
3. When setting properties from Javascript, use quotes around property name or use camelcase. Ex. maxWidth, or 'max-width'

例如：

@media (max-width: 600px) {
    .page {
        width: 200px;
    }
}

1. 为各种分辨率创建单独的CSS文件并加载它们以获取此类解决方案

示例：

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 600px)" href="mobile.css" />

更新：

如果您仍然想使用Javascript，请在​​窗口调整大小事件上调用您的函数。

If you still want to use Javascript, call your function on window resize event.

window.onresize = responsiveFn;

在引号中使用 max-width p>

Use max-width in quotes

jQuery('.page').css('max-width', width);

这篇关于JQuery：如何检测移动宽度和更改我的CSS，它与使用jquery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！