手机端(移动端)自适应样式 @media 的使用

  • 时间:2019-01-23 08:56 编辑: 来源: 阅读:204
  • 扫一扫,手机访问
摘要:通用手机端样式:@media all and (orientation : portrait) { /*竖屏*/ } @media all and (orientation : landscape) { /*横屏*/ }指定手机端高度样式:@media s

通用手机端样式:

@media all and (orientation : portrait) {
/*竖屏*/
}
@media all and (orientation : landscape) {
/*横屏*/
}

指定手机端高度样式:

@media screen and (max-width: 750px)
@media screen and (min-width: 720px) and (max-width: 960px) {//720 <= xxx < 960的设备}

根据不同的设备设定的样式:

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

注意下顺序,如果你把@media (min-width: 768px)写在了下面那么很悲剧,因为css文件是从上至下读取的,后面的css优先级会更高

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


  • 全部评论(0)
最新发布的资讯信息
【CMS学院|DEDECMS】DedeCms织梦动态获取会员总数(2019-03-18 09:10)
【建站教程|建站技巧】bootstrap在移动浏览器下响应式不起作用的解决方法(2019-03-18 09:08)
【CMS学院|WORDPRESS】WordPress文章页原创Meta声明标注(2019-03-15 09:17)
【CMS学院|WORDPRESS】WordPress更改JPEG图片的压缩质量的实现办法(2019-03-15 09:12)
【源码学院|服务器】宝塔面板优化服务器加快网站加载速度(2019-03-14 09:02)
【建站教程|辅助文档】ThinkPHP框架中使用Memcached缓存数据的方法(2019-03-13 08:32)
【CMS学院|DEDECMS】织梦DedeCMS模板中可以使用的公共函数(2019-03-07 08:39)
【CMS学院|DEDECMS】织梦channel标签currentstyle样式无效不起作用(2019-03-07 08:30)
【CMS学院|DEDECMS】织梦如何让封面频道作为最终列表栏目和分页(2019-03-01 08:24)
【CMS学院|DEDECMS】织梦开启错误信息提示方法方便织梦程序调试(2019-03-01 08:19)
底部广告
网站首页 | 关于我们 | 广告合作 | 联系我们 | 隐私条款 | 免责声明
CopyRight 2004-2017 淘源码网 | 苏ICP备12026353号-3