仿做了一个手机端携程网站的模块布局
出现了一下问题:
1.宽度设置问题:一开始我用写PC端的方法,固定了盒子的宽度,导致完成后,盒子无法根据不同分辨率弹性伸缩。
解决方法:
弹性盒子布局,宽度不要设置px,宽度由%来写,比如
这里设置 左边盒子 flex:31% 中间盒子:23% 右边 46%
在这三个盒子中也设置display:flex 内部文字 justify-align:start; 右边两盒子设置 text-align:center.
2.关于 body的设置:将body设置一个最大宽度 maxwidth:xx px;(携程是540px) margin:0 auto (居中)
3.关于具体盒子 两侧的间隙
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190726144002997.png)
用margin: 0px 12px 10px;(携程手机网页端)