技术积累

  • 2019-05-14更新

    1.为什么设置font-size=62.5%

    简单说下为什么要来更新这篇博客的原因吧。这篇博客计算rem的方式是自己2014年刚毕业的时候做移动端项目写的。本身这段代码没有什么问题,但是在本地开发调试(比如chrome上) 因为设置 html 根元素的font-size=62.5% 导致在chrome上使用了rem单位的容器计算出来的正常的尺寸会有偏差(实际上在移动端设备上显示的又没有问题)。

    这个问题的主要原因就是在pc上默认浏览器的字体最小只能显示 12px大小的字体**(当然这个说法也是指的大多数浏览器)。所以当使用这篇博客脚本的来做rem 的动态计算的时,如果

  • 最近的项目中做了一个“跑马灯”的抽奖特效插件。上篇文章已经分享过htmlcss 的相关知识。这篇文章主要分享一些 JavaScript 相关的知识。这几天在写这篇文章的时候,也顺便把自己的代码重构了一下。
    这里主要是来写写自己的优化过程。俗话说:

    一个程序猿的进步是从对自己的代码不满意开始的。

    开始之前先来看上篇文章遗漏的两个问题和几个知识点,是自己重构的过程中需要用到的:

    1.移动端1px像素线的问题

    对于设计师给我的手机端网页的设计稿都是2倍图。按照道理来说,在写网页的时候,所有对象的实际尺寸都是会除2。但是对于1像素的线呢?
    先来看两张图,设计稿的效果:

    这里写图片描述
    在三星 S4下的实际显示

  • 之前写过一版图片“懒加载”的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方。
    这篇文章主要就是结合上篇《“瀑布流式”图片懒加载代码示例》再来看看图片“懒加载”的一些知识。

    图片“懒加载”的主旨:
    按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销。

    先来看一段代码:

        var conf = {
                'loadfirst': true,
                'loadimg': true
            };
    
            for (var item in conf) {
              

  • MDN社区(即Mozilla开发者社区)具有很多高质量中英文文档。它是我开发时遇到概念模糊的地方经常访问的网站。因为默认搜索一些代码,优先显示的都是英文。但是恰恰这些显示的英文文档是有中文的。每次都是自己手动切换下中文显示。所以就想着在点击英文链接的时候,能够自动跳到中文链接。

    需求分析

    1. 点击英文的搜索结果自动跳转到中文文档地址。

    问题分析

    其实在MDN的每篇文档的页面上都提供了一个select表单供用户手动切换显示语言。其实我要做的也很简单,就是在页面加载的时候,使select表单选择中文简体然后重新提交一次表单即可。

    使用JS实现上面的一个提交表单的操作并不难,主要是在页面加载的时候执

  • 1.移动端开发视窗口的添加

    h5端开发下面这段话是必须配置的

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    其它相关配置内容如下:

    • width viewport 宽度(数值/device-width)
    • height viewport 高度(数值/device-height)
    • initial-scale 初始缩放比例
    • maximum-scale 最大缩放比例
    • minimum-scale 最小缩放比例
    • user-scalable 是否允许用户缩放(yes/n