响应式移动设计答案

【问题标题】：Responsive mobile design响应式移动设计
【发布时间】：2017-06-09 05:46:29
【问题描述】：

我开发了一个网站。桌面布局很好。但它没有响应。我尝试使用移动设备进行媒体查询，例如，

@media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}

我正在使用chrome开发工具并根据大小320 x 640在站点中进行更改。现在问题在模拟器中很好，但在实际移动中却没有。

帮助我找到解决方案。

【问题讨论】：

你试过twitter-bootstrap框架吗？它为您完成所有这些任务..
你有没有在html header部分添加这个？
不。我不了解引导程序。
是的..我添加了..@Sujith
如果你也不需要，我不会把身高问题过度复杂化。 @media(max-width: 500px){ /*styles here*/ } developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/… 另外，如果您正在执行媒体查询，请检查一下，放大和缩小之间的区别很高兴知道：sitepoint.com/introduction-mobile-first-media-queries，css-tricks.com/logic-in-media-queries

【解决方案1】：

您描述的症状表明您的页面头部可能没有视口元标记，因此请先仔细检查。

你想要的是类似的东西

<head>  
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...  
</head>

【讨论】：