Question

我知道这是一个基本问题，但我很难让我的网站做出响应。

这是我在Photoshop中完成的基本页面。我已经尝试了很多东西，以便在没有运气的情况下做出响应。

这是我的HTML代码：

<html>
<head>
<title>newbeebosite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01" width="1601" height="1401" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img src="images/Home_01.jpg" width="1600" height="21" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">
            <img src="images/Home_02.jpg" width="1216" height="46" alt=""></td>
        <td>
            <img src="images/Home_03.jpg" width="192" height="45" alt=""></td>
        <td>
            <img src="images/Home_04.jpg" width="192" height="45" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/Home_05.jpg" width="384" height="88" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/Home_06.jpg" width="78" height="87" alt=""></td>
        <td>
            <img src="images/Home_07.jpg" width="251" height="87" alt=""></td>
        <td colspan="3">
            <img src="images/Home_08.jpg" width="887" height="87" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="87" alt=""></td>
    </tr>
    <tr>
        <td colspan="3">
            <img src="images/Home_09.jpg" width="971" height="160" alt=""></td>
        <td>
            <img src="images/Home_10.jpg" width="1" height="160" alt=""></td>
        <td colspan="2">
            <img src="images/Home_11.jpg" width="436" height="160" alt=""></td>
        <td>
            <img src="images/Home_12.jpg" width="192" height="160" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="160" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/Home_13.jpg" width="1600" height="1086" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1086" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="78" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="251" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="642" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="244" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="192" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="192" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>

Answer 1

作为首发，我想补充一下：

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

在你的html文档的头部。

解释

这告诉浏览器CSS引擎“使用设备的屏幕宽度（以”设备无关像素“测量）作为HTML元素的基础” - 因此所有“流畅风格”的后代（子）元素都会受到影响因为它们的高度和宽度属性基于其父元素大小。

width=device-width指示页面与设备无关像素中的屏幕宽度相匹配。（而不是说明确设置页面宽度的width=1024。）

现在，当浏览器宽度发生变化时，您的CSS规则将被挂钩到这些变化中我相信initial-scale=1在CSS像素和设备无关的像素之间建立了1：1的关系（如果这没有意义，请不要担心 - 但我会包括它）。

然后，您需要通过删除固定宽度定义并替换为父容器更改大小时更改的宽度定义来使表响应。

这里有一个很好的解释 - https://developers.google.com/speed/docs/insights/ConfigureViewport

e.g。像这样：

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (newbeebosite.psd) -->
<table id="Table_01"  border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
        <td>
            <img src="http://lorempixel.com/400/200/" width="80%" height="21" alt=""></td>
    </tr>
    <tr>
        <td colspan="5" rowspan="2">
            <img src="http://lorempixel.com/400/200/" width="80%" height="46" alt=""></td>
        <td>
            <img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
        <td>
            <img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
        <td>
            <img src="http://lorempixel.com/400/200/" width="80%" height="45" alt=""></td>
    </tr>

</table>
<!-- End Save for Web Slices -->
</body>

这是一个有效的演示 - http://jsbin.com/dilejobofu/1/edit?html,output

响应式网页 - 启动页面

1 个答案:

解释