@media screen and (max-width: 768px) { /*手机端CSS样式*/ } @media screen and (min-width: 769px) { /*电脑端CSS样式*/ }
大家可以通过CSS的@media规则,根据屏幕宽度来判断用户使用的是手机还是电脑。在这里,大家设定屏幕宽度小于等于768像素的设备为手机端,大于768像素的设备为电脑端。这里也可以根据实际需求来设定不同的宽度。
当设备宽度小于等于768像素的时候,@media screen and (max-width: 768px)规则就会生效,这时可以在其中设置手机端需要的CSS样式。同理,设备宽度大于768像素的时候,@media screen and (min-width: 769px)规则就会生效,这时可以在其中设置电脑端需要的CSS样式。
总之,CSS的@media规则可以帮助大家实现对不同屏幕宽度的适配,为响应式设计提供了更多的可能性。