页面布局左侧固定宽度,右侧屏幕自适应

开发初期,页面布局要实现左侧固定宽度右侧屏幕自适应,且右侧内容块的距离是8px固定,我们考虑的最小分辨率是1366px,1366以下并不能像bootstrap那样内容块被挤下去。因为没有考虑清楚,没有使用bootstrap,采用了左边用px,右侧用rem,当屏幕<1366px,font-size=100px.固定了宽度。

结果出现问题,大于1366px,由于左侧固定宽度,分辨率变大,右侧变大,左侧宽度并未变,所以在1600px\1920px下导致右侧留出很宽的宽度,影响页面美观度,所以其实一开始方案就不对,使用rem用于整个页面都是自适应。

解决方案:

1、其实1366px及以下用px,就可实现,由于我们已经使用了rem,工程量太大,就未更改了,so <1366px,固定宽度,没问题;

2、大于1366px,参考bootstrap的做法,方案改成使用100%,而非rem,右侧div不设置宽度,float:left;margin-left:左边固定宽;

其余里面内容全改为100%.部分相差不大,不改,有些echarts的父级div用了百分比,导致echarts图形变形,所以依然用rem;

3、部分间距是固定间距,计算百分比并不可行,只能设置在每一个模块中,将100%分两个模块,其中一个模块box-sizing:border-box;padding-right:8px;但这种情况下必须在模块下再建立一个div,宽度100%,设置background-color,否则padding也会有颜色;

到此,就算解决了;

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章