css中不同分辨率引起的页面跑偏

[xiaozhang1528008]

想问下，在分辨1600*900的情况下，网站运行，页面都好好的，然后分辨率一调下，就会全部跑偏了。因为页面的代码有些是写死的，比如
<div class="content" style="margin-left: 128px;">
<p>
</p>
</div>
这边的margin-left: 128p这种直接写死的。网上看有说，用类似下面这种的
@media screen and (max-width: 1399px) and (min-width: 1024px)
.content {
margin-left: 48px;
}
想问下，那这样设置不是非常复杂，分辨率那么多，一个个去枚举？每个分辨率下margin-left: 是不同的值。平时是怎么处理的？谢谢

[辣姐什么鬼]

如果不想用 @media screen and (max-width: 1399px) and (min-width: 1024px) .content { margin-left: 48px; }这种的 可以考虑百分比 建议查一下响应式布局怎么写。 一般来说如果是固定布局（写死的）会把整个主体部分宽度写死然后居中显示，这样里面的元素就可以写死了。

[xiaozhang1528008]

引用 2 楼 liona_koukou 的回复:

如果不想用 @media screen and (max-width: 1399px) and (min-width: 1024px) .content { margin-left: 48px; }这种的 可以考虑百分比 建议查一下响应式布局怎么写。 一般来说如果是固定布局（写死的）会把整个主体部分宽度写死然后居中显示，这样里面的元素就可以写死了。

先谢谢了，现在根据不同的分辨率对应不同的样式宽度，写好了，运行看下也可以，但现在出现另外一个问题，就是拖动浏览器页面大小，显示的时候又会乱跑，请问这个怎么解决？

[xiaozhang1528008]

引用 3 楼 u013116426 的回复:

像这种根据分辨率加载不同样式的 一般三四个就可以了，其他的宽度保持百分比，就不会出现很大问题

先谢谢了，现在根据不同的分辨率对应不同的样式宽度，写好了，运行看下也可以，但现在出现另外一个问题，就是拖动浏览器页面大小，显示的时候又会乱跑，请问这个怎么解决？

[___紫菜]

像这种根据分辨率加载不同样式的 一般三四个就可以了，其他的宽度保持百分比，就不会出现很大问题

[___紫菜]

引用 5 楼 xiaozhang1528008 的回复:

[quote=引用 3 楼 u013116426 的回复:] 像这种根据分辨率加载不同样式的 一般三四个就可以了，其他的宽度保持百分比，就不会出现很大问题

先谢谢了，现在根据不同的分辨率对应不同的样式宽度，写好了，运行看下也可以，但现在出现另外一个问题，就是拖动浏览器页面大小，显示的时候又会乱跑，请问这个怎么解决？[/quote] 这是你设置的分辨率范围有问题，你要保证分别在这三四个分辨率下样式都不会错位。 你看看这个效果http://www.17sucai.com/preview/512263/2016-04-13/blog/index.html