Html 扩展网站以适应移动屏幕_Html_Css_Twitter Bootstrap_Mobile

Html 扩展网站以适应移动屏幕

html css twitter-bootstrap mobile

Html 扩展网站以适应移动屏幕,html,css,twitter-bootstrap,mobile,Html,Css,Twitter Bootstrap,Mobile,所以我在一个小网站上工作，作为一个暑期项目，只是为了更好地进行网页设计和编程。到目前为止，从设计角度来看，一切都进行得很顺利，但我在将其安装到移动设备上时遇到了很多麻烦——它每次都会显示完整的站点。我已经将.container更改为fluid，将tables更改为responsive，但它仍然不适合移动页面。我正在使用Bootstrap、jQuery和一些Angular来运行该站点我做错了什么？我看了其他问题，但每个问题似乎有一个稍微不同的问题。提前谢谢 <head> <me

所以我在一个小网站上工作，作为一个暑期项目，只是为了更好地进行网页设计和编程。到目前为止，从设计角度来看，一切都进行得很顺利，但我在将其安装到移动设备上时遇到了很多麻烦——它每次都会显示完整的站点。我已经将.container更改为fluid，将tables更改为responsive，但它仍然不适合移动页面。我正在使用Bootstrap、jQuery和一些Angular来运行该站点

我做错了什么？我看了其他问题，但每个问题似乎有一个稍微不同的问题。提前谢谢

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, user-scalable=yes">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular-animate.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<script src="liftscript.js"></script>
<script src="dropdown.js"></script>



<style>

body { 
    background-color: #516774;
}

    .container-fluid{
        width: 800px;
        margin: 0 auto;
        padding-top: 2cm;

    }

.large-background {
        background: url('big_background2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    }

    .nav_heading {
        background: #ededed;
        color: #222;
        margin: 0px;
        text-align: center;
        padding: 10px;
        margin-bottom: 20px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        display: none;

    }

    .below_heading {
        display: none;
    }

    ul.tabs{
        margin: 0px;
        padding: 0px;
        list-style: none;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background: #ededed;

    }

    ul.tabs li:hover {
        background-color: yellow;
    }


    ul.tabs li{
        background: none;
        color: #222;
        display: inline-block;
        padding: 10px 15px;
        cursor: pointer;

    }

    ul.tabs li.active{
        background: rgba(255,255,255,0.90);
        color: #222;
    }

    .tab-content{
        display: none;
        background: #ededed;
        padding: 5px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        margin-bottom:70px;
    }

    .tab-content.active{
        display: inherit;
    }

    .info {
    display: none;
    background: #ededed;
    padding: 15px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);

}

    #button-float {
    float: right;
}

    .float {
    float: right;
}
    #inside_nav_heading {
    display: none;
    background: #ededed;
    color: #222;
    margin: 0px;
    text-align: center;
    margin-bottom: 20px;
    padding-top: 5px;

}

    .footer {
    position: fixed;
    bottom: 0;
    padding-top: 10px;
    width: 100%;
    height: 40px;
    background-color: rgb(51, 51, 51);
    color: white;
}

.ig-b- { 

    display: inline-block; 
}
.ig-b- img { 
    visibility: hidden; 

}
.ig-b-:hover { 
    background-position: 0 -60px; 
} 

.ig-b-:active { 

    background-position: 0 -120px; 

}
.ig-b-24 { 

    width: 24px; height: 24px; background: url(http://badges.instagram.com/static/images/ig-badge-sprite-24.png) no-repeat 0 0; 
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {

.ig-b-24 { 
    background-image: url(http://badges.instagram.com/static/images/ig-badge-sprite-24@2x.png); background-size: 60px 178px; 
}


正文{
背景色：#516774；
}
.容器液体{
宽度：800px；
保证金：0自动；
垫面：2cm；
}
.大背景{
背景：url（'big_background2.jpg'）无重复中心固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
.nav_航向{
背景：#ededed；
颜色：#222；
边际：0px；
文本对齐：居中；
填充：10px；
边缘底部：20px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
显示：无；
}
.在标题下{
显示：无；
}
ul标签{
边际：0px；
填充：0px；
列表样式：无；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
背景：#ededed；
}
李：悬停{
背景颜色：黄色；
}
李先生{
背景：无；
颜色：#222；
显示：内联块；
填充：10px 15px；
光标：指针；
}
ul.tabs li.active{
背景：rgba（255255,0.90）；
颜色：#222；
}
.选项卡内容{
显示：无；
背景：#ededed；
填充物：5px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
边缘底部：70像素；
}
.tab-content.active{
显示：继承；
}
.info{
显示：无；
背景：#ededed；
填充：15px；
盒影：-1px 1px 1px rgba（0,0,0,0.15）；
}
#按钮浮动{
浮动：对；
}
.浮动{
浮动：对；
}
#内航向{
显示：无；
背景：#ededed；
颜色：#222；
边际：0px；
文本对齐：居中；
边缘底部：20px；
垫面：5px；
}
.页脚{
位置：固定；
底部：0；
填充顶部：10px；
宽度：100%；
高度：40px；
背景色：rgb（51,51,51）；
颜色：白色；
}
.ig-b-{
显示：内联块；
}
.ig-b-img{
可见性：隐藏；
}
.ig-b-：悬停{
背景位置：0-60px；
} 
.ig-b-：活动{
背景位置：0-120px；
}
.ig-b-24{
宽度：24px；高度：24px；背景：url(http://badges.instagram.com/static/images/ig-badge-sprite-24.png)不重复0；
}
@仅媒体屏幕和（-webkit最小设备像素比：2）、仅屏幕和（最小——moz设备像素比：2）、仅屏幕和（-o-min-device-pixel比：2/1）、仅屏幕和（最小设备像素比：2）、仅屏幕和（最小分辨率：192dpi）、仅屏幕和（最小分辨率：2dppx）{
.ig-b-24{
背景图片：url(http://badges.instagram.com/static/images/ig-badge-sprite-24@2x.png）；背景尺寸：60px 178px；
}

如果将.container设置为固定宽度，它将无法适应

更改此项：

.container-fluid{
    width: 800px;
    margin: 0 auto;
    padding-top: 2cm;

}

为此：

.container-fluid{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 2cm;
}

它将适应屏幕，直到达到800px，然后它将不会扩展更多。

如果将.container设置为固定宽度，它将不会适应

更改此项：

.container-fluid{
    width: 800px;
    margin: 0 auto;
    padding-top: 2cm;

}

为此：

.container-fluid{
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding-top: 2cm;
}

它将适应屏幕，直到达到800px，然后它就不会扩展得更多。

我可以看到，您正在使用twitter引导框架进行前端设计，这使它变得非常简单

只需尝试使用引导列，它是为设备响应设计而设计的

在Bootstrap网站上学习此部分（）

如果您实现了它，您的网站将在所有设备上都能响应。

我可以看到您正在使用twitter引导框架进行前端设计，这使它变得非常简单

只需尝试使用引导列，它是为设备响应设计而设计的

在Bootstrap网站上学习此部分（）

如果您实施它，您的网站将在所有设备上响应。

如果它是受限制的宽度布局，您能否不使用前缀为.container的类而不是.container fluid？

.container fluid-re移动宽度800px；使用最大宽度800px。容器-流体-移除宽度800px；使用最大宽度800px