关注IMWeb前端社区公众号

  • 第一时间获得最新、最火的技术干货
  • 定期推送您所关注的专题文章
  • 和大牛们一起讨论前端技术
  • 获取IMWeb社区、前端相关的最新活动
热文 更多

  • 简单粗暴的移动端适配方案 - REM

    目录 * 0.前言 * 1.老版常规做法 * 2.rem * 3.rem计算 * 4.rem存在的问题 * 5.工程应用 0. 前言 手机市场日渐丰富的同时,给我们前端开发人员带来的 网页内容自适应屏幕尺寸进行显示 的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题,但是对于 页面有复杂结构或者视觉上有特殊要求 的,就需要通过其他手段来解决了。 [http://7tszky.com1.z0.glb.clouddn.com/FiITeMTD1_Eqv-a38EuyPNswj-cS] 以上图类“纪念碑谷”效果为例: 当你的 页面素材都是单独的图片资源 时,你完全可以通过百分比计算出每个动态小人的大小/位置/动画距离等信息;但是 当所有的小图都被拼接成一张大的雪碧图 时,当时我就眉头一皱,事情没有这么简单,元芳不知道你怎么看。 1. 老版常规做法 1.1 VIEWPORT缩放 以最小的Iphone4/5的宽度(320px)为基准,还原视觉稿。

  • 谈谈CSS sandbox的实现

    最近接了个需求,要实现一个 FAQ页面 [http://ke.qq.com/faq.html] 。我心想那不简单嘛,就一个Tab加内容展示,结果最后排期还挺紧的,着实蛋疼了一小下。下面分享一些小心得: 问题 一开始实现这个页面都是怎么简单怎么来,监听Tab点击,然后向CGI请求到文章数据后,直接用Jquery渲染到页面上 $('article').html(content) 。很快你就发现,页面上展示的内容跟后台编辑的展示不一样。因为页面加载了一些公用的样式影响了文章的展示,比如: * reset.css * normalize.css * common.css [http://7tszky.com1.z0.glb.clouddn.com/FnjXvZC8QamG640AQ1n_kP8mUgNZ] 可以看下这个 例子 [https://ke.qq.com/course/198477] ,在课程概述里其实是富文本的展示,但是目前大部分课程都选择自己PS作图上传上去。因为受到的影响实在太大了。 于是你需要要弄一个CSS sandbox来展示这个文章。 部分解决办法 命名空间

  • Web直播,你需要先知道这些

    前段时间接触了一些音视频、web直播相关的东西,加上Flash的即将终结、WebRTCd的兴起、小程序的流行,这里总结了一点个人学习收获和大家分享。 WEB直播,你需要先知道这些 直播知识小科普 1. 一个典型的直播流程:录制->编码->网络传输(推流->服务器处理->CDN分发)->解码->播放 2. IPB:一种常用的视频压缩方案,用I帧表示关键帧,B帧表示前向差别帧,P帧表示双向差别帧 3. GOP (Group of Pictures):GOP 越长(I帧之间的间隔越大),B 帧所占比例越高,编码的率失真性能越高。虽然B帧压缩率高,但解码时CPU压力会更大。 4. 音视频直播质量好坏的主要指标: 内容延时 、 卡顿(流畅度) 、 首帧时长 5. 音视频直播需要克服的主要问题:网络环境、多人连麦、主辅路、浏览器兼容性、CDN支持等 6. MSE (Media Source Extensions):W3C 标准API,解决 HTML5 的流问题(HTML5 原生仅支持播放 mp4/webm

  • 手把手教你如何封掉女朋友淘宝账号

    先说明下,当然本方法不是真的黑掉淘宝服务器,只是通过在电脑本地做一些手脚,让女朋友没法打开淘宝页面而已。 整个东西原理简单,就是在浏览器装一个插件,该插件可以检测当前浏览的网站,并且在相应页面插入一段自己定义的代码。 说下这个办法得以实施的需要满足的条件是: 1. 首先,你得有一个女朋友(笑脸) 2. 你有电脑的控制权,可以偷偷地装上插件 3. 电脑用的是 chrome 浏览器(其他国产的应该也可以,不过还没试过) 4. 你懂一点点前端知识 好,接下来就介绍整个办法最核心的插件,就是大名鼎鼎的 tampermonkey [http://tampermonkey.net/] ,人称油猴。这个插件就是可以运行多个自己定制化脚本的插件,得益于这个插件,你可以检测当前浏览网页的 url ,然后插入相应的自己的脚本。网上有很多很好用的油猴脚本,基本上相当于装一个插件,就有了很多插件的能力。同时自己写脚本也很简单,本文就是通过制作简单的脚本来达到我们目的的。 首先第一步得安装油猴插件,本教程需要大家装的是 chrome 插件: Tampermonkey - Chrome 网上应用店

  • 新人如何搭建(copy)一个属于自己的博客

    对于很多刚学前端的朋友们来说(比如我),在学习的过程中经常会记一些笔记,除了现实中的烂笔头,我们也可以在PC上记笔记、写总结,下面分享一些或多或少会用上的网站或工具。 脑图类: Xmind [https://www.xmind.cn/] 、 百度脑图 [http://naotu.baidu.com/] ... 总结类: CSDN [https://www.csdn.net/] 、 简书 [https://www.jianshu.com/] 、 segmentfault [https://segmentfault.com/] 、 博客园 [https://www.cnblogs.com/] ... 当然,也有不少朋友们想拥有一个属于自己的博客,学会走路再学跑步,下面将简单暴力的教你搭建(拷贝)一个博客。我们的准备如下 * 拥有一个自己的域名 * 拥有 Git [https://git-scm.com/book/zh/v1/] 基础知识(不懂没关系,跟着大伙走,学会Github即可) * 拥有一个 GitHub [https://github.com/] 账号

热问 更多

  • 赵鹏帆 2017-11-23 10:43

    如题:参考https://twitter.com/necolas/status/829128165314306048?utm_source=feweekly&utm_campaign=issue42&utm_medium=web PWA(做离线化的)目前有这么成熟吗? 这个是否也说明以Javascript为基础的全栈体系正在逐渐落地?

  • 大漠刀客 7 天前

    js高级程序设计里说 this 引用的是函数执行的环境对象, 下面foo()在window下执行,环境对象就是window? * function foo(){ * alert(this); * } * foo(); * 那么函数嵌套为什么也是[object Window]?比如下面的 * function foo(){ * function foo2(){ * alert(this); * } * foo2(); * } * foo(); 输出的还是window * function SpecialArray(){ * alert(this); * } * alert(this); * SpecialArray(); * var colors = new SpecialArray(); 弹出的依次是[object Window],[object Window],[object Object]?这里的Object又是什么情况

  • 络黎 2017-10-19 17:31

    请指出JavaScript宿主对象和原生对象的区别?