页面适配&swiper图片自适应计算方法

时间：2020-11-19 12:16:30 阅读：5 评论：0 收藏：0 [点我收藏+]

页面适配计算：

假设存在一个设计稿宽度 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图片自适应计算方法

标签：cal rgb 设计 bsp 实现 mic white span wip

原文地址：https://www.cnblogs.com/sforstudy/p/13971197.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行