手机页面 根据网页大小自动显示字体大小

 $(function() {
window.addEventListener('load', function() {
FastClick.attach(document.body);
//$("#banner").attr("src", $("#banner").attr("data-url"));
$('.banner').height($('.banner img:eq(0)').height());
// $('.banner').switchPic({
// 'time': 3000,
// 'type': 'lr'
// });
}, false);
 
function otherCtr() {
$('.licon').height($('.logo>img').height())
}
$(window).resize(function() {
otherCtr()
});
otherCtr();


function textFit() {
$.fn.flowtype = function(options) {
var settings = $.extend({
maximum: 9999,
minimum: 1,
maxFont: 9999,
minFont: 1,
fontRatio: 35,
lineRatio: 1.45
}, options),
changes = function(el) {
var $el = $(el),
elw = $el.width(),
width = elw > settings.maximum ? settings.maximum : elw < settings.minimum ? settings.minimum : elw,
fontBase = width / settings.fontRatio,
fontSize = fontBase > settings.maxFont ? settings.maxFont : fontBase < settings.minFont ? settings.minFont : fontBase;
$el.css({
'font-size': fontSize + 'px',
'line-height': fontSize * settings.lineRatio + 'px'
})
};
return this.each(function() {
var that = this;
$(window).resize(function() {
changes(that)
});
changes(this)
})
};
$('body').flowtype({
minFont: 12,
maxFont: 28,
fontRatio: 40,
})
};
textFit();
 

})



<html  >
 
 
 <body>


 sdfsdfsdfsdf 
</body> 


    <script src="Scripts/zepto.min.js"></script>
    <script src="Scripts/fastclick.min.js"></script>
    <script src="Scripts/file1.min.js"></script>
    <script src="Scripts/swipe.min.js"></script>


</html>




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要实现网页字体大小的自适应,可以使用CSS中的`vw`单位或者使用JavaScript来动态地调整字体大小。 1. 使用vw单位: - 在CSS样式中,可以使用`vw`(viewport width)单位来设置元素的字体大小。`vw`单位是相对于视口宽度的百分比单位,1vw等于视口宽度的1%。 - 例如,如果要将字体大小设置为视口宽度的5%,可以这样写: ```css body { font-size: 5vw; } ``` - 这样,字体大小会根据视口宽度的变化而自动调整。 2. 使用JavaScript: - 使用JavaScript可以实现更复杂的字体大小自适应逻辑。 - 首先,通过JavaScript获取当前视口的宽度,例如: ```javascript var viewportWidth = window.innerWidth || document.documentElement.clientWidth; ``` - 然后,根据需要的字体大小与视口宽度之间的关系,计算出要设置的字体大小。可以使用`document.getElementById`等方法获取目标元素,并设置其`style.fontSize`属性为计算后的值。 - 例如,如果要实现字体大小与视口宽度成正比例关系,可以这样写: ```javascript var targetElement = document.getElementById('target-element'); var fontSize = viewportWidth * 0.05; // 假设字体大小是视口宽度的5% targetElement.style.fontSize = fontSize + 'px'; ``` - 这样,每次视口大小变化时,都会重新计算并设置字体大小。 以上是实现网页字体大小自适应的两种方法,可以根据具体需求选择适合的方法来使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值