页面适配&swiper图片自适应计算方法
Posted sforstudy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了页面适配&swiper图片自适应计算方法相关的知识，希望对你有一定的参考价值。
页面适配计算：
假设存在一个设计稿 宽度 xxx 或者 未知page
1、设计稿存 page在一个元素 宽度100px
2、拿以上的需求去实现不同宽度的页面适配
page px = 750 rpx
1 px = 750 rpx / page
100px = 750 rpx * 100 /page
假设 page = 375px
利用一个属性 calc 属性 css 和 wxss都支持一个用于运算的属性
*1、750和rpx中间不要空格
*2、运算符的两边也不要留空格
swiper图片自适应计算：
swiper标签存在默认样式
1 width 100%
2 height 150px image存在默认宽度和高度320 * 240
3 swiper 高度无法实现由内容撑开
先找出来原图的宽度和高度 等比例 给swiper定宽度和高度
eg:原图的宽度和高度520*280px
swiper 宽度/ swiper 高度 = 原图的宽度 / 原图的高度
swiper高度 = swiper宽度*原图的高度 /原图的宽度
height: 100Vw * 280 / 520
以上是关于页面适配&swiper图片自适应计算方法的主要内容，如果未能解决你的问题，请参考以下文章