如何使用viewport meta标记缩放固定宽度的布局以适应不同的屏幕宽度

Question

我在一个固定宽度的传统网站上工作，希望通过实现几个自适应布局来为平板电脑用户创造更优化的体验。第一个布局将是600px宽的设计，它将显示在屏幕宽度为600px - 768px的设备上。第二个自适应布局将是769px宽的设计，它将显示在屏幕宽度为769 - 1023的设备上。

我想知道如何使用viewport meta标签来扩展设计，以适应宽度比原始设计更大的移动浏览器。

例如，当在浏览器屏幕宽度为768px的设备上查看600px的设计时，如何才能使较小的设计占据整个屏幕的宽度？

我已经找到了很多关于具有流动网格的网站的自适应布局的信息，但没有专门讨论固定宽度网站的设计宽度和视口大小之间的关系-至少我不能理解。

Answer 1

它被称为响应式web开发。第一步是在你的代码中把下面的标签放在头标签里。

对于响应式设计，使用媒体查询:现在使用媒体查询，这里是media queries的一个很好的例子。还要学习如何使用它。下面是一小段代码，它将指导你如何使用：

        <style>
        .clear{ clear:both;}
        /*this will work for desktop*/
        @media only screen and (min-width: 801px){
        #container {
            position:relative;
            width:80%;
            margin: 0 auto; 
        }
      /*this will work for tablet*/
    @media only screen and (max-width: 800px) and (min-width: 521px) 
    {
    #container {
        position:relative;
        width:80%;
        margin: 0 auto; 
    }
        /*this will work for mobile*/
        @media only screen and (max-width: 520px) and (min-width: 320px) 
        {
        #container {
            position:relative;
            width:80%;
            margin: 0 auto; 
        }

 </style>