頁面適配&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
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM