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


本篇内容主要讲解“css如何在不同分辨率下的电脑正常显示定位位置”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“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代码如下:zoom:当前屏幕分辨率宽度/1920;结果是:除了firefox以外,其他浏览器可以正常支持zoom属性,并且页面需要缩放的区块整体缩放到了适应当前分辨率的效果,而transform:scale 则是先把页面显示为已经把原本页面放大后再使用sca免费云主机域名le,则该缩小相当于当前页面下缩小的效果了,两边自然会留白。css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。到此,相信大家对“css如何在不同分辨率下的电脑正常显示定位位置”有了更深的了解,不妨来实际操作一番吧!这里是百云主机网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: WPF如何实现自带触控键盘的文本框

这篇文章主要介绍了WPF如何实现自带触控键盘的文本框的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇WPF如何实现自带触控键盘的文本框文章都会有所收获,下面我们一起来看看吧。项目有个新需求,当点击或触碰TextBox时,基于Text…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 03/06 11:04
下一篇 03/06 11:04

相关推荐