移动端字体大小调节器实现

cpupro 发布于2019-08-02 10:03 / 1905人阅读

摘要：最近在一个微信项目中需要用到字体大小调节器，就看了一下中的功能，就做了一个相似的，方法也不止一种，而且都不难。第三点在我目前的项目中，在微信浏览器是不需要考虑的。

最近在一个微信H5项目中需要用到字体大小调节器，就看了一下QQ中的功能，就做了一个相似的，方法也不止一种，而且都不难。

方法1 html


    
    
        
        
        
        
        
    


    圣诞已过
再加上看过各个大牌出的辣眼睛狗年限定以后
我以为未来的几个月应该是没有什么东西
能骗到我的钱了
直到...看到了ysl的春季限定...
我知道
钱包又要完。蛋 。了。

style

我们得到这样的页面：

javascript

最简单的单击目标点可以设置对应字体大小：

$(".font-adjust li").on("click", function(e) {
    $("article").attr("style", `font-size: ${$(this).attr("data-size")}`); // 设置字体大小
    $(".font-adjust li").removeClass("selected");
    $(this).addClass("selected");
})

在QQ的字体设置中，只要点击起始点在调节区域，之后在整个窗口左右滑动也可以达到调节字体的目的，我这里用的是 touchmove 事件，利用它返回的位置信息，判断当前距离哪个点的水平位置最近，就使用哪个字体大小，代码如下：

var fontModel = ["14px", "16px", "18px", "20px", "22px"]; // 可供选择的字体序列
var current = 0; // 当前使用的字体在序列中的位置下标
var fontModelsPos = $(".font-adjust li").map(function (index) { // 获得每个标记点的位置 x
    return $(".font-adjust li").eq(index)[0].offsetLeft;
})

$(".font-adjust").on("touchmove", function (e) {
    e.preventDefault();
    var min = {
        i: 0,
        dis: Math.abs(fontModelsPos[0] - e.changedTouches[0].clientX)
    };
    for(var i = 1; i < 5; i++){ // 获得最近标记点
        var dis = Math.abs(fontModelsPos[i] - e.changedTouches[0].clientX); // 计算触控点和各标记点的距离
        if (dis < min.dis) { // 找出最近的那个
            min = { i: i, dis: dis }
        }
    }
    if (min.i != current) { // 字体大小改变
        current = min.i;
        $(".font-adjust li").removeClass("selected");
        $(".font-adjust li").eq(min.i).addClass("selected");
        $("article").attr("style", `font-size: ${fontModel[min.i]}`)
    }
})

效果：

方法2

emmmmm，后来隐约记得有个元素可以充当这个来调节器来用，是它，是它，就是它：input 。input 中有一个属性 type="range" ，使用它可以更方便的完成上述功能。

html

这里还是保留了上面的部分代码（5个定位点和1条横线），因为 input 是没有这些点的，横线可以通过更改默认滑轨的样式成为一条细线，但是当滑块在两端时，横线的顶点并不在滑块中央，不介意的话问题也不大。

如下的透视图展示的就是顶点在滑块正中央：

style

javascript

这里的 js 部分就很简单了，简直是送分题：

var fontModel = ["14px", "16px", "18px", "20px", "22px"];
var article = document.getElementById("article");

document.getElementById("adjust_font").addEventListener("input", function (e) {
    article.setAttribute("style", `font-size: ${fontModel[e.target.value]}`);
}, false);

总结

两种方法实现起来看起来都挺简单，但是综合考虑还是第二种方法优先，我考虑的方面主要有三点：

当各字体的5个标记点不是一条竖线，而是一个圆或者其他形状的时候，我们需要计算圆的中心点，而众所周知移动端我们可能会用 rem 或者其他单位，这时候计算起来比较棘手了；

在 touchmove 事件中处理了很多计算问题，比较消耗资源，有可能会造成用户体验不佳；

touchmove 事件的兼容性，Safari 暂不支持，有可能会造成困扰。

第三点在我目前的项目中，在微信浏览器是不需要考虑的。

该文章首发于https://blog.bingqichen.me/。

GPU云服务器云服务器 webrtc 移动端实现 webrtc声音大小调节 jsp 图片调节大小 webrtc播放声音大小调节

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52093.html

移动端字体大小调节器实现

摘要：最近在一个微信项目中需要用到字体大小调节器，就看了一下中的功能，就做了一个相似的，方法也不止一种，而且都不难。第三点在我目前的项目中，在微信浏览器是不需要考虑的。最近在一个微信H5项目中需要用到字体大小调节器，就看了一下QQ中的功能，就做了一个相似的，方法也不止一种，而且都不难。 showImg(https://segmentfault.com/img/bV7g5Y?w=750&h=...

lastSeries 2019-08-22 15:53 评论0 收藏0
简单粗暴的移动端页面开发技能

摘要：移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用，高度和小宽度全部使用，简单粗暴。之前阅读过大漠老师的使用实现手淘页面的终端适配介绍了手淘项目的制作规范。移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用%，高度和小宽度全部使用rem，简单粗暴。之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的H5制作规...

jeffrey_up 2019-08-30 13:13 评论0 收藏0
简单粗暴的移动端页面开发技能

摘要：移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用，高度和小宽度全部使用，简单粗暴。之前阅读过大漠老师的使用实现手淘页面的终端适配介绍了手淘项目的制作规范。移动端响应式页面开发说简单也简单，根据屏幕尺寸调节根字体大小。大宽度用%，高度和小宽度全部使用rem，简单粗暴。之前阅读过大漠老师的使用Flexible实现手淘H5页面的终端适配,介绍了手淘项目的H5制作规...

Gilbertat 2019-08-22 10:48 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

blastz 2019-08-30 13:50 评论0 收藏0
Web网页布局的主要方式

摘要：改变屏幕分辨率可以切换不同的静态局部页面元素位置发生改变，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。即创建多个流体式布局，分别对应一个屏幕分辨率范围。一、静态布局（static layout）　　即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点　　不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态...

shiina 2019-08-01 17:52 评论0 收藏0