html绝对定位自适应不同分辨率,(css)绝对定位如何在不同分辨率下的电脑正常显示位置？...

关于网友提出的“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”问题疑问，本网通过在网上对“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：

问题： (css)绝对定位如何在不同分辨率下的电脑正常显示位置？

描述:

绝对定位的父级元素已经相对定位了，但是在不同分辨率的电脑下，绝对定位还是会错乱，大家有什么好的解决方法么？

(之所以用绝对定位是因为项目是一个活动页面，有不同的按钮 位置不一，不是要让某个元素居中之类的)

如果用媒体查询，但是要写很多分辨率下的css样式，感觉不太实际？绝对定位用像素和百分比都会错乱。

望有遇到过类似问题的大神指点一二！！！

这是不同分辨率下同一个绝对定位的div显示位置，笔记本电脑分辨率低 1360*768，显示的浏览器网页样式差不多为大屏显示器1920分辨率网页放大到150%左右的样子。解决方案1:

外部的div可以给一个相对比较安全的宽度比如1200PX，作为背景并且相对定位，然后那颗树绝对定位，里面的子元素再绝对定位，这样就OK了解决方案2:

我自己一般都是先确定一个要适配的最小宽度，比如是1366，然后从最外层开始，main页面容器width100%，article内容容器给个max-width1366px，宽度也是width100%，相对定位，然后用margin-left:auto;和margin-right:auto;做居中，再到里边的内容块，大的布局主要用相对定位做，小的再用绝对定位，一般只做pc端的话很少需要下断点的。解决方案3:

直接写死中间内容区域的宽度(1000px或者996px或者其他的)

父容器(body或者div)用width:100%

对圣诞树(整棵树)也固定它的高宽

最后对礼物做相对定位处理

这样的界面应该不适合去做适配和响应式(不是大牛....只是个人直觉)解决方案4:

我看网上说可以给页面定义zoom缩放比例，根据不同的浏览器分辨率来定义缩放比率。

我自己写了段简单的js，先获取当前窗口的屏幕分辨率的宽度，如果自己的页面是以1920做的，则给当前需要缩放的容器加一个zoom属性。$(function(){

var w=window.screen.width;

var zoom=w/1920;

$("#container").css({

"zoom",zoom,

"-moz-transform":"scale("+zoom+")",

"-moz-transform-origin":"top left"

});

});

这样因为这个页面整体元素很多都是定位的，就可以一起整体缩小了。

因为分辨率低了之后，相当于把1920的页面放大看了，所以要给它一个缩放比率，

zoom:当前屏幕分辨率宽度/1920;

zoom是一个缩放属性，但是火狐不支持该属性，所以网上迂回的做法为scale缩放。

这个原理类似手机端要加一段js判断屏幕分辨率来使手机端页面缩小相应倍数一样。

但是scale缩放与zoom缩放并不相同，zoom在页面原始宽高的基础上缩放到自适应当前分辨率，而transform:scale是在页面已经按原来比例显示出来之后再进行缩放，这样缩放会两边留很大白边，且定位不会跟着变化。

最终推荐方法则是写一个安全宽度的div来作为相对定位的父元素。解决方案5:

使用百分比控制 left right top bottom解决方案6:

使用calc可以用百分比和像素同时定位

题： (css)绝对定位如何在不同分辨率下的电脑正常显示位置？width:-moz-calc(100% - (10px + 5px) * 2);

width:-webkit-calc(100% - (10px + 5px) * 2);

width: calc(100% - (10px + 5px) * 2);

解决方案7:

你可以考虑，用用弹性盒子

display;flex;在规定子级占用多大，

弹性盒子可以根据宽的多少自动分配的

解决方案8:

总感觉是因为你的父级元素写得不够恰当导致的...

背后那一棵树的大小应该是固定的,然后是相对定位..

里面所有的礼物都是相对这个树的绝对定位..

这样应该就没问题了..只要树的位置是对的礼物的位置应该也是对的

以上介绍了“ (css)绝对定位如何在不同分辨率下的电脑正常显示位置？”的问题解答，希望对有需要的网友有所帮助。

本文网址链接：http://www.codes51.com/itwd/4175199_2.html