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

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

該買「打折較多」或是「較貴卻夠用」的商品?

這篇文章要分享從「錨定效應」來看怎麼買東西會較理性。 Max的硬碟儲存空間滿了,有些Max想去做的事情,需要去 […]

Read More

LINE 免費貼圖 2020-11-10

電腦相關應用

這周推薦台灣地區的貼圖,很多電商都在推廣雙11(人造節日)的貼圖,讓人們有買到較便宜商品的感覺,希望大家在這一 […]

Read More

獅尾霓腿黑體:思源黑體上半邊變圓改造免費商用

電腦相關應用

獅尾霓腿黑體基於思源黑體的上半邊變圓改造,更加簡明現代化的字體。支援简体中文、繁體中文、韓文與日文;歡迎大家自 […]

Read More

發佈留言

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