自适应问题！

Question

s上图我没有加元信息 出现的效果 已经自适应下图我加了元信息的自适应  为什么就不自适应了

Answer 1

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

Answer 2

我也是小白，但是我之前修改都是用这样的代码判断设备的大小，然后重新写样式

@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的设备 }