Bootstrap 3在移动设备和计算机上应用不同的CSS

我使用的是引导程序3，有div元素和classouter，并且想要在移动设备和计算机上应用不同的CSS。Bootstrap 3在移动设备和计算机上应用不同的CSS

例如，这是我的CSS代码：

/* for computer */ 
div.outer { 
    height: calc(100vh - 80px); 
    padding: 0; 
    margin: 0; 
    min-height: 500px 
} 


/* for mobile */ 
div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
}

如何实现呢？感谢您的任何建议。

来源

2016-04-29 Bangyou

你不想使用媒体查询？ – mmativ

感谢您为我工作的所有答案。抱歉，我无法接受所有答案，但只能选择第一个答案。 – Bangyou

Use media query for mobile devices. below is template, dont forgot to add mobile meta tag. 
@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 570px) 
    and (-webkit-min-device-pixel-ratio: 2) { 
    //your css for mobile is here 
}

来源

2016-04-29 02:38:43

对于手机，您可以在'@media'查询中定义设备的宽度。

767px是移动设备和平板电脑屏幕的标准宽度。所以，你可以使用这样

@media all and (max-width:768px){ 
    // your css for mobile 
}

这个CSS将仅适用于当您装置的宽度将是768px以下

来源

2016-04-29 02:32:39

我会建议使用媒体查询为这一个。要在手机中更改div.outer类，请使用下面的代码。

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) { 
    div.outer { 
    position: fixed; 
    top: 50px; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    padding: 0; 
} 
}

更多媒体查询here

来源

2016-04-29 02:33:29 claudios

Bootstrap 3在移动设备和计算机上应用不同的CSS

回答

相关问题