css 如何根据显示器屏幕大小自动调整显示区域
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css 如何根据显示器屏幕大小自动调整显示区域相关的知识，希望对你有一定的参考价值。
一般显示为4：3，但是客户要求根据显示器屏幕大小自动调整显示区域，比如16：9。是否应该在CSS上加点代码？还有其他方法吗？谢谢各位达人~
参考技术A 遇到这种客户就倒霉了。中文网页，内容稍微多点的排版，做自适应，搞死你，不是不能实现，是很麻烦。 参考技术B 宽度自适应 width:80%;就是不管你的屏幕大小是多少，宽度占屏宽的80%本回答被提问者采纳
图片大小不改动，根据屏幕大小自动把图片居中显示
background属性
background-image: url(‘../img/1_1.jpg‘); <!-- 背景图片路径 --> background-repeat: no-repeat; <!-- 背景图片是否重复显示 --> background-position: center; <!-- 若背景图片小于div,则居中显示 --> background-attachment: fixed; <!-- 背景图片固定,不随scroll拖动而变动 -->
居中显示
父容器
style="overflow-x:hidden"
子容器
position: absolute; left: 50%; top: 0%; <!-- div向左移动屏幕宽度的50% --> margin-left: -960px; margin-top: 0px; <!-- div向左移动自身宽度的50% -->
子容器会居中显示，但右侧多余的东西要靠父容器的overflow-x:hidden隐藏。
如果要上下也居中显示，则postion的top也要设置为50%，margin-top设置为图片的一半.
html&css
<body style="overflow-x:hidden"> <!-- background-attachment: fixed; --> <div style="width: 1920px; height: 1420px; position: absolute; left: 50%; top: 0%; margin-left: -960px; margin-top: 0px; background-image: url(‘../img/1_1.jpg‘); background-repeat: no-repeat; background-position: center;"> </div> </body>
这样可以达到图片居中显示的效果。
以上是关于css 如何根据显示器屏幕大小自动调整显示区域的主要内容，如果未能解决你的问题，请参考以下文章
VC MFC界面怎么根据桌面分辨率自动设置显示窗口和控件的大小