1

我正在开发一个固定宽度的旧站点，并希望通过实现几个自适应布局来为平板电脑用户创造更佳的体验。第一个布局将是 600 像素宽的设计，它将显示在屏幕宽度为 600 像素 - 768 像素的设备上。第二个自适应布局将是一个 769 像素宽的设计，它将显示在屏幕宽度为 769 - 1023 的设备上。

我想知道如何使用视口元标记使设计放大以适应宽度大于原始设计的移动浏览器。

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

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

4

1 回答 1

0

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

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

        <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>
于 2013-07-22T10:46:56.083 回答