问题解决:百分比宽度页面缩放会变形

简介: 问题解决:百分比宽度页面缩放会变形

在做vue项目的时候,把整个页面写完了,但是在对页面进行缩放的时候发现图形会变形,如下图所示:

①页面在缩放时,输入框会越过设定在中间的间距4350c2d9a73e4da284a25a2a5897a947.png

②输入框右边消失

2791b6d5039f41f7918192bb85e3f2ba.png

最后发现出现问题的原因是用百分比设置了父元素(整个框架)后,在子元素(输入框)用了px取设置宽度和外边距

解决办法:父元素设置了百分比width:100%;后,子元素的宽度也必须用百分比去设置,行内样式去设置margin-left之类的,也要用百分比,不要用px去写

.父元素{
  width:100%;
  height:100%;
  .子元素{
  width:80%;
  height:80%;
}

<子元素 style=‘width:80px;height:80px;’>

同理,如果想要整个页面在缩放时也保持一致,宽度高度都是用百分比去写,不要忘记给父元素设置百分比

相关文章
|
7月前
|
Python
缩放
【5月更文挑战第15天】缩放。
67 1
|
5月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
104 0
|
5月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
529 0
|
7月前
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理
字体等比例缩小
字体等比例缩小
74 0
|
前端开发
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
CSS设置标签、图片,放大、缩小、旋转、移动、倾斜(transform)
|
前端开发
响应式 - 基于宽度百分比的图像缩放
响应式 - 基于宽度百分比的图像缩放
148 0
响应式 - 基于宽度百分比的图像缩放
|
JavaScript 前端开发 流计算
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小
167 0
使用JavaScript 中的Math对象和勾股定理公式,计算鼠标的位置与页面图片中心点的距离,根据距离对页面上的图片进行放大或缩小处理。距离远时图片放大,距离近时图片缩小