正确利用@media screen and制作响应式布局

Home / Article MrLee 2015-6-25 3371

开始研究响应式web设计,CSS3 Media Queries是入门。 Media Queries,其作用就是允许添加表达式用以确定媒体的环境情况,以此来应用不同的样式表。换句话说,其允许我们在不改变内容的情况下,改变页面的布局以精确适应不同的设备。 那么,Media Queries是如何工作的?
  • screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型
  • and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)
  • (min-width: 1366px) 就是媒体特性,其被放置在一对圆括号中。
举例说明:
[css]@media screen and (max-width:1366px){.right_link_box{float:left;width:100%}}[/css]
网上有些文章,没有讲解清楚甚至错了,只是简单说小于1366就执行括号里面的代码。很多朋友看到max-width不应该是大于吗?其实是这样的,max的意思是最大,max-width表示最大值为1366,也就是<=1366,不超过这个值!相反,如果是min-width表示最小值为1366,也就是>=1366都会执行。

本文链接:https://www.it72.com/3576.htm

推荐阅读
最新回复 (0)
返回