vue页面手机端开发总结

最新推荐文章于 2024-07-06 14:54:18 发布

向日葵小班-赖东东

最新推荐文章于 2024-07-06 14:54:18 发布

阅读量4.4k

点赞数

分类专栏：前端框架

本文链接：https://blog.csdn.net/mx_is_bang/article/details/106420084

版权

本文总结了Vue页面在手机端开发的一些经验，包括如何处理图片尺寸适应、动态设置图片源、利用v-if和伪元素减少DOM、样式布局如居中、外边距等，以及针对列表渲染和文字居中等问题的解决方法。特别提到，为解决手机端字体垂直居中问题，可以适当调整line-height。

摘要由CSDN通过智能技术生成

当图片的某元素是一张图片，可不设置宽高，将样式设置为如下，这样图片就会撑起来页面，避免一些宽高在不同机型不协调的问题。

display: block;
width: 100%;

需要条件判断显示不同的图片时，可以给标签的src绑定一个方法，该方法根据条件return它的URL
使用v-if 来决定dom元素是否渲染
多使用伪元素来减少div标签，常用的有before，和after
常用的设置有水平垂直居中，外边距，内边距，圆角，宽高，字体，字高，对齐方式，是否加粗

//字体
font-size:
line-height:
font-weight:
text-align:
//外边距，内边距
padding:/-top/-bottom/-right/-left
margin:/-top/-bottom/-right/-left
//圆角
border-radius：
//垂直水平居中
margin:0 auto;
top:50%
left:50%
transform:translate(-50%,-50%)

…

图片作为背景的样式设置，有时候图片的标签优先级很高，可以用div标签替代

	//图片样式
width: 3.65rem;
height: 2.29rem;
display: block;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;