デスクトップビューのCSSボックスを無効にするが、モバイルビューで有効にする

Question

カスタマイズしたCSSを追加してデスクトップビューでフローティングボックスを無効にしたいが、モバイルビューで有効にする。 HERESにCSS：

.floating-box { 
position: fixed; 
bottom: 0px; 
left: 50%; 
.transform(translateX(-50%)); 
.clearfix(); 
background-color: #000; 
border-radius: @globalBorderRadius @globalBorderRadius 0px 0px; 
padding: 10px 10px 8px 10px; 
z-index: 9999; 
width: 1100px; 
} 

いただきましCSS私はそれを実現するために追加すべきか？

Answer 1

あなたはCSSメディアクエリを使用して、最大幅

@media screen and (max-width:768px) { 

    .floating-box { 

    } 
} 

Answer 2

使用CSSメディアクエリを設定することができます。幅が768px（標準のデスクトップの幅のサイズ）より大きい場合は、表示を非表示に設定し、表示をなしにします。モバイルビューやタブレットビューでは、通常の形式でCSSコードを記述します。

@media screen and (min-width: 768px) { 
    .floating-box { 
    visibility: hidden; 
    display: none; 
    /* your any other css styles */ 
    } 
}