随记 - 移动端开发常见

瑟瑟发抖的张

已于 2024-01-09 21:19:58 修改

阅读量419

点赞数 4

文章标签：前端 html css

于 2023-12-26 14:57:37 首次发布

本文链接：https://blog.csdn.net/DZYUL/article/details/135222254

版权

不定期更新

1. 字体不用给高度和宽度

2. 像素问题 - border

3. url(路径) - 不用引号

4. shadow： 1 2 3 rgba()

5. 多个子盒子在父盒子中水平居中且各占一行

父盒子添加样式

                display: flex;

                flex-direction: column;

                align-items: center;

单个子盒子取消父盒子的水平居中样式

子盒子添加样式：

align-self: baseline;

原因：元素设置flex-direction: column; 时，默认align-self: stretch；

align-self属性

（1）stretch：元素被拉伸以适应容器。
如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

（2）baseline：元素位于容器的基线上。
如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。

6. v-show / v-if / v-lazyload / 优化加载

（1）v-show 和 v-if 优化加载

v-if的时候每次切换都会在原基础上再增加流量消耗；

v-show只会加载第一次，后续切换不会再消耗流量

原因： v-if是控制标签的删除和添加；
v-show是控制标签的显示与隐藏；
在大量控制标签的时候推荐使用v-show，消耗流量更少，优化加载速度，降本增效

（2）v-lazyload 是一个 Vue.js 框架的第三方插件，用于实现图片的延迟加载。

:src 的话是在页面一打开就把全部图片加载出来，如果用户没有下滑屏幕的话，会造成流量浪费，增加服务器负担；

v-lazyload是当用户下滑，图片即将出现但未出现在屏幕框内时，图片才会加载，优化网页性能，资源利用率更高；

tips：观察标注可以更深刻的理解

7. 模版化时，ol 中的第一个 li 和第二个及以后的 li 样式微不同

如果 index 为0，那么 { 'group-top10-reward': index } 就是 false，这个类名就不会显示；

index 不为0，就会显示这个类名

使用场景：

                        大分类1
                                小分类1
ol模版1，ol模版2，ol模版2，ol模版2
                                小分类2
                                        ol模版2
                                小分类3
                                        ol模版2，ol模版2，ol模版2
......

8. 控制文本强制不换行

white-space: nowrap;

9. 多行文本精准行间距 margin-bottom 或 line-height

特殊情况，如果文字上方的图片给的尺寸不对的话，需要重新计算文字的行高，因为在慕客上给的是三倍图，用文字大小除以3×2，变成二倍文字大小，行高就是二倍文字大小除以二，是这行文字的上行高，再加上一行的下行高就是两行文字间的距离。

10. 遇到问题可以用watch去检查

因为watch可以监听到数据，computed虽然也可以，但一般用watch

11. Oswald-SemiBold 第三方字体

如果用到Oswald-SemiBold字体的时候，就在css上引入一下链接，这个是第三方字体

@font-face {

font-family: 'Oswald-SemiBold';

src: url('https://static.yximgs.com/udata/pkg/phenix/Oswald-SemiBold.d8b6ea06cc7b7470.ttf') format('truetype'); /* Safari, Android, iOS */
}