在做vue项目的时候,把整个页面写完了,但是在对页面进行缩放的时候发现图形会变形,如下图所示:
①页面在缩放时,输入框会越过设定在中间的间距
②输入框右边消失
最后发现出现问题的原因是用百分比设置了父元素(整个框架)后,在子元素(输入框)用了px取设置宽度和外边距
解决办法:父元素设置了百分比width:100%;后,子元素的宽度也必须用百分比去设置,行内样式去设置margin-left之类的,也要用百分比,不要用px去写
.父元素{ width:100%; height:100%; .子元素{ width:80%; height:80%; }
<子元素 style=‘width:80px;height:80px;’>
同理,如果想要整个页面在缩放时也保持一致,宽度高度都是用百分比去写,不要忘记给父元素设置百分比