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網友回應

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

水為什麼不走直路 Waiting until asynchronous blocks are executed

每件事情的發生必有其原因, 河流為什麼是彎的? 下面故事裡的用觀點滿有趣的, 他說彎是必然的就和人生會遇到無法跨愈的障礙一樣, 需要繞過去. 我覺得河流彎有彎的好, 缺點 […]

Read More

獅尾三腿黑體:思源黑體筆觸開花改造免費商用

電腦相關應用

獅尾三腿黑體基於思源黑體筆觸開花改造,更加簡明現代化的字體。支援简体中文、繁體中文、韓文與日文;可以免費商用,歡迎大家自由應用、自由優化、自由改作! 獅尾三腿黑體的特色是 […]

Read More

LINE 免費貼圖 2020-11-10

電腦相關應用

這周推薦台灣地區的貼圖,很多電商都在推廣雙11(人造節日)的貼圖,讓人們有買到較便宜商品的感覺,希望大家在這一波的特價活動中可以順便買到自己有需要而不是單純想要的東西。 […]

Read More

發佈留言

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