JQuery：如何使用jquery检测移动宽度并将我的CSS更改为它？

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

例如

.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%; } 

然后我有这个function，但我不确定它是否真的有效。

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

谢谢你的回答！ 🙂

Answer 1

无需使用Javascript / jQuery，请查看以下几点。

建议：

1. 使用百分比width ，因此，resize时，它将自动调整
2. 将media queries用于特定于分辨率的样式
3. 从Javascript设置属性时，请使用属性名称周围的引号或使用camelcase。 防爆。 maxWidth，或’max-width’

例：

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

3. 为各种分辨率创建单独的CSS文件，并为这些分辨率加载它们

例：

更新

如果您仍想使用Javascript，请在​​window resize事件上调用您的函数。

 window.onresize = responsiveFn; 

在引号中使用max-width

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

Answer 2

请根据您的要求示例对所有元素使用媒体查询

 @media screen and (min-width: 320px) and (max-width:580px) { .btn-default { float: none; max-width: 100%;} .textcenter { text-align: center; } } 

因为按钮和textcenter类将使用提到的属性进行更改

谢谢