网页自适应css书写时常用的方法@media总结

作者 : runsly 本文共506个字,预计阅读时间需要2分钟 发布时间: 2020-07-25 共121人阅读

网页自适应是工作中常遇到的问题,css书写时最常用的方法要属于@media 了,下边笔者总结下长容易出问题的地方:

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

 

实用干货原创整理,转载请注明九九主题出处!本站所有资源均可以下载,qq一键登录购买SVIP更实惠,免注册扫码支付更方便。
九九主题 » 网页自适应css书写时常用的方法@media总结

常见问题FAQ

如何购买源码?
无需注册扫码付款即可下载。或者qq一键登录后签到领1圆钱后下载。
买你们的模板包安装吗?
500以上的模板包安装。另外,模板的安装费因模板的大小、复杂程度不同而不同,安装费:50~300。
你们提供网页修改服务吗?
专业建站15年,网页修改服务依据修改内容收费,详情咨询客服QQ9502669。

发表评论