CSS可以通过media queries来判断电脑尺寸并进行相应的样式控制。
@media screen and (max-width: 768px) { /* 在宽度小于等于768px时应用的样式 */ } @media screen and (min-width: 768px) and (max-width: 992px) { /* 在宽度在768px到992px之间时应用的样式 */ } @media screen and (min-width: 992px) and (max-width: 1200px) { /* 在宽度在992px到1200px之间时应用的样式 */ } @media screen and (min-width: 1200px) { /* 在宽度大于等于1200px时应用的样式 */ }
在上述代码中,使用@media指令来定义不同尺寸下的样式;使用screen来表示匹配屏幕样式,而max-width和min-width则用来设置最大和最小宽度。
根据上述代码,当浏览器宽度小于等于768px时,应用第一个@media定义的样式;宽度在768px到992px之间时应用第二个@media定义的样式,以此类推。
由此,我们就能够根据不同的电脑尺寸,来控制页面样式,达到更好的用户体验。