Question

当jquery可以通过改变窗口大小来设置css时，有人可以给我一个关于jsfiddle的源代码吗？

我的工作表不太好我试着在网上搜索但没找到。

Answer 1

我认为这就是你要找的东西：

如果您的元素具有类element

$(window).resize(function () {
    $(".element").css("width", window.innerWidth;);
});

然后你可以做window.innerWidth/2或window.innerWidth - 50。

之类的事情

Answer 2

Javascript示例：JSFiddle Demo

在调整大小时更改元素CSS：

如果viewport宽度小于800，则会更改#test div的宽度

<强> HTML

<h1 id="width"></h1>
<div id="test"></div>

<强> CSS

#test { width:200px; height:50px; background:red; }

的Javascript

// set the initial width
var viewportWidth = document.documentElement.clientWidth;
var el = document.getElementById("width");
el.innerHTML = viewportWidth + "px";

// on resize
window.addEventListener('resize', function(event){

    var viewportWidth = document.documentElement.clientWidth;
    var test = document.getElementById("test");
    var el = document.getElementById("width");

    el.innerHTML = viewportWidth + "px";

    if(viewportWidth < 800){
        test.style.width = "500px";
    }
});

CSS按屏幕宽度设置元素宽度

2 个答案: