HTML+CSSS3自动适应屏幕宽度笔记

最新推荐文章于 2024-06-13 19:04:45 发布

Anshay

最新推荐文章于 2024-06-13 19:04:45 发布

阅读量2.7k

点赞数 1

分类专栏： Html

本文链接：https://blog.youkuaiyun.com/qq_27665897/article/details/79129613

版权

本文记录了一个业务需求，即优化页面在IE8、IE9浏览器1024*768和1366*768分辨率下的显示。通过使用CSS3的@media规则，调整页面布局，使得在不同分辨率下可以完整显示。原有的CSS代码被扩展，新增针对不同分辨率的样式覆盖，实现了基本需求。这是一个关于响应式网页设计的学习和实践过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在公司新接到一个业务升级项目，其中一个小需求为：

【页面显示优化:自动调整页面使页面在IE8 IE9 浏览器的 1024*768 和 1366*768分辨率下能完全显示】。

大概截图如下：

这里是使用的1024*768的分辨率，顶部从右向左为login，headbar，logo三个div，前两个右浮动，最后一个左浮加载到顶部div中（前人写的代码，在这里不做讨论）。可以看到中间的headbar因为宽度不够盖到logo上面去了，这种情况是不被允许的。

原先的CSS配置如下：

.header { position: absolute; cursor: default; width: 100%;}
.header table td{ text-align:left;}

.header .logo { float: left;position: absolute;}

.headerbar{float:right; width: 606px; height:90px; overflow: hidden; position:relative;}

.headermenu { list-style: none; height:90px; position:absolute; left:0;top:0; }/*  overflow: hidden; */
.headermenu li { float: left; width:100px; list-style:none; }
.headermenu li a { 
	display: blo