css如何實作網頁右上角選單效果

Max的網站,最近換了一個新的主題,發現在 chrome 瀏覽器裡主選單沒有被顯示出來。

發生的原因:css 裡 em 和 px 的轉換不一致所造成,Google一下 em 轉 px 應該是 1em=16px,但實際測試在 macOS 裡的 chrome 居然是 1em=20px。

影片說明:
https://youtu.be/CJ_YEo3Uv3g

瀏覽器的實測結果:

解法:把 64em 改用 1024px 。

會去用em 應該是有原因的,但目前不同瀏覽器對em的定義似乎不太一致,所以做出來的網頁在不同瀏覽器的效果會有所差別。

沒想到會來研究css,多學一點也滿好的,可以自己幫自己解決問題。


附上測試用的網頁:

<html>
 <body>
 <div style="box-sizing: border-box;
     width: 64em;    background: #fff3d4;
     border-color: #f6b73c;">hello 64em</div>
 <hr/>
 <div style="box-sizing: border-box;
     width: 1024px;    background: #fff3d4;
     border-color: #f6b73c;">hello 1024px</div>
 <hr/>
 <div style="box-sizing: border-box;
     width: 51.2em;    background: #fff3d4;
     border-color: #f6b73c;">hello 51.2em</div>
 </body>
 </html>

css如何實作網頁右上角選單效果:

@media print, screen and (min-width: 1024px) {
   .hide-for-large {
     display: none !important; } }

程式碼說明:

當符合最小寬度1024px(等於:螢幕寬度為 1024px 以上)執行括號內的設定值。

倒過來的範例:

@media screen and (max-width: 1024px) {
   .show-for-large {
     display: none !important; } }

程式碼說明:

當符合最大寬度1024px(等於:螢幕寬度為 1024px 以下)執行括號內的設定值。


相關文章:

Day22:小事之 Media Query
https://ithelp.ithome.com.tw/articles/10196578

CSS Media Queries 詳細介紹
https://www.oxxostudio.tw/articles/201810/css-media-queries.html

Facebook網友回應

您可能也會感興趣的文章...

獅尾鋸腿黑體 :改造思源黑體轉角挖空免費商用

電腦相關應用

獅尾鋸腿黑體基於思源黑體的轉角挖空改造,更加簡明現代化的字體。支援简体中文、繁體中文、韓文與日文;可以免費商用 […]

Read More

Hola Free VPN Proxy Unblocker

電腦相關應用

前陣子在偷別人家資料庫的內容,三不五時就被擋下來,真心感謝 Hola Free VPN 幫我到別人的網站裡搬出 […]

Read More

升級到 macOS Sierra (10.12版)

心血來潮,把使用中的MacOS 升級到 10.12 版(macOS Sierra),升級方式是要在 Apple […]

Read More

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *