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

有时候我们在写页面中,会发现绝对定位的父级元素已经相对定位了,但是在不同分辨率的电脑下,绝对定位还是会错乱,似乎父级的相对定位并没有起了作用。

首先要明白如下几个原理:

1、笔记本电脑的分辨率一般为1366*768附近,

PC电脑的分辨率一般为 1920*1080;

以下为常见电脑分辨率:

当写网页时,如果在1920这样的大分辨率写好之后,再去小分辨率的笔记本看同样的这个网页,会发现,笔记本电脑显示的基本为宽屏大显示器下网页放大至1.5倍左右的展示效果。

2、为了页面在不同的分辨率下正常显示,要给页面一个安全宽度,一般在做1920px宽的页面时,中间要有一个1200px左右的安全宽度,并且居中,所有的内容要写在这个宽度的box里,如果有背景图或者轮播图必须通栏整个页面的时候,一定要设置成居中对齐,这样当分辨率降低之后,背景图或者Banner图左右、中间1200宽度的盒子依然居中对齐,不会出现向左向右偏离。

盒子里的div等小盒子可以用百分比来表示,来达到页面自适应。

绝对定位的使用:

    ​   绝对定位的时候,该元素的父元素一定要记得设为相对定位,这样在不同分辨率下定位才不会错乱,但是前提是这个父元素在一个安全的宽度里面,如果这个父元素本身是一个会因为分辨率降低而改变的元素,则定位一定会跟着乱。

在布局页面结构的时候,一些box框架是必不可少的,比如1200px安全宽度的div。

例如:做一个活动页面,其中这个页面背景为一个大图,在这个大图上要放一些小图来与大图实现定位,绝对不能以大图直接作为背景!

而是在放大图背景的div里继续放一个安全宽度div,再把它作为父元素做相对定位,给里面的子元素做绝对定位,这样就不会出现不同分辨率下绝对定位错乱的问题了。

通过总结网友经验,通过加zoom属性,可以让页面某个区块根据分辨率不同进行自动缩放到合适区域,但是有个bug,就是火狐浏览器打死都不支持这个属性,即使用transform:scale(x,y);属性也于事无补。还有一个小问题,在页面加载慢的时候重新刷新页面会先显示放大的效果,再变为缩小后的效果,会闪一下,这个还没找到解决办法,希望懂的朋友们多多交流。

zoom代码如下:

1 $(function(){        var w=window.screen.width;        var zoom=w/1920;
2         $("#container").css({
3         "zoom",zoom,
4         "-moz-transform":"scale("+zoom+")",
      "-moz-transform-origin":"top left"
5         });
6  });

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

zoom属性的浏览器支持性:

结果是:除了firefox以外,其他浏览器可以正常支持zoom属性,并且页面需要缩放的区块整体缩放到了适应当前分辨率的效果,而transform:scale 则是先把页面显示为已经把原本页面放大后再使用scale,则该缩小相当于当前页面下缩小的效果了,两边自然会留白。

PS:我觉得zoom属性蛮好用的,怎么现在都不怎么用了呢,居然firefox还不支持,而且很难找到解决办法。所以只能好好改变自己代码结构,提高代码的严谨性了,写出高效高兼容的代码,是每一个前端义不容辞的责任。

【注:该文章整合网友意见与经验总结所得】

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏前端新视界

使用 canvas 画图时图像文字模糊的解决办法

最近在使用 canvas 画图的时候,遇到了图像文字模糊的问题,解决思路就是根据分辨率绘制不同尺寸的画布。以下是创建高分辨率画布的代码:

992
来自专栏达摩兵的技术空间

固定宽高比例盒模型实现方案

常规布局中,我们经常会遇到百分比布局的方式,也经常会遇到宽度与高度都设置百分比的情况,但高度值我们一般很少用百分比。尤其在百分比布局中,可能很多布局你是宽度百分...

842
来自专栏黑白安全

CSS实现毛玻璃透明效果

其实毛玻璃的模糊效果技术上比较简单,只是用到了css滤镜(filter)中的blur属性。但是要做一个好的毛玻璃效果,需要注意很多细节。

1033
来自专栏HTML5学堂

前端特效制作 | CSS3圆形风格面包屑导航

HTML5学堂(码匠):前端开发中,导航栏是一个不可或缺的模块。效果酷炫、制作简单必然是开发者的首选,使用CSS3制作的面包屑导航将是广大开发者的一个绝佳选择。...

5956
来自专栏Web项目聚集地

CSS布局解决方案(居中布局)

前端布局非常重要的一环就是页面框架的搭建,也是最基础的一环。在页面框架的搭建之中,又有居中布局、多列布局以及全局布局,今天我们就来总结总结前端干货中的CSS布局...

1092
来自专栏IT大咖说

分享7款超赞的CSS3动画效果,值得你收藏!

今天与大家分享7款顶级的CSS3动画效果,包含了菜单特效、文字特效、图片特效等,另外还有几个表现非常特别的动画,个人觉得非常赞哦。

3333
来自专栏IMWeb前端团队

居中那些事情

居中那点事 最近碰到一些居中的问题需要处理,这里整理下碰到的问题以及一些解决的方案 文本水平居中 text-align:center; 可以知道,让一个元素水平...

22010
来自专栏Bingo的深度学习杂货店

水平居中和垂直居中

本章介绍几种常见的水平居中和垂直居中的实现方式 <!DOCTYPE html> <html> <head> <title>水平居中和垂直居中</titl...

3213
来自专栏阮一峰的网络日志

Flexbox 布局的最简单表单

弹性布局(Flexbox)逐渐流行,越来越多人使用,因为它写 CSS 布局真是太方便了。

962
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之padding

1、padding与容器尺寸之间的关系 对于block水平元素:①padding值暴走,一定会影响尺寸;②width非auto,padding影响尺寸;③wi...

3087

扫码关注云+社区

领取腾讯云代金券