【发布时间】:2014-08-14 14:48:07
【问题描述】:
我一直在尝试使我的 wesbite 中的文本更具响应性,并且我一直在尝试使用 flowtype.js 在此处看到:http://simplefocus.com/flowtype/ 来完成此操作。但是,无论我做什么,它似乎都不起作用。更改视口时文本不会自行调整大小我在下面包含了我的代码和一个 jfiddle。任何帮助将不胜感激!
Jfiddle:http://jsfiddle.net/4jy1dvxx/
HTML:
<div id="whoText">
<p class="header">Who we are</p>
<p class="boxText">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. </p>
<p class="boxText">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Lati</p>
</div>
CSS:
#whoText {
width:45%;
float:left;
height:500px;
}
#whatText {
width:45%;
float:right;
height:500px;
}
#whiteBox {
width:30%;
float:right;
height:500px;
}
#textContain {
width:60%;
display: inline-block;
vertical-align: middle;
}
.header {
font-family: 'Dosis', sans-serif;
font-size:1.875em;
font-weight:800;
text-align:left;
color:#000;
padding-bottom:20px;
}
.boxText {
font-family: 'Josefin Slab', serif;
font-weight: 600;
font-size:1.063em;
color:#000;
text-align:left;
line-height:23px;
padding-bottom:15px;
}
JS:
$(document).ready(function() {
$('whoText').flowtype({
minimum : 500,
maximum : 1200
});
})
【问题讨论】:
标签: javascript jquery css plugins jquery-plugins