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

九游会客户端- 2015年8月20日星期四

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

matcha-design-Becoming-Responsive-P1.jpg

许多网站所有者并没有寻找一个全新的设计, 而是在他们现有的网站上改进响应式设计. 幸运的是,与创建一个全新的站点相比,一个设计合理的站点的响应速度要快得多. 只要设计师明白将设计和内容分离的价值,并且不要在Adobe Flash中创建任何小部件, 我们可以通过媒体查询来弥补大部分剩余的差距.

媒体查询是一个CSS特性,旨在根据当前环境改变站点的样式表. 下面是一个基本的媒体查询:

@media (max-width: 960px) { ... }

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

让我们假设你要做出响应的网站有一个标准的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 (max-width: 1024px) {
div# maintext {
宽度:100%;
}
}

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

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

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

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

或者假设你想要一个在横向模式下使用平板电脑的人的特殊样式:

@media(仅限手持设备和方向:景观){ ... }

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

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

要了解更多九游会客户端app媒体查询可以做什么的信息,请查看 Mozilla开发人员指南 页面.

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

你的网站失去了谷歌排名被固定为桌面? 联系 今天的九游会客户端,我们可以帮助您的网站转变为一个未来的营销机器.

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