关于媒体查询
2016-06-24 17:19
134 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wang_man_/article/details/51754453
媒体查询是响应式布局最基本的方法,下面有一个简单地实例代码:
屏幕在最小为601px,最大为1000px之间时,标签元素figure的宽度为50%显示:
@media screnn and(min-width:601px) and (max-windth:1000px){figure{width:50%} }
屏幕在最大为600px时,标签元素figure的宽度为100%显示
@media screen and (max-width:600px){figure{width:100%}}
屏幕在最小为1000px时,标签元素figure的宽度为33.33%显示.让其多排列几个
@media screen and (min-width:1001px){figure{width:33.33%}}
相关文章推荐
- 关于CSS媒体查询--电脑尺寸大全
- 关于css媒体查询无错误但是不加载问题
- 关于“媒体查询”
- 关于IE8以及以下版本不支持媒体查询的解决方案
- h关于媒体查询基本使用方法
- 关于媒体查询
- OA项目中关于数据表递归查询
- 关于业务逻辑接口查询参数封装
- FIND函数的用法。关于字串查询一个DEMO
- 关于驱动与编译器版本的查询命令
- Mysql 关于日期的查询 查询某年某月末日 或单年单月单日
- 关于使用@NameNativeQuery和@SqlResultSetMapping自定义复杂查询
- 关于在DWZ使用ssh后台查询的几种方式
- 关于修改工具栏查询功能
- 看到一篇关于搜索引擎查询机制的文章,比较感兴趣,收藏……
- 关于sqlserver字符类型查询条件区分大小写
- 关于mysql处理百万级以上的数据时如何提高其查询速度的方法
- 关于查询动态时间的MDX语句
- 关于 CxDateedit中可以输入乱码,导致根据日期查询出错的解决方法
- 媒体查询-手机尺寸参考