css Archives - Monkianer

vue-cli webpack 載入CSS字型

2020-10-042020-10-04 Monkianer

原本使用 ../assets/fonts/NotoIKEATraditionalChinese-Regular.ttf 在 dev 模式沒有問題，但是 build 之後就找不到路徑了，如果使用 ~@/ 搭配在 index.js 裡修改 assetsPublicPath: ‘/’ 為 assetsPublicPath: ‘./’ 就可以了。

$font_path: '~@/assets/fonts/';

@font-face {
  font-family: "Noto IKEA";
  src: url($font_path + 'Noto-Regular.ttf');
}

Vue.js Tips

2018-06-132024-04-17 Monkianer

隱藏大括號 {{ … }} 在 Vue 載入階段

css:

[v-cloak] {
  display: none;
}

html:

<div v-cloak>
  {{ message }}
</div>

REF: https://vuejs.org/v2/api/#v-cloak

新增資料在 data 後，Vue 沒有反應

通常是因為 vue 已經對資料完成建立 reactivity 了。你需要使用 Vue.set 來建立關係。

Vue.set(this.myObj, "myKey", "Hello world")

REF: https://vuejs.org/guide/extras/reactivity-in-depth

在 iOS 網站當你點擊輸入框或下拉選項避免自動 zoom in

2018-03-072018-03-07 Monkianer

在 iOS safari 或 chrome 中當你要輸入文字時，文字框會自動 zoom in。

要避免這種情形可以使用以下 CSS，原因是 iOS 會強制將小於 16px 的 input 與 select 文字 zoom in 至 16px 大小，而預設的 input 以及 select 字體大小都為 11px ，所以你只要自行將 input 與 select 的字體大小指定為 16px 就好了。

以下 CSS 你可以全貼上，也可以選擇你需要的項目指定就好。
注意如果你有自行設定 input 和 select 其他字型大小(小於 16px 的) 你可以用 !important; 讓後續的 CSS 失效。

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

Sass 中文字報錯

2017-07-252017-07-25 Monkianer

如果使用中文註解，避免出現 Invalid US-ASCII character 可以在檔案名稱 .scss 或 .sass 首行加上

@charset "UTF-8"

iframe 如何跟著 RWD 網站縮放

2017-07-072020-07-04 Monkianer

這個方法對與 iframe embed 的物件通通有效 (ex: Youtube……)

原理是使用 .google-maps 裡的 padding-bottom (或 padding-top 也可以) 屬性將 iframe 撐開，這裡使用 75% 是因為 iframe 起始值的 width 為 600 而 height 為 450，所以 height 永遠為 width 的 0.75 。

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

See the Pen Responsive Embed iframe by Monkianer (@monkianer) on CodePen.

當然因為這裡只是使用 CSS 來縮放，所以沒有辦法使地圖縮放後保持在原本的中心。如果要的話需要使用 google maps 的 API 才行，不過當然如果你使用了 Javascript 來控制地圖的話，你也可以乾脆使用 JS 來縮放你的地圖並保持在地圖的中心。