css 响应断点

Posted 2021-05-13

@media only screen and (max-width: 1280px) {
 .class-goes-here {
   text-align: left;
   width: 100%;
   font-weight:24px;
 } 
}

@media only screen and (max-width: 1080px) {
 .class-goes-here {
   text-align: left;
   width: 90%;
   font-weight:20px;
 } 
}

@media only screen and (max-width: 768px) {
 .class-goes-here {
   text-align: left;
   width: 60%;
   font-weight:18px;
 } 
}

@media only screen and (max-width: 480px) {
 .class-goes-here {
   text-align: left;
   width: 40%;
   font-weight:12px;
 } 
}