• 本站域名:OceanCoder.cn 若您喜欢本站,请添加至收藏夹!
  • 网站少部分资源来源自网络,如有侵犯您的权益,请联系站长删除!
  • 本站所有文章,除特殊标明外,皆为本人原创,转载请注明出处,谢谢合作!
  • 本站所下载的资源,若无特殊说明,使用统一解压密码:oceancoder.cn
  • 本站已实现布局自适应,支持手机端、pad端访问,欢迎体验
  • 本站部分资源可通过微信公众号留言获取,欢迎体验

[CSS][基础]使用@media实现网页布局的自适应

HTML+CSS+JS OceanCoder 2017-07-18 1497 次浏览 0个评论

1、基本用法

首先在页面头部添加以下标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>


@media (min-width: 768px)

代表屏幕宽度 >= 768px时将应用其所对应的css样式

@media (max-width: 767px)

代表屏幕宽度 <= 767px时将应用其所对应的css样式

2、注意事项

@media (min-width: 768px){ //>=768的设备 }
@media (min-width: 1000px){ //>=1000的设备 }
@media (min-width: 1600){ //>=1600的设备 }

请注意排列顺序,min-width从小到大依次排列


@media (max-width: 1599){ //<=1599的设备 }
@media (max-width: 999px){ //<=999的设备 }
@media (max-width: 767px){ //<=767的设备 }

请注意排列顺序,max-width从大到小依次排列

已有 1497 位网友参与,快来吐槽:

发表评论