服务热线 400-660-8066
石家庄网站建设
在响应式布局中经常碰到这样的情况，如两个并排的p盒子（当然也可是多个并排的p盒子），一个盒子里面放的是图片（在这里我们称为A盒子），一个盒子里面放的是文字描述内容（在这里我们称为B盒子），两个盒子各占整个页面宽度的50%（或者有多个p盒子宽度一样，或者多个p盒子宽度不一样，其中有一个或多个盒子包裹一张图片），然而高度要求一样；这样就造成了在适应不同大小的屏幕时，A盒子高度会随图片的改变而改变，而B盒子高度不会出现变化，影响布局和页面的美观。
下面这张图片能够让大家有清楚的认识，效果如图：
HTML如图：
在响应式网站设计布局中，不能设置固定高度，高度要随浏览器宽度的变化而变化，这里想到了JS来设置高度来解决。因为我在这里用得jquery的版本较低，所以用的是$(window).load(function(){})，高版本请用$(window).on(load，function(){})。
JS如图：
效果如图：
A、B两个盒子的高度一致了，不管浏览器的宽度怎么变化，两个盒子的高度始终一致。
响应式网站除了设计要有全局性，考虑不同终端的排版外，前端制作也是非常考验技术。
添加动力小姐姐微信
电话咨询
400-660-8066
