我正在使用CSS媒體查詢在響應式網站上工作。以下是設備的良好組織嗎？手機，Ipad（橫向和縱向），臺式機和筆記本電腦，大屏幕常見的媒體查詢斷點值是什么？我打算使用以下斷點：320：智能手機肖像481：智能手機景觀641或768 ???：iPad縱向???961：iPad景觀/小型筆記本電腦???1025年：臺式機和筆記本電腦1281：寬屏你怎么看？我有一些疑問？點。
3 回答
繁花如伊
TA貢獻2012條經驗 獲得超12個贊
與其嘗試將@media規則定位到特定設備，不如說將它們基于您的特定布局更為實用。也就是說，逐漸縮小桌面瀏覽器窗口的范圍，并觀察內容的自然斷點。每個站點都不同。只要設計在每個瀏覽器寬度上都能很好地流動，它就應該在任何屏幕尺寸上都非?？煽康毓ぷ鳎ú⑶矣泻芏噙@樣的屏幕。）
胡子哥哥
TA貢獻1825條經驗 獲得超6個贊
我一直在使用：
@media only screen and (min-width: 768px) {
/* tablets and desktop */
}
@media only screen and (max-width: 767px) {
/* phones */
}
@media only screen and (max-width: 767px) and (orientation: portrait) {
/* portrait phones */
}
它使事情相對簡單，并允許您在縱向模式下為手機做一些不同的事情（很多時候我發現自己不得不為它們更改各種元素）。
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
我正在使用4個斷點，但正如ralph.m所說，每個站點都是唯一的。你應該嘗試一下。由于設備，屏幕和分辨率眾多，因此沒有神奇的斷點。
這是我用作模板的內容。我正在檢查網站上不同移動設備上的每個斷點，并為每個元素（ul，div等）更新CSS，但該斷點無法正確顯示。
到目前為止，我正在制作多個響應式網站。
/* SMARTPHONES PORTRAIT */
@media only screen and (min-width: 300px) {
}
/* SMARTPHONES LANDSCAPE */
@media only screen and (min-width: 480px) {
}
/* TABLETS PORTRAIT */
@media only screen and (min-width: 768px) {
}
/* TABLET LANDSCAPE / DESKTOP */
@media only screen and (min-width: 1024px) {
}? ??
更新
截至2015年9月，我正在使用更好的產品。我發現這些媒體查詢斷點與更多設備和桌面屏幕分辨率匹配。
將所有用于桌面的CSS放在style.css上
響應.css上的所有媒體查詢：響應菜單的所有CSS +媒體斷點
@media only screen and (min-width: 320px) and (max-width: 479px){ ... }
@media only screen and (min-width: 480px) and (max-width: 767px){ ... }
@media only screen and (min-width: 768px) and (max-width: 991px){ ... }
@media only screen and (min-width: 992px){ ... }
- 3 回答
- 0 關注
- 1119 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消