注意到移动设备的使用不断增加，自 2015 年 XNUMX 月底以来，Google 对页面不支持移动设备的网站进行了处罚。 结果，为了你 搜索引擎优化，您需要确保您的网站在大屏幕和小屏幕上都能正常显示。
在本文中，我将向您展示如何使用规则将网站放置到页面上 @media 的CSS3。
重要的是要注意，尽管它们的真实含义有所不同，但术语“响应式”和“与移动设备兼容”经常互换使用。 了解每种手段的意义对于确保您的网站符合容纳所有屏幕尺寸的必要条件很重要。
但是之前，如果您从未安装过WordPress发现 如何安装WordPress博客7步骤 et 如何找到，安装和你的博客激活WordPress主题
然后，让我们回到为什么我们在这里。
响应和移动兼容
不是的网站 既不响应也不兼容移动，在所有屏幕上均以相同的方式显示，即大屏幕的版本随处可见。 在较小的屏幕上，您必须水平滚动页面才能查看其所有内容。 它们很难在这些屏幕上导航。
还发现这些 8 WordPress插件可自定义您网站的外观
一个网站是 手机兼容 当它仅达到在移动设备上看到的严格最低要求时，就不会使其成为响应式网站。 例如，如果您不必水平浏览网站，则可以认为该网站与移动设备兼容。 这导致其元素变小且难以区分。 然后，您必须放大以阅读其内容。
网站方面 响应 完全适合不同的屏幕尺寸。 他们重新定义了元素，以便可以在较小的屏幕上轻松查看和使用它们。 这是您要为网站设计的类型。
另见我们的 10 WordPress插件可在您的网站上创建预订表格
您现在知道了响应式移动电话和兼容移动电话之间的区别。 现在我们将看到规则 @media CSS3 允许您更新您的网站以进行响应式或轻松创建 WordPress主题 带有响应式内容。
规则 @media CSS3的
为了使主题具有响应性，您需要规则 @media CSS3。 基本上，它使您可以定义要用于特定屏幕类型（尺寸）的样式。 您将像其他CSS规则（带有大括号）一样使用它，唯一的区别是它与其他CSS规则重叠。
@media媒体类型（表达式）{css-test-selector {property1：value1; property2：value2; }}
在此结构中，规则内的元素 @媒体 只有工作的时候了 一种媒体的， 指定已成功检测到。 选择的介质类型，可以根据尺寸指定特征。
发现 规则 @media 为您检测访问您网站的屏幕类型，并选择最适合此类屏幕的规则。 所有主要的浏览器都已经集成了规则 @media.
以下是供您参考的列表： 铬 , Safari, 火狐, IE, Opera et 边缘.
定义目标画面
如果你想修改一个 WordPress主题 现有的，请备份后者的 CSS，以便在必要时能够返回。
另请阅读我们的文章 如何逐步加载Facebook和Disqus评论
正如我们在其结构中所看到的，要定义屏幕的类型，您必须 @media 定位的屏幕类型。 这是不同类型的屏幕的列表：
– 所有 ：适用于所有类型的屏幕或在中指定的尺寸 表达
– 屏幕 ：适用于所有屏幕，无论是手机，平板电脑，笔记本电脑还是台式机
– 打印 ：对于打印机，如果您想要可以打印的页面的特定样式
– 言语 ：对于屏幕阅读器，如果您要为视障人士提供样式。
您还可以在屏幕类型之前添加运算符。 如 不能 显示与指定类型不同的屏幕的样式，或者 仅由 仅将样式应用于指定的屏幕。 因此，您可以：
@media只有屏幕
定义屏幕尺寸的样式
您可以使用 表达 提供有关屏幕特征的详细信息。 后 @media 进入 和 然后是表达式。 如果使用多个表达式，则应将所有表达式用 和。 这是结构示例：
@media only屏幕和（最大宽度：640像素）{selector-css-example {/ *您在此处使用的常规CSS * /}}
在此示例中，我使用 最大宽度 与值 640px。 这是为了设置iPhone或小型Android智能手机的最大屏幕宽度。 通过这种结构，您可以控制网站在不同设备上的外观。 这是您可以在其中使用的与尺寸相关的属性的列表 表达 :
发现我们的 8 SEO WordPress插件优化您的网站的SEO
– m在宽度 et 最大宽度 ：分别显示规则中包含的样式所需的最小和最大宽度 @media。 不会再显示一个像素和样式。
– m在高 et 最大高度 ：分别显示规则中包含的样式所需的最小和最大高度 @media。 由于大多数屏幕都设计为垂直展开页面，因此属性 最小高度 et 最大高度 很少使用。
这是一些终端的屏幕尺寸的列表：
– iPhone：640px
-iPad：1024像素
-平板电脑：1366px
-Android智能手机：640像素，720像素，854像素，960像素
-Android超大：1024px，1066px
-Windows Phone：480
-Windows Phone大型：768px
-年轻人和老人：320px
-超级本/笔记本电脑：1366像素
-台式机和电视：1920像素
您可以使用许多其他属性 表达。 例如，如果您要针对能够显示16：9长宽比图像的台式机或电视屏幕，则可以使用以下结构：
@media only屏幕和（最小宽度：1920px）和（device-aspect-ratio：16/9）{selector-css-example {/ *您在此处使用的常规CSS * /}}
有关更完整的列表和示例，请参阅 w3schools et Mozilla的Developpers.
测试网站的响应功能
当您修改或构建您的 WordPress主题 或者最后如果您喜欢惊喜，您必须测试结果以查看它是否最终响应。 请记住，Google 会监视没有响应的网站。
另见这些 10 WordPress插件可在您的博客上创建标签
未能拥有您要定位的所有移动设备，但有很多工具（幸运的是，对于我们的证券交易所而言），可以查看您的网站如何适应不同的屏幕。
直接插入计算机的浏览器可以使用 窗口调整器的Chrome浏览器扩展, ResponsiveResize, ResizeMe ou Firesizer。 下面是Firefox默认随附的“响应式设计”视图中的BlogPasCher图像。
也有专门用于此任务的网站：
该网站的特点是让您自己选择屏幕尺寸。 请注意，该网站将您的网站加载到框架中。 所以如果你的 WordPress主题 被设计为不在框架中显示，因此很可能不会在此处显示。
iPad的皮克
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
该网站对于在最新的Apple，iPad和iPhone设备上测试您的网站很有用。 只需输入您的URL。 请注意，它与responsepx受相同的帧问题。
在此网站上，您可以在小屏幕和在屏幕右侧选择的旧型号手机上进行测试。 您还可以配置一些屏幕属性。
如果不是最重要的话，这是最重要的测试之一。 只需在栏中输入您的地址，然后单击 分析 开始测试。 测试后，该工具将显示报告和分数。 如果测试为阳性，那就更好了，您将不会受到Google的惩罚。
如果您不是开发人员，我建议您 响应式WordPress主题列表 启动。
推荐资源
还要发现其他推荐资源，这些资源将帮助您更好地吸引合作伙伴和订户，同时也可以提高网站的安全性。
结论
这里 ！ 您知道如何使用规则使您的网站或WordPress主题具有响应性的所有知识 @media 的CSS3。 如果我们错过了您喜欢或喜欢的WordPress主题，请在本节中保留链接 评论 下方。
但是，您也可以咨询我们的 RESSOURCES，如果您需要更多的元素来执行创建Internet网站的项目，请参考我们关于 WordPress博客创建 或者那个 Divi：有史以来最好的WordPress主题.
我们还邀请您参加 在您不同的社交网络上分享.
...
