[英]How to use media query for max-width: 767px using Bootstrap 4 mobile first
我正在使用Bootstrap 4將我從頭創建的網站轉換為可響應的網站。在我意識到Bootstrap 4首先是移動設備,我的網站首先是桌面開發之前,我開始了轉換。 不用回頭再做整個站點,我想我可以使用此媒體查詢添加一些更改:
@media only screen and (max-width: 767px) {
/***HOMEPAGE - HEADER***/
#header {
height: 45vh;
background-attachment: inherit;
}
}
所做的更改未顯示在網站上,但是當我檢查元素並單擊源時,我可以看到代碼。 我的其他查詢工作正常,看起來像這樣:
@media (min-width: 768px) and (max-width: 991px) {
/***BODY ***/
html,
body,
a,
blockquote {
font-size: 18px;
}
/***MAIN & MOBILE NAV***/
.main-nav {
display: none;
}
#nav-icon3 {
display: block;
}
}
我嘗試添加此元標記:
<meta name="viewport" content="width=device-width, initial-scale=1,
maximum-scale=1">
這使得所有內容在767px以下都顯得混亂不堪。
當屏幕小於767px時,我只需要進行一些小調整,並且我不想從移動設備重新構建網站,也不想在此時轉換為Bootstrap 3。 請幫忙!
如果您使用的是Safari瀏覽器,請使用視口作為<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Safari文檔
和另一個參考, 為什么縮小到適合=否
根據Bootstrap 4文檔,響應斷點是
// Extra small devices (portrait phones, less than 576px)
// No media query since this is the default in Bootstrap
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
其他方向
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, less than 768px)
@media (max-width: 767px) { ... }
// Medium devices (tablets, less than 992px)
@media (max-width: 991px) { ... }
// Large devices (desktops, less than 1200px)
@media (max-width: 1199px) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
最小和最大斷點寬度
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.