CSS根據屏幕分辨率

Question

應用CSS我有一個CSS類，如：

.container { 
    padding-left: 150px; 
} 

當屏幕分辨率爲平板電腦或手機我想是我想要的padding-left要像只10px。

我該怎麼做？

Answer 1

您可以使用CSS @media query來做到這一點。您提供breakpoints作爲它的參數，例如here。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

[..etc..] 

Answer 2

使用CSS Media Queries。僅供參考，我已將屏幕尺寸作爲Bootstrap的參考。

/* For Mobile Phones */ 
@media screen and (max-width: 767px) { 
    .container { 
    padding-left: 10px; 
    } 
} 

/* For Tablets (Portrait) */ 
@media screen and (min-width: 768px) and (max-width: 991px) { 
    .container { 
    padding-left: 10px; 
    } 
} 

希望這有助於！