Question

我是新手，并不是很明白为什么会发生这种情况以及如何解决这个问题。

我正在使用@media查询构建我的网站，以实现移动设备友好。当我从移动设备访问该网站时，我会看到我应该使用的适合移动设备的版本，但是当我尝试切换桌面视图时，移动设备友好版本仍然存在且桌面（正常）未显示。

使用我的* .css文件，我做了如下：

my styles for global(normal - desktop) view
...
...
...
@media (max-width:500px){
my styles for mobile-friendly view
}

我不想将@media用于我的桌面视图，因为并非所有浏览器都支持@media，以防有人认为它可以解决此问题。

希望得到你的帮助

Answer 1

始终确保在<meta>元素中包含以下<head> </head>标记：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

viewport 标记用于以特定样式为您的网站提供服务，无论设备如何。 width属性控制视口（虚拟“窗口”）的大小，可以设置为特定的像素大小或设备的宽度。加载页面时，initial-scale属性控制缩放级别。 maximum-scale，minimum-scale和user-scalable都可以控制用户如何缩小页面。

我个人已禁用用户可扩展性以保持一致的页面视图，例如当用户专注于选择元素时，它确保页面不会缩放。如果这可以解决您的问题，请告诉我，否则我需要一些CSS示例来解决您的问题！干杯〜

Answer 2

唯一不支持媒体查询的浏览器是IE 5到8. IE 9+支持它。我的网站浏览量不到1％来自Internet Explorer浏览器，因此在我看来，我不会为IE牺牲一个好的设计。我建议首先对手机进行编码，然后再实施尺寸规格。

在页面的head部分实现视口是必须的。 <meta name="viewport" content="width=device-width, initial-scale=1">

我不会使用max-width:500px，因为这是一个随机的最大宽度...坚持正确的，你的CSS看起来像这样：

*-- SINCE WE ARE CODING MOBILE-FIRST, WE DO NOT NEED A MEDIA QUERY FOR IT --*/

Enter all base code here

/*-- TABLET --*/
@media(min-width: 641px) {
    ...
} 
/*-- SMALL DESKTOP --*/
@media(min-width: 768px) {
    ...
} 
/*-- DESKTOP --*/
@media(min-width: 992px) {
    ...
} 
/*-- BIG DESKTOP (rarely used, but can be useful) --*/
@media(min-width: 1280px) {
    ...
}

编码移动优先CSS将简化您的代码并创建一个坚实的样式基础。将您的习惯转换为移动优先编码对您和可能最终需要使用您的布局的设计师来说将是一个加分。这应被视为帮助创建防弹响应设计的有效方法。

响应式设计不会从移动设备缩小[@media queries]

2 个答案: