很难使用flowtype.js使我的文本更具响应性
Having a hard time using flowtype.js to make my text more responsive
我一直在努力使我的网站上的文本更敏感,我一直在尝试使用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
});
})
您缺少用于定位ID whoText的标签。
$(document).ready(function() {
$('#whoText').flowtype({
minimum : 500,
maximum : 1200
});
})
尝试将选择器设置为body
而不是whoText
,例如:
$(document).ready(function() {
$('body').flowtype({
minimum : 500,
maximum : 1200});
})
JsFiddle
相关文章:
- 将高图饼图中的文本居中显示为响应
- 如何在响应视频上垂直居中文本
- Servlet对浏览器上显示的纯文本Javascript的响应
- EventSource 的响应具有非“文本/事件流”的 MIME 类型(“文本/纯文本”)
- 无法获取SOAP请求的响应文本
- Ajax 响应文本
- Jquery函数来验证响应文本
- 调整优雅的文本大小调整解决方案的性能,实现流畅/响应式设计
- Ajax响应文本始终为1
- jQuery UI日期选择器只响应第一个文本框
- 使用Jquery的响应设计引导程序中按钮的不同文本大小(例如LastName、FirstName/FirstName)
- XMLHttpRequest 的响应文本在 Mozilla 中为 null(空白)
- 处理XMLHTTP请求文本响应时出错
- 如何从jquery get方法中获取文本响应
- 如何从ajax文本响应中获得id值
- 我如何发送JSON,但期望纯文本响应与AJAX / JQuery
- 如何使用AJAX使用Dojo获得纯文本响应
- 强制JSONP调用将文本响应转换为JSON
- dojo.xhrGet返回PHP源代码,而不是文本响应
- 使引导导航栏中的文本响应