如何检查我的网站是否响应？答案

【问题标题】：How to check whether my website is responsive or not?如何检查我的网站是否响应？
【发布时间】：2014-05-15 06:38:58
【问题描述】：

我的任务是将已托管的网站转换为响应式网站。我在 CSS 方面的工作知识低于平均水平。

在那次探索中，我听说了媒体查询。我寻找解决方案，但我得到的是更多的困惑。媒体查询？我尝试了 responsinator.com 并在其中检查了我的网站。其实我不知道如何知道一个网站是否响应。

我的网站适合移动屏幕。页眉和页脚会自动调整。

有一个大滑块，它刚刚被裁剪，但仍然可以加载图像并且工作正常。如果我的网站是响应式的，为什么滑块会被裁剪？

要制作响应式 CSS，我是否必须对现有 CSS 中的值进行任何更改？还是我必须将我的样式（不做任何编辑）添加到下面给出的媒体查询中。

@media(max-width:480px){
/*PUT YOUR CLASSES STYLES HERE*/
}

【问题讨论】：

判断您的网站是否已经响应非常简单。如果您的 css 中已经存在媒体查询，则它是响应式的（或者至少具有响应式的潜力）。如果没有媒体查询，则您的网站没有响应。响应式设计是一种设计模式，您的网站会响应以适应显示它的任何屏幕尺寸。默认情况下，手机会缩小以适应其屏幕上的整个网页，这不是响应式的。

【解决方案1】：

您的媒体查询定义了要查看的 CSS 的哪一部分，将其视为 if 语句。

当它属于您的 css 文件中的媒体查询时，您的 css 已被定义为适应该屏幕尺寸，

仅仅因为缩小屏幕时会裁剪页面对象并不会使您的网站具有响应性，

最好带上您的手机或平板电脑并访问您的网站，如果用户界面简单、轻松且流畅，那么您不必担心，但如果您在手机上拥有一个桌面风格的网站，与您的数字键盘一样宽键盘，你有一些工作要做。

【讨论】：

【解决方案2】：

根据我的经验，将静态网站“转换”为响应式网站非常困难，尤其是在您没有良好的 CSS 知识的情况下。尝试找到具有固定宽度的元素，并通过尝试最大宽度和原始宽度值来使它们流动。希望这会有所帮助。

【讨论】：