EU Data

在开发自适应设计时，他们通常会采用以下媒体功能：
表示如果浏览器窗口宽度与指定的宽度相比缩小，则满足条件并应用相应的样式（例如，max-width: 768 px 应理解为：如果浏览器窗口宽度小于 768 像素，则需要诉诸媒体查询中指定的样式）。

— 表示如果浏览器窗口宽度大于指定的宽度，则满足条件并应用请求中指定的样式（例如：min-width: 480 px）。

此外，还可以使用其他功能：颜色、设备宽度、网格、高度、方向：横向、方向：纵向、分辨率等。

媒体函数中使用的值有另一个名字——断点。网站设计就是在这些方面发生变化的：

320 像素- 移动版；

480 像素- 移动版；

768 px — 平板电脑；

1024 像素- 平板电脑和上网本；

1280像素及以上 - 个人电脑。

断点不必严格地与特定的显示分辨率绑定，因为它 马其顿电话号码列表 们可以通过其他参数的值来创建，在这些参数中，布局在视觉上会中断、显示有错误或其正确显示完全停止。


and – 逻辑与，用于需要组合多个条件的情况（例如：

not – 逻辑非，用于否定条件（

only – 用于不支持媒体查询的旧版浏览器（例如：。

媒体查询写在样式文件的最末尾，位于所有主要 CSS 样式之后。

想要看看你的网络资源在不同设备上的显示效果吗？有一个便捷的服务 或者您可以直接从浏览器中执行此操作：打开您的网站，右键单击>“查看代码”，找到允许您更改屏幕尺寸的工具。在 Google Chrome 和 Yandex 浏览器中，它将位于顶部中心。


不同设备上的 Web 资源

资料来源：shutterstock.com

自适应网站设计的典型错误
错误＃1：缩短内容
不要强迫您的网站访问者切换到完整版本，因为桌面上可见的所有内容也应该显示在移动设备上。你不会因为你的手无法放进相机镜头的框架而砍掉你的手，对吧？对于网站来说也是如此：你不能仅仅因为某些部分不适合显示屏而向用户隐藏它。

制定一条规则：一个站点 - 一个功能 - 一个内容，无论我们谈论的是什么设备。

使用智能手机访问的访客不必为以下问题而苦恼：该网站呈现的是移动版本还是自适应设计，或者他是否获得与从台式计算机打开页面的访客相同数量的信息。