变得有响应性,第1部分:媒体查询

新利在线娱乐网- 2015年8月20日星期四

2015年4月, 谷歌改变了他们的搜索排名算法,巧妙地降低了那些不适合移动设备的网站的排名. 这引起了网站所有者的连锁反应,他们需要他们的网站变得“敏感”,这个术语指的是根据视口的大小而动态变化的网站. 响应式网站在智能手机上和在宽屏显示器上一样好用, 没有切断大部分的内容或缩小网站到难以辨认.

matcha-design-Becoming-Responsive-P1.jpg

许多网站所有者并没有寻找一个全新的设计, 但是为了某种方式来改造一个响应式设计到他们目前的网站. 幸运的是,一个设计合理的网站比创建一个全新的网站要省力得多. 只要设计师理解设计和内容分离的价值,并且不在Adobe Flash中创造任何小部件, 我们可以通过媒体查询来填补大部分剩余的空白.

媒体查询是CSS的一个功能,可以根据当前环境改变网站的样式表. 以下是一个基本的媒体查询:

@media(最大宽度:960px) { ... }

在上面的例子中, 任何在花括号之间的CSS规则只有在浏览器的内部窗口宽度为960像素或更窄时才会生效.

让我们假设你正在制作的响应式网站有这样一个标准的CSS规则:

div# maintext {
宽度:1024 px;
}

假设整个站点包含在一个id为"maintext"的div中, that means the site is set in stone at 1024 pixels wide; no wider, 不窄. 如果浏览器窗口较小, 用户将不得不来回滚动窗口来阅读所有内容. 对手机用户来说不是很友好. 所以让我们添加一个媒体查询:

div# maintext {
宽度:1024 px;
}
@media(最大宽度:1024px) {
div# maintext {
宽度:100%;
}
}

当浏览器窗口宽度超过1024像素时,设计保持不变. 但是现在如果我们使用更窄的屏幕,内容的空间将完全适合浏览器的宽度. 在实践中,这使得空间看起来像是向内折叠的. This doesn't actually shrink the content itself; you'd need additional CSS rules for that. 但这是一个好的开始.

可以向同一个样式表添加多个媒体查询. 设计人员通常使用查询来设置断点, 因此,网页将顺利地从台式电脑转移到平板电脑,再到智能手机. 根据最流行的屏幕尺寸, 设计师可能会创建几种宽度:一个“随你喜欢的宽度”版本, 平板横向版(1024px), 平板垂直版(768px), 全移动版本(640或480像素), 通常是一个非常小的iPhone手机版本(320px). 这些设计都采用相同的页面元素,并重新排列它们,使其具有吸引力和功能. 这确保了所有内容对所有用户都可用.

媒体查询除了使网站响应迅速外还有许多用途. 例如, 如果您想为想打印页面的用户创建一个单独的样式表, 你可以包括你的打印友好的样式:

@media(只打印){ ... }

或者假设你想让一个人在横屏模式下使用平板电脑:

@媒体(只有手持和方向:景观){ ... }

或者只适用于使用Retina(高分辨率)设备的用户:

@media only screen 和 (-webkit-min-device-pixel-ratio: 2), 只有屏幕和(最小分辨率:192dpi) { ... }

有关媒体查询功能的更多信息,请查看 Mozilla开发人员指南 页面.

媒体查询是响应式网站设计者的一个重要工具, 但这只是第一步. 在下一期中,我们将深入研究移动导航.

你的网站是否因为桌面而失去了谷歌的排名? 新利在线娱乐网 新利在线娱乐网今天,我们可以帮助您的网站转变为一个未来的营销机器.

新利在线娱乐网
新利在线娱乐网是一家专注于全方位服务的创意机构 网页设计打印身份品牌界面设计视频制作静止摄影 和 运动设计. 用我们对卓越的热情,多元文化背景,和 获奖 实践, 我们一贯提供高品质的, 自定义, 创新的解决方案,以满足客户多样化的营销需求. 欲了解更多信息,请访问 www.MatchaDesign.com.