流动网格布局和媒体查询的默契配合

发布日期:2015-08-02 22:15:51
在本章的前面,我们的导航链接在特定的视口宽度下回折成两行。我们可以使用媒体查
询来修正这个问题。如果导航链接在 1060像素下散得太开而在 768像素下显示正常(我
们之前的媒体查询做好了处理) ,我们就给这个视口范围设置一下字体样式:
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
你看到了,我们根据视口宽度来改变文字大小,结果就是这组导航链接在 769 像素到无
穷大的视口中都会显示在一行。这是媒体查询和流动布局和谐共存的又一证据:媒体查
询约束流动布局的变动范围,而流动布局则简化了从一组媒体查询样式过渡到另一组的
改变过程。

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计