我想知道是否有一种方法可以知道用户是否正在使用小型设备。如果用户使用的是小型设备或桌面,则希望更改导航菜单。我希望它类似于col-sm
答案 0 :(得分:2)
这是@media
查询在CSS中的用途。
@media screen and (max-width:479px) {
.navbar {
// style of .navbar when screen is less than 479px
}
}
@media screen and (min-width:480px) {
.navbar {
// style of .navbar when screen is 480px or larger
}
}
答案 1 :(得分:2)
您可以将CSS媒体查询用于自适应网站或不同大小的设备。您也可以根据移动方向使用CSS。
<style>
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
/* Your CSS Code for this device size */
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
/* Your CSS Code for this device size */
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
/* Your CSS Code for this device size */
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
/* Your CSS Code for this device size */
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
/* Your CSS Code for this device size */
}
/* According to Mobile Orientation */
@media only screen and (orientation: landscape) {
/* Your CSS Code for this device orientation */
}
</style>