Html 为什么我的引导列在手机/平板电脑上堆叠不正确?
我目前正在完成我的个人投资组合网站,我基本上完成了。我的站点的桌面版本工作正常,在我测试的所有桌面屏幕(13“-24”)上都能完全响应。我的桌面站点的每一页都被一分为二,有两个col-md-6 然而,这种设计对于手机/平板电脑来说是不合理的,所以我尝试将我页面中的所有col-md-6都堆叠为col-xs-12,但它不能正常工作。事实上,这看起来很糟糕。根据我的假设,这是因为行当前的对齐方式。它们是为col-md-6而设置的,当我输入12的时候,它们并没有真正正常工作。考虑到这一点,如果需要根据其移动/平板电脑还是桌面进行不同的设置,我应该如何设置行 另一个问题是关于我应该如何使用字体大小。我目前正在使用vm来调整字体大小,这对我的桌面版本非常有用。然而,在手机上它会变得太小。为弥补这一问题,建议的做法是什么 这是每种尺寸的照片。(现在我看到我的13英寸和24英寸之间有一个很小的间距差异,但这是一个很容易解决的问题。对此我并不担心。) 24“- 13“- 移动/平板电脑- HTML-Html 为什么我的引导列在手机/平板电脑上堆叠不正确?,html,css,mobile,twitter-bootstrap-3,responsive-design,Html,Css,Mobile,Twitter Bootstrap 3,Responsive Design,我目前正在完成我的个人投资组合网站,我基本上完成了。我的站点的桌面版本工作正常,在我测试的所有桌面屏幕(13“-24”)上都能完全响应。我的桌面站点的每一页都被一分为二,有两个col-md-6 然而,这种设计对于手机/平板电脑来说是不合理的,所以我尝试将我页面中的所有col-md-6都堆叠为col-xs-12,但它不能正常工作。事实上,这看起来很糟糕。根据我的假设,这是因为行当前的对齐方式。它们是为col-md-6而设置的,当我输入12的时候,它们并没有真正正常工作。考虑到这一点,如果需要根据其
实际上col-xs-12不工作,因为.about right和.about left width属性。您已将其设置为50%,只需将其删除即可。关于另一个问题,我总是使用像素,效果很好。这是我的解决方案 Css: html:
我是杰伊。
一个有创业精神的全堆栈开发人员。每当我面对一个我关心的挑战时,它都会让我感到匆忙。关注大局对我来说很重要,但我永远不会忘记小细节。任何没有挑战性的事情都很无聊,让我打哈欠。任何看似不可能的事情都让我很感兴趣。我准备开始工作了
目前正在纽约市使用平均堆栈寻找Javascript职位。创新、雄心勃勃、努力工作对我来说是非常重要的价值观。我想加入一家有着相似价值观的公司,目标是达到荒谬的成功水平,而不仅仅是适度的现实。我喜欢与坚实的团队合作
更多=>
电邮:jaybittner@gmail.com
那么,使用媒体查询根据屏幕大小调整宽度的最佳做法是什么呢?或者有没有一种更动态的方式来定义CSS中的宽度?这就是bootstrap的目的。我建议你坚持我删除的宽度:50%,从。大约右边。我不明白你指的是哪种宽度,大约左边。一旦我离开了,一切都没变。差不多吧。玩了它,明白了你的意思。从容器上移除宽度,就宽度而言,其工作正常。然而,因为我将高度设置为100%,所以它占据了半列的整个移动页面。假设我希望每半列占用半个移动页面(堆叠),那么在媒体查询中将页面高度定义为50%是最好的方法吗?我一直在计算,发现所有这些行div都不是很有用,所以可以删除它们。我还发现,只需将html、body和#about heights设置为100%。最后,为了避免使用媒体查询,您可以使用col-xs-12类在.about left上插入一个图像(而不是使用背景图像attr)。它将调整到适合大屏幕的整个高度,适合小屏幕的一半高度,然后您可以在#左右的位置上工作,使其适合屏幕的其余部分
<section id="about" ng-controller="aboutController">
<div class="container-fluid">
<div class="row about-row">
<div class="about-left col-md-6 col-xs-12">
</div>
<div class="about-right col-md-6 col-xs-12">
<div class="row">
<div class="about-content-title col-md-12">
<h1><strong>I'M JAY.</strong></h1>
</div>
</div>
<div class="row">
<div class="about-content-info col-md-12">
<p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>
<p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
</div>
</div>
<div class="row">
<div class="about-button col-md-12">
<button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
<button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
</div>
</div>
<div class="row">
<div class="about-personal-info col-md-12">
<h4>Email: jaybittner@gmail.com</h4>
</div>
</div>
<div class="row">
<div class="about-icon col-md-12">
<a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
</div>
</div>
</div>
</div>
</div>
</section>
#about {
height: 100%;
width: 100%;
background: rgba(0,97,65,1);
background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
background-repeat: no-repeat;
color: #101010;
border-bottom: 3px solid black;
}
#about .container-fluid, .about-row {
height: 100%;
width: 100%;
}
.about-left {
height: 100%;
background-image: url('../../images/jay-ocean.jpg');
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100%;
border-right: 3px solid #101010;
}
.about-right {
height: 100%;
width: 50%;
padding-top: 24vh;
padding-left: 3.4vw;
text-align: center;
}
.about-right .row {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.about-content-title {
padding-bottom: -30px;
}
.about-content-title h1{
font-size: 3.1vw;
margin: 3px;
}
.about-content-info p {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-button button {
color: gray;
border: 1px solid #101010;
background-color: #101010;
font-size: 0.7vw;
}
.about-button a {
color: gray;
}
.about-personal-info h4 {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-icon img {
height: 3.5vh;
width: 1.75vw;
border-radius: 10px;
border: 1px solid #101010;
margin: 3px;
}
html{height: 100%; }
body{height: 100%; }
#about {
height: 100%;
background: rgba(0,97,65,1);
background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
background-repeat: no-repeat;
color: #101010;
border-bottom: 3px solid black;
}
.about-left {
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 100%;
border-right: 3px solid #101010;
}
.about-right {
padding-top: 3vh;
padding-left: 3.4vw;
text-align: center;
}
.about-content-title {
padding-bottom: -30px;
}
.about-content-title h1{
font-size: 40px;
margin: 3px;
}
.about-content-info p {
font-size: 12px;
word-spacing: 0.3vw;
}
.about-button button {
color: gray;
border: 1px solid #101010;
background-color: #101010;
font-size: 0.7vw;
}
.about-button a {
color: gray;
}
.about-personal-info h4 {
font-size: 10px;
word-spacing: 0.3vw;
}
.about-icon img {
height: 3.5vh;
width: 1.75vw;
border-radius: 10px;
border: 1px solid #101010;
margin: 3px;
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<section id="about" ng-controller="aboutController">
<div class="container-fluid">
<div class="about-left col-md-6 col-xs-12">
<img src="./Album.gif" class="img-responsive disc col-xs-12" alt="Image">
</div>
<div class="about-right col-md-6 col-xs-12 text-justified">
<div class="col-md-6 col-md-offset-3">
<div class="about-content-title ">
<h1><strong>I'M JAY.</strong></h1>
</div>
<div class="about-content-info ">
<p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>
<p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
</div>
<div class="about-button col-md-12">
<button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
<button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
</div>
<div class="about-personal-info col-md-12">
<h4>Email: jaybittner@gmail.com</h4>
</div>
<div class="about-icon col-md-12">
<a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
</div>
</div>
</div>
</div>
</section>
<script src="./js/jquery-2.1.4.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>