积极响应，第一部分:媒体查询

日博体育app下载- 2015年8月20日星期四

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

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

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

@media (max-width: 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 (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或480像素), 通常是一个非常小的移动版本，适用于很小的iPhone屏幕(320px). 这些设计都采用了相同的页面元素，并重新安排它们，使其具有吸引力和功能性. 这确保了所有内容对所有用户都是可用的.

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

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

或者假设你想为使用横向模式的平板电脑的人提供特殊的样式:

@media(只有手持和方向:横向){ ... }

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

@媒体屏幕和(-webkit-min-device-pixel-ratio: 2), 仅屏幕和(最小分辨率:192dpi) { ... }

有关媒体查询功能的(更多)信息，请参阅 Mozilla开发人员指南 页面.

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

你的网站失去了谷歌排名被修复的桌面? 日博体育app下载 今天的日博体育app下载，我们可以帮助您的网站转变为一个未来的营销机器.

日博体育app下载
日博体育app下载是一家全方位服务的创意机构 网页设计, 打印, 身份, 品牌, 界面设计, 视频制作, 静止摄影 和 运动设计. 利用我们对卓越的热情，多元文化背景，和 获奖 实践, 我们始终如一地提供高品质的, 自定义, 创新的解决方案，以满足日博体育app多样化的市场需求. 欲了解更多信息，请访问 www.MatchaDesign.com.