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

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

Ubuntu 顯示 unable to resolve host 解法

電腦相關應用

在修改完ubuntu 的電腦名稱之後,使用終端機(Terminal)下的指令,都會先顯示 unable to […]

Read More

如何透過USB安裝Ubuntu

電腦相關應用

家裡的舊電腦裡的 Windows 掛掉了,需要重灌,但舊電腦只有用來上網,所以我決定安裝Ubuntu,希望舊電 […]

Read More

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

hiQ 寫了一支爬虫程式去parse linkedin 的資料,透過這個方式賺錢,被parse 資料的人眼紅告 […]

Read More