1. 程式人生 > >電商商城首頁總結

電商商城首頁總結

引入 fontsize 桌面 window turn 頁面 log screen scss

1.首先需要看設計稿是多少(750px),根據設計稿在設置rem,也就是設置html的字體大小,25*30=750

<!-- 在HTML開頭就引入動態獲取屏幕寬度 -->
<!-- rem實現適配 -->
    <script type="text/javascript">
        // 頁面打開 立即計算
        document.querySelector(‘html‘).style.fontSize = window.screen.width / 25 + ‘px‘;
        // 尺寸更改也會重新計算
        // 這裏 寫這個事件的目的是 是為了 讓我們在 桌面端測試時 可以自動計算 移動端
        window.onresize = function() {
            document.querySelector(‘html‘).style.fontSize = window.screen.width / 25 + ‘px‘;
        }
    </script>

在scss文件中設置rem
  @function p2r($size) {
  @return ($size/30) *1rem;
  }

  

  

電商商城首頁總結