Question

我在CSS中创建了一个包含媒体查询的页面，以便它应该响应设备的视口。

当我使用Firefox web开发工具进行响应式设计时，我可以看到我的网站如何反应。但是，当我调整浏览器大小时，我不能。

http://champlain.torqueweb.com/html/Responsive1.html

我应该为meta使用不同的值吗？

Answer 1

您在样式表中使用固定宽度。

F.i。

var createTable = function($chart) {

    console.log("$series = %o", $chart);

    // remove the existing table
    $('#here_table table').remove();

    // create a table object
    var table = $('<table></table>').addClass('chart-table');

    // iterate the series object, create rows and columnts
    $.each($chart.series.data, function( index, value ) {
        var row = $('<tr></tr>').addClass('chart-row');
        var col1 = $('<td></td>').text(value.name).appendTo(row);
        var col2 = $('<td></td>').text(value.percentage).appendTo(row);

        // mark the row of the clicked sector
        if ($chart.name == value.name)
            row.addClass('selected');

        table.append(row);
    });

    // insert the table into DOM
    $('#here_table').append(table);
};

这些固定宽度不会在媒体查询中重置（即@media ...）。

要么在媒体查询中进行修改，要么更好地使用％或em messurements，而不是绝对需要固定的宽度或高度。

F.i。

nav {
width:1024px; <<<< prevents responsiveness as the width will be fixed
height:40px;  
font-family: Arial;
margin: 0 0 10px 0;
list-style: none;
background-color: #000033;
}

Answer 2

max-device-width应为：

最大宽度

工作，我测试了它

Answer 3

第1点是你把页面集中在一起，我认为我们不应该把页面放在中心（我的意思是整个身体甚至是容器）来进行响应式页面设计......

如果您实际上没有定义width属性，那么浏览器会将其视为自动，因此页面将在浏览器窗口中传播。

也许这应该是有帮助的（不要评判我，我不是很有经验：O）

为什么我的网站没有响应浏览器窗口的大小？

3 个答案: