如果浏览器视口小于1200像素，请更改css值（左：x）

我在宽度为1200像素的网页上封装了我的内容。包装div居中在我的页面中间与这个CSS，position:absolute; top:0px; left:50%; margin-left:-600px; width:1200px; height:auto; 如果浏览器视口宽度小于1200px，我需要使用jQuery将左值从50％更改为0px。现在以ipod为例，由于包装居中，我的左侧内容被切断，无法滚动到侧面。预先感谢您。如果浏览器视口小于1200像素，请更改css值（左：x）

来源

2011-01-27 dylfreak6494

即使您将左侧值更改为0px，内容也会流出页面的右侧，您将无法滚动查看内容。你将需要删除绝对定位来获得你想要的结果。 – RussellUresti 2011-01-27 19:29:05

你有使用这种技术来居中元素的原因吗？一个更简单的方法来做到这一点，在较小的宽度下工作就没有绝对的定位和负边距！

div#container { 
    width: 1200px; 
    margin: 0px auto; 
}

来源

2011-01-27 19:26:38 idlefingers

Here is a fiddle link。拖动可调整大小的窗格以调整窗口大小。

$(window).bind('resize', function(){ 
    if($(this).width() < 1200) 
     $('div.wrap').css('left', 0); 
    else 
     $('div.wrap').css('left', '50%'); 
}).resize();

来源

2011-01-27 19:25:32

谢谢！完美工作！，只需添加一个css函数来将margin-left值设置为零。 – dylfreak6494 2011-01-29 15:29:18

如果浏览器视口小于1200像素，请更改css值（左：x）

回答

相关问题