2020年3月11日 星期三

RWD(Responsive Web Design) 設計常用斷點

覺得這個之後會常用，總之先記錄起來。

@media screen and (max-width: 1200px) { }
@media screen and (max-width: 992px) { }
@media screen and (max-width: 768px) { }
@media screen and (max-width: 680px) { }
@media screen and (max-width: 480px) { }
@media screen and (max-width: 320px) { }

別忘了要在 <head> 裡加上
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
張貼者： 於 沒有留言:

2020年2月29日 星期六

數學公式解的方便之處

今天在日常刷 codewars 時，遇到需要連續正整數相加求和 (ex: 1+2+3...+n)，
以我會直覺想到的就是直接用 for loop 解決，但是我突然想找找看有沒有其他的方法。
在強大的 google 幫助下找到了 Σ 這個數學符號，
又以 Σ 為關鍵字找到了數學相關的線上教學頻道獲得了以下的公式 :
1+2+3...+n = 1/2n(n+1)

接著馬上寫了幾行簡單的 code 做測試
    function subFor(n) {
      let sub = 0;
      for(let i = 0; i <= n; i++) {
        sub += i;
      }
      return sub;
    }
    console.time('test for');
    console.log(subFor(10000));
    console.timeEnd('test for');

    function sub(n) {
      return n*(n+1)/2;
    }
    console.time('test 公式');
    console.log(sub(10000));
    console.timeEnd('test 公式');

測試的結果為下圖

結論: 單純以求和為目的的話用公式解法能得到相當優異的效率，當然是在 n 相當大的情況下，果然在優化方面數學還是佔有一席之地的啊...有機會的話我也要多多少少補一點數學呢。

另外我發現，直接從 vscode 複製代碼直接貼到 Blogger 裡會有背景加代碼分色的效果呢，只是貼完之後要切到 HTML 改一下 line-height ，不然他預設的間距讓我看了不舒服...

張貼者： 於 沒有留言:
標籤：

2020年2月19日 星期三

解決 Vue Cli 專案發布至 Github Pages 上無法顯示頁面問題

會這樣的原因是，此時 Vue 專案指向的根目錄位置還是在開發階段的本地端
比如說專案是放在 D:\ 底下的專案資料夾，那麼 Vue 專案根目錄就是指向 D:\ 專案資料夾
這樣放在 Github 上之後當然就找不到 D:\

Vue Cli2


找到專案資料夾裏的 config \ index.js
將 build 裡的 assetsPublicPath 改成 assetsPublicPath: './',
build {
  assetsPublicPath: './',
}

Vue Cli3


在專案資料夾下新增 vue.config.js 檔案
內容是
module.exports = { publicPath: './', };

這樣之後 build 出來的專案就能正常的在 Github Pages 上顯示了
張貼者： 於 沒有留言:

2020年2月17日 星期一

在 Blogger 裡插入程式碼區塊 code block

在想要寫自己在 Blogger 上的第一篇文章時就碰到了這個問題 ...
於是我馬上 Google 搜尋 "code block for blogger" 很快的就找到了很多的解決方法
因為我的需求很簡單，只要能顯示出程式碼的區塊就好了

所以用了以下 CSS code

CODE {
 display: block; /* fixes a strange ie margin bug */
 font-family: Courier New;
 font-size: 8pt;
 overflow:auto;
 background: #f0f0f0 url(http://klcintw.images.googlepages.com/Code_BG.gif) left top repeat-y;
 border: 1px solid #ccc;
 padding: 10px 10px 10px 21px;
 max-height:200px;
 line-height: 1.2em;
}
只要將這段貼到
主題 => 自訂 => 進階 => 新增CSS => 套用至網誌
這樣就OK了 !
當然你想要改改字型、顏色、大小...之類都可以，看個人喜好

提醒!! : 有可能在多次改版之後找不到 "主題" 這個選項

題外話，我還滿想知道這 code 最早是源自於哪裡的 ? 應該說是由誰寫下的 ?
google 了一下發現，這段 code 似乎只在中文語系圈裡有蹤跡
假如有人知道的話可以留言給我喔 !
張貼者： 於 沒有留言:
訂閱： 文章 (Atom)