css手机端弹出框的优化写法

最近在写手机端页面时,有很多地方需要用到弹出框,但是沿用之前的弹出框模版,感觉都不是很舒服美观,特别是超出页面内容的弹出框,在手机端显示会很麻烦,如果不做全尺寸手机的适配的话,很可能在不同用户手中就是一团糟了,因此,像做出美观适用的弹出框:
1.首先就是全尺寸的适配,这点其实不需要麻烦的用媒体查询,而是直接用百分比的宽高就好了,这样在不同的手机中,都是一样的比例
2.在有超出弹出框内容的时候,弹出框的高就要小心设置了,这时候我推荐用vw动态高度,更准确,同时做好auto滑动,体验会好很多
3.再有就是一些细节体验了,包括确定按钮的loading,遮罩层等等,做好这3点,就能把弹出框优化好了

你可能感兴趣的:(css,前端)