将最小宽度设置为容器的正确方法



我网站的设计是为最小分辨率1200px(根据引导程序而言的大型设备台式机)而设计的。我希望具有较低分辨率屏幕的人具有水平滚动。

我有以下模板:

<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            //...menu
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8">
                <div id="table-trips-list">
                    //...grid content
                </div>
            </div>
            <div class="col-lg-4">
                <div id="search-drivers">
                    //...filters
                </div>
            </div>
        </div>
    </div>
</body>

正确的方法是什么?

定义包含块百分比的最小宽度。

或使用px表示

 .container{
 min-width:1200px;         
 width: auto !important;   /* Firefox will set width as auto */
 width:1200px;             /* As IE ignores !important it will set width as 1000px; */
}

或查看此堆栈溢出链接。这可能会有所帮助。

window的所有尺寸的stackoverflow

我在我的网站上使用过这样的

   @media screen and (max-width:320px) { */Your styles*/}
   @media screen and (min-width:321px) and (max-width:639px) {}
   @media screen and (min-width:640px) and (max-width:959px) {}
   @media screen and (min-width:960px) and (max-width:1279px) {}
   @media screen and (min-width:1280px) and (max-width:1599px) {}
   @media screen and (min-width:1600px) {}
   @media screen and (min-width:1920px) {}

最新更新