首页  >  问答  >  正文

javascript - 绝对定位如何在不同分辨率下的电脑正常显示位置?

绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,大家有什么好的解决方法么?
(之所以用绝对定位是因为项目是一个活动页面,有不同的按钮 位置不一,不是要让某个元素居中之类的)
如果用媒体查询,但是要写很多分辨率下的css样式,感觉不太实际?绝对定位用像素和百分比都会错乱。
望有遇到过类似问题的大神指点一二!!!

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

阿神阿神2769 天前571

全部回复(8)我来回复

  • 高洛峰

    高洛峰2017-04-11 10:58:38

    直接写死中间内容区域的宽度(1000px或者996px或者其他的)
    父容器(body或者p)用width:100%
    对圣诞树(整棵树)也固定它的高宽
    最后对礼物做相对定位处理
    这样的界面应该不适合去做适配和响应式(不是大牛....只是个人直觉)

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 10:58:38

    总感觉是因为你的父级元素写得不够恰当导致的...
    背后那一棵树的大小应该是固定的,然后是相对定位..
    里面所有的礼物都是相对这个树的绝对定位..
    这样应该就没问题了..只要树的位置是对的礼物的位置应该也是对的

    回复
    0
  • 怪我咯

    怪我咯2017-04-11 10:58:38

    你可以考虑,用用弹性盒子
    display;flex;在规定子级占用多大,
    弹性盒子可以根据宽的多少自动分配的

    回复
    0
  • 怪我咯

    怪我咯2017-04-11 10:58:38

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

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

    回复
    0
  • 怪我咯

    怪我咯2017-04-11 10:58:38

    使用百分比控制 left right top bottom

    回复
    0
  • 伊谢尔伦

    伊谢尔伦2017-04-11 10:58:38

    我看网上说可以给页面定义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是在页面已经按原来比例显示出来之后再进行缩放,这样缩放会两边留很大白边,且定位不会跟着变化。

    最终推荐方法则是写一个安全宽度的p来作为相对定位的父元素。

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-11 10:58:38

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

    回复
    0
  • 高洛峰

    高洛峰2017-04-11 10:58:38

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

    回复
    0
  • 取消回复