Question

我有一个必须对手机做出响应的网站。我用我的桌面创建了它。

当我调整浏览器窗口时，它工作正常，但当我在手机（微软640）上查看时，它似乎无法响应移动视图。

Answer 1

您可以添加元标记视口以进行响应，如下所示：

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

Answer 2

这将有助于您的网站成为您自己的移动视图。

CSS3中的媒体查询采用了这种想法并对其进行了扩展。他们不是寻找一种类型的设备，而是查看设备的功能，您可以使用它们来检查各种事物。

例如：

宽度和高度（浏览器窗口）
设备宽度和高度
方向 - 例如是横向或纵向模式的手机吗？
分辨率

使用媒体查询关联单独的样式表

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

使用媒体查询的第一种方法是将CSS的备用部分放在单个样式表中。所以要针对小型设备

我们可以使用以下语法：

@media only screen and (max-device-width: 480px) {

}

示例代码：

 @media only screen and (max-device-width: 480px) {
    div#wrapper {
        width: 400px;
    }

    div#header {
        background-image: url(media-queries-phone.jpg);
        height: 93px;
        position: relative;
    }

    div#header h1 {
        font-size: 140%;
    }

    #content {
        float: none;
        width: 100%;
    }

    #navigation {
        float:none;
        width: auto;
    }
}

有关更多参考资料：1 click me please，2 click me too

网页响应移动视图

2 个答案: