自适应问题!

http://img.mukewang.com/580eaf580001142407840587.jpgs

上图我没有加元信息 出现的效果 已经自适应

下图我加了元信息的自适应  为什么就不自适应了

580eaf4b0001527305000073.jpg



19990000
浏览 1437回答 3
3回答

水秋玄

那个只是缩小了,不是自适应。你用手机打开一个非自适应的企业网站,也会给你全部显示的,但是缩到很小。宽度写百分比的好像都是这样。固定用px的就不会。

水秋玄

我也是小白,但是我之前修改都是用这样的代码判断设备的大小,然后重新写样式@media (max-width: 600px){ .class{ width:100%; }}当页面宽度小于或等于600px,直接写入css。@media (min-width: 768px){ //>=768的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 1200){ //>=1200的设备 }注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,@media (min-width: 1200){ //>=1200的设备 }@media (min-width: 992px){ //>=992的设备 }@media (min-width: 768px){ //>=768的设备 }因为如果是1440,由于1440>768那么你的1200就会失效。所以我们用min-width时,小的放上面,大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面@media (max-width: 1199){ //<=1199的设备 }@media (max-width: 991px){ //<=991的设备 }@media (max-width: 767px){ //<=768的设备 }
打开App,查看更多内容
随时随地看视频慕课网APP