如何是页面兼容各种分辨率的浏览器

mamlong 发布于 2013/12/13 13:04
阅读 1K+
收藏 1

大家在开发中是如何使页面兼容各种分辨率的。不同分辨率对应不同样式文件?所以元素的大小都使用%确定?还是其他。

大家说说自己的想法,共同探讨。

加载中
0
开源无憾
开源无憾

引用来自“开源码农”的答案

用js实时判断dom的width和height,并动态调整页面的最外层容器的大小
我只是说明一下思路,外面调整了后,里面肯定同时响应。再就是你得有个具体场景,或者具体页面,我们才能分析,最起码你得告诉我们是兼容不同的 PC 和手机的屏幕大小,还是仅仅只用兼容不同的 PC 的屏幕大小。另外, js 的跨平台性和功能性都比 CSS 强大的多, CSS 的方案就目前看,还是不现实。假设这是一个单页面自适应布局,分为 left center right 三部分,由最外层的 layout 包裹,因为你没有说明你的自适应需求,所以我做出以下几种猜测。第一种,三个部分按一定比例(因为你提到了“ % ”,我猜测这是你需求的一部分),事先规定好这个比例,每次 window.reszie 事件完成以后,调整 layout 的宽度为当前文档对象的 clientWidth+”px” 宽度,同时按事先定好的比例调整几个子节点的宽度;第二种,枚举出有限组符合需求的宽度数据,(具体多少自己看着办,一个区间里面设定一组数据不会有多少,太小的和太大的分辨率取边组值即可) {{“layout”t:640,”left”:200,”center”:240,”right”:200},{“layout”t:990,”left”:300,”center”:390,”right”:300},{“layout”t:1200,”left”:350,”center”:500,”right”:350} …} ,分辨率不同的情况下,判断出当前最接近的一组数据,然后用 js 精确的调整布局;如果你有一部分是固定宽度而其他的是自适应宽度,或者你的布局内部的子节点数不只这么简单三个,或者你的页面结构相当复杂,或者不同的页面采用不同的自适应方案,我想,在你说清楚你具体的需求之前,应该没人能够说出你的 “兼容各种分辨率”到底是什么样子。最后还附上一句题外话——如果你想和别人交流问题,就得拿出诚意,别老说别人的思路 “不行”。
mamlong
mamlong
谢谢了。说得很好。确实使我自己没有表达清楚。收益了。
0
Feng_Yu
Feng_Yu

固定一个最小分辨率,低于这个分辨率就在浏览器上加上滚动条。

mamlong
mamlong
这个没听明白,估计不行吧?
0
开源无憾
开源无憾
用js实时判断dom的width和height,并动态调整页面的最外层容器的大小
mamlong
mamlong
如果,里层的使用px确定元素大小,还是不行的。
0
码不停蹄
码不停蹄
最新的CSS媒体查询, 用media
mamlong
mamlong
回复 @码不停蹄 : 恩 兼容性真的是个老大难问题。
码不停蹄
码不停蹄
回复 @马明龙 : 看你需要兼容多少浏览器了。 响应开发应该只对对各种属性都兼容的。 全兼容意味着牺牲更多效率体验
mamlong
mamlong
css3 的media有些浏览器不支持。这样也会引入另一个兼容问题。
0
YuKunYi
YuKunYi
看具体的布局咯,可以分成几个分辨率区间,动态显示隐藏一些项目~~~JS控制。。。
mamlong
mamlong
也就是说 不同分辨率对应不同的代码(不同的样式)吧
返回顶部
顶部