我是工程師但我是女生

一般我們很常透過 vw、vh 來寫一些需要依照畫面等比例顯示的東西，可是手機瀏覽器會在滑動的時候隱藏網址列和工具列，變畫面大小很容易造成畫面跑版，意思就是網頁已經載入的元件會因為我們划手機而忽大忽小。

某些情況我們不希望 Laravel Mix 修改 url 的結構，像我遇到的情況是 Laravel 專案是掛在 Domain 的資料夾底下，反正是一個很奇怪的結構... https://domain.com.tw/laravel/

前陣子在 FB 上看到有人分享文章 給網站開發者：7 個值得在 2023 年用看看的免費工具 ，其中第七點 CSS Layout 我還滿喜歡的，分享給大家。

我們在寫網站的時候很常會載入一些可愛的小圖示讓網頁看起來更美觀，而我個人最常用的就是 Font Awesome，在使用過的過程中難免會遇到一點小問題，這個問題其實我在 Font Awesome 5 也有遇到，但那個時候沒想到要記錄下來。

我是要閃爍的文字。 .shine { animation: shine 0.1s ease-in infinite alternate; } @keyframes shine { from { opacity: 1; } to { opacity: 0.5; } }

<style type="text/css"> .resp-container { position: relative; overflow: hidden; padding-top: 56.25%; } .resp-iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> <div class="resp-container"> <iframe class="resp-iframe" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> </div> padding-top：為 iframe 的 (高 / 寬 * 100%)，youtube 預設是 16:9 即 56.25%

div > img { width: auto; height: auto; max-height: 100%; max-width: 100%; } 如果要置中的話，再加上 position 設定。 div { position: relative; } img { width: auto; height : auto; max-height: 100%; max-width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }

overflow : hidden; text-overflow : ellipsis; white-space : nowrap; 補充： 如果設定在 td 標籤會發現沒有作用，因為 td 屬性是 table cell，如果是一般的 block 就會正常，可以修改如下 td { max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }