很多網(wǎng)站不能只在電腦端或手機端使用,但這就意味著要有兩套布局,因為移動端的屏幕小,它的布局要和電腦端的不一樣,可是再重新寫一遍似乎又太麻煩,所以使用同一個頁面根據(jù)屏幕大小改變布局就非常重要了.
這里根據(jù)寬度進行辨別是大屏設備還是小屏設備.
使用的方法很簡單,就是用@media:
/*這里的定義是對其他設備*/
@media screen and (max-width:500px){
/*里面的定義對寬度是500像素以下的設備,如*/
body{
width:100%;
}
}
額外提示:
除了max-width,還可以使用min-width,也就是對大于min-width的設備生效.
有時下面的屬性不生效,可以加上!important
以上是這篇文章的全部,錯誤的地方懇請指正.
QQ:8955859,希望能和大家一起學習.
最后,都看到這了,贊賞一下唄!(^ ~ ^||).