Question

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

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

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

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

Answer 1

它被称为响应式Web开发。第一步是将代码放在head标签部分的代码中。

对于响应式设计，请使用媒体查询：现在使用媒体查询，这是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>

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

1 个答案: