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

《電腦欺詐和濫用法》(Computer Fraud and Abuse Act,CFAA)

hiQ 寫了一支爬虫程式去parse linkedin 的資料,透過這個方式賺錢,被parse 資料的人眼紅告了 hiQ, 結果 hiQ 無罪,這告訴我們快點來寫爬虫程式 […]

Read More

新版本的Windows 11 檔案總管 (Modernized File Explorer Home)

電腦相關應用

MS 的官方部落格公佈下一版的 Windows 11 檔案總管,點到 “Home” 的操作起來感覺像是結合了瀏覽器: Announcing Win […]

Read More

發佈留言

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