iT邦幫忙

0

使用Modernizr.js 沒有RWD效果

如題,想用Modernizr.js這個套件達成像有CSS media query一樣在不同尺寸有不同的效果,希望在768px以上的時候輪播圖的圖片可以顯示2張,768px以下是1張,但使用Modernizr.js後無論什麼尺寸都只顯示1張,或是要重新整理才會有2張,沒有滑順的感覺,請各位大神幫忙解惑~感恩
附上codepen: https://codepen.io/Maxineuse/pen/xxqoozY

對了,還有一個問題點就是為什麼很多css或是js都需要加上以下類似的連結,不加有些就會失效?

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"> </script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>

以上麻煩了,謝謝

小魚 iT邦大師 1 級 ‧ 2021-06-24 19:32:32 檢舉
要加是因為你需要用到它的功能啊,
這可能要從JavaScript的基礎開始學,
先找些基礎的文章下點功夫吧.
但是它沒有CSS檔案嗎?
除非是用resize來判斷,
要不然應該不會自己更新.
稍微看了一下
您只在頁面初次加載時執行了resize
resize要放在$(document).ready(function() 裡面
感覺js的邏輯順序也有點怪怪的
沒用過Modernizr,也可能是我漏看誤會了

1 個回答

0
Mizok
iT邦新手 5 級 ‧ 2021-08-06 03:07:08
最佳解答

其實問題都還蠻~基本的
這邊有幾個建議:

  1. 先弄懂$(document).ready()的發動時機點, 還有他是用來幹嘛的
  2. 去查詢有關網頁事件綁定的相關知識,
  3. 用套件的時候, 記得先去讀過套件的官方技術文件, 查詢他的api用法

有幾個很明顯的問題
我這邊把codepen裡面寫的程式直接貼在這裡

function mq() {
  //基本上modernizr的部分沒有問題
  var query = Modernizr.mq('(max-width: 768px)');
  // 當CSS media query計算的視窗寬度小於769px時執行
  if (query) {
      // 這邊是去給#holder元素塞入字串, 基本上沒什麼問題
      $('#holder').html('true');
      // 這邊很明顯的是搞錯了$(document).ready()的使用方式
      $(document).ready(function(){
          // 這邊也錯了,$(ele).slick({...})方法是初始化在用的,不是讓你即時變更輪播的狀態用
         $('.carousel').slick({
            slidesToShow:1,
            dots:true,
            centerMode: true,
         });
      });
  } 
  else {
      // 當CSS media query計算的視窗寬度大於等於769px時執行
      $('#holder').html('false');
      // 這邊很明顯的錯了, 跟上面一樣
      $(document).ready(function(){
          // 這邊也錯了, 跟上面一樣
          $('.carousel').slick({
            slidesToShow: 2,
            dots:true,
            centerMode: true,
          });
      });       
 }//if statement結尾
};
// resize事件最好都要養成做debounce的習慣, 避免效能問題
$(window).resize(function() {
    mq();
});
mq();

我個人是覺得初學其實不太推薦用codepen學JS,尤其是在於理解網頁事件綁定的部分
(codepen 有些東西是已經事先幫你做好了)
要把JS學好最好還是自己用vscode開一個簡易專案來測試

幫你改了一版修正後的範例
https://codepen.io/mizok/pen/RwVeaBe
8/10後會把這個範例刪掉(個人有習慣定期清除用不到的pen), 如果要export請早

我要發表回答

立即登入回答