根據頁面大小調整內容大小
阿新 • • 發佈：2018-12-15
最近在寫頁面的過程中發現一個問題，我寫的頁面放到大螢幕上是可以顯示完全的，但是放到小螢幕上就會出現遮蓋問題，顯示不完全，因此通過大量查詢，查到了前端頁面中的兩個東西可以解決該問題。
第一、em，相對與父元素的長度（em的概念自行查詢）
第二、rem，相對與根元素的長度（rem的概念自行查詢）
所以本文采用了rem的概念來解決這個問題，具體程式碼如下：
<script> function defaultfont(){ var sw = $(window).width();//獲取螢幕寬度 var pw = 1280; //該值為設計圖的尺寸 var f = 100*sw/pw;//做計算 $('html').css('font-size', f+'px'); } defaultfont(); //執行函式 setTimeout(function(){ defaultfont(); }, 100); </script>
對空間進行設定如下：
<select class="form-control select-date" id = "select_date_1" style="width:1rem">
<option value=1>最近7天</option>
<option value=2>最近30天</option>
<option value=3>自定義</option>
</select>其中的style="width:1rem"會隨著頁面大小而改變自己的寬度。