又是过了十来天,在旅游与回家的路上匆匆度过,因为没有客观的空闲让我安静的写作,所以只能在闲暇时间完成了相关细节的优化。首先,在实际测试中,响应式排版的18个expand column在浏览器中显得过于多了,所以在一番思付后将其修改为了16个。其次,由于颜色管理模块与layer模块的mixin在实际应用中需要反复引用,并且经过测试,输出的css会重复将引入的scss编译进来,导致代码量无意义的增加,所以将layer与颜色模块的mixin单独呈现了出来供之后的编写调用,并且将文字的颜色也引入了颜色管理系统。最后,经过对弹性框模型的详细学习,将信息提示模块进行了最后一步的完善,使其能够进行动态响应并且有了良好的视觉效果。
.message-box{ height : 55px; overflow-x : hidden; overflow-y : hidden; text-overflow : ellipsis; color : $Color-Grey-500; background-color : $Color-Grey-900; padding : 10px 15px 10px 15px; border-radius : 0.5em; border : 3px solid $Color-Grey-600; margin : 0; @media (max-width : 767px) { position : inherit; top : 0; margin : 0; border-radius : 0; border : none; display : flex; } @include box-shadow-layer-6; .message-box-avatar{ width : 55px; height : 55px; border-radius : 0.5em; padding : 0; margin : 0; float : left; -moz-box-flex : 1.0; -webkit-box-flex : 1.0; img{ width : 55px; height : 55px; border-radius : 0.5em; } } .message-box-content{ font-size : small; height : 55px; overflow-x : inherit; overflow-y : scroll; text-overflow : ellipsis; z-index : inherit; padding : 0; border : 0; margin : 0 0 0 10px; float : left; @media (max-width : 767px) { -moz-box-flex : 4.418182; -webkit-box-flex : 4.418182; max-width : 691px; } @media (min-width : 768px) { font-size : x-small; -moz-box-flex : 2.709091; -webkit-box-flex : 2.709091; max-width : 149px; } @media (min-width : 992px) { -moz-box-flex : 4.363636; -webkit-box-flex : 4.363636; max-width : 224px; } @media (min-width : 2500px) { -moz-box-flex : 5.072727; -webkit-box-flex : 5.072727; max-width : 279px; } } .bright-theme{ color : $Color-Grey-500; background-color : $Color-White; } ::-webkit-scrollbar{ display : none; } }