很多网站不能只在电脑端或手机端使用,但这就意味着要有两套布局,因为移动端的屏幕小,它的布局要和电脑端的不一样,可是再重新写一遍似乎又太麻烦,所以使用同一个页面根据屏幕大小改变布局就非常重要了.
这里根据宽度进行辨别是大屏设备还是小屏设备.
使用的方法很简单,就是用@media:
/*这里的定义是对其他设备*/
@media screen and (max-width:500px){
/*里面的定义对宽度是500像素以下的设备,如*/
body{
width:100%;
}
}
额外提示:
除了max-width,还可以使用min-width,也就是对大于min-width的设备生效.
有时下面的属性不生效,可以加上!important
以上是这篇文章的全部,错误的地方恳请指正.
QQ:8955859,希望能和大家一起学习.
最后,都看到这了,赞赏一下呗!(^ ~ ^||).
