【发布时间】：2015-09-07 21:46:20
【问题描述】：
我目前正在整理我的个人作品集网站，我基本上完成了。我的站点的桌面版本运行正常，并且在我测试的所有桌面屏幕 (13"-24") 上都能完全响应。我的桌面网站的每个页面都被分成两半，有 2 个 col-md-6。
但是，这种设计不适用于手机/平板电脑，因此我尝试将我页面中的所有 col-md-6 堆叠为 col-xs-12，但它无法正常工作。事实上，它看起来很可怕。从我的假设来看，这是因为当前行对齐的方式。它们是为 col-md-6 设置的，当我放入 12 时，它们并没有真正正常工作。考虑到这一点，如果需要根据手机/平板电脑还是台式机对行进行不同的设置，我应该如何设置行？
另一个问题与我应该如何做字体大小有关。我目前正在使用 vm 来调整字体大小，这对我的桌面版本非常有用。但是，它在移动设备上会变得太小。建议的做法是什么来弥补这个问题？
这是每种尺寸的图片。 （现在我发现我的 13" 和 24" 之间有一个小的间距差异，但这是一个容易解决的问题。不用担心。）
24"-http://i988.photobucket.com/albums/af6/jtbitt/24-inch-desktop-responsive_zps6mwocx8l.png
13"- http://i988.photobucket.com/albums/af6/jtbitt/13-inch-desktop-responsive_zps4rvtqo5l.png
手机/平板电脑-http://i988.photobucket.com/albums/af6/jtbitt/mobile-unresponsive_zpsjn6hu8x3.png
HTML-
<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>
CSS-
#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 css mobile twitter-bootstrap-3 responsive-design