OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

响应式设计在图片上的应用: 一个HTML元素如何让Web更快


分享到
分类 技术前沿   关键字 JavaScript   发布 ourjs  1409733801783
注意 转载须保留原文链接,译文链接,作者译者等信息。  
调查表明: 截至2014年8月,世界排名前1000的网站平均的页面大小为1.7Mb,其中的图片就占到了1Mb

更可气的是当你使用的移动设备的时侯,图像根本没有什么用只会浪费你的宽带。

“移动互联网”时代


为了解决这个问题很多网站将iPhone以及Android用户,重定向到一个专用的为移动设备设计的网站,通常像m.domain.com这样的域名。 

不过这无疑是非常痛苦的,这时侯m.domain.com网站的杀手: 响应式设计就出现了。

2010年,Web开发人员Ethan Marcotte写了一个关于响应网页设计的小文章。 

Marcotte建议,随着移动设备的普及,建设专用的移动网站是非常痛苦的,响应性的设计则会更有意义。使用相对宽度,可以适应任何屏幕,无论什么设备访问了它效果都会很好。 响应式设计是未来发展的方向。 

注* 两个小示例: (宽度小于480px的设备启用 shetland.css文件)

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

也可以将其与正常的css文件写在一起,加一个@media标签即可

@media (max-width: 480px) {
  #article-panel {
    padding-left: 0;
    margin-left: 0;
  }
}

关于图片的问题,可以使用"聪明的JavaScript"对图片进行后处理,默认下载适合手机使用的小图,然后在渲染页面的时侯为桌面程序下载大图。但是负作用是可能会延长你的页面加载时间。

因此最好的解决方案是完全设计一个新的HTML元素来同时适应桌面和移动端,<picture> 元素(响应式图片元素?)就这样被设计出来了: 

picture元素示例

基本用法: 当设备宽度大于45em时启用large.jpg

<picture>
    <source media=”(min-width: 45em)” srcset=”large.jpg”>
    <source media=”(min-width: 18em)” srcset=”medium.jpg”>
    <img src=”small.jpg” alt=”Robert Anton Wilson laughing”>
</picture>

高级用法

<picture>
    <source sizes=”(max-width: 30em) 100%, (max-width: 50em) 50%, calc(33% - 100px)”
            srcset=”pic100.jpg 100w, pic200.jpg 200w, pic400.jpg 400w,
                    pic800.jpg 800w, pic1600.jpg 1600w, pic3200.jpg 3200w”>
    <img src=”pic400.jpg” alt=”Robert Anton Wilson laughing”>
</picture>

注* 会不会有点复杂? 这个规范仅处在草案阶段,尚未成为正式标准。

这里有一个叫 http://specifiction.org/ 的网站,开发人员有任何建议都可以提出,你的建议有可能被W3C标准团队采纳.




注* 原文很长,因此只摘取重要部分:  how-a-new-html-element-will-make-the-web-faster


社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  1. OurJS-免费开源的博客引擎,论坛系统,网站模板和轻量级的CMS
  2. JavaScript构建(编绎)系统大比拼:Grunt vs. Gulp vs. NPM
  3. JavaScript中的继承,构造函数以及new关键字的作用
  4. CSS的力量:用一个DIV画图
  5. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  6. 内存管理技巧:如何避免JavaScript的内存泄露
  7. 前置逗号是不好的JavaScript代码书写习惯吗?
  8. fibjs 比 nodejs 快五倍
  9. 为JavaScript设计一个指数操作(运算)符
  10. 在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
  11. AirJD-简单好用的免费建站工具

 相关阅读 - 技术前沿
  1. 微软Azure云推出基于JSON的NoSQL数据库DocumentDB
  2. Chrome V8将实现ES6的类语法(class)
  3. 自己动手写CSS流式(响应式)布局
  4. 为JavaScript设计一个指数操作(运算)符
  5. TJ Holowaychuk将Express维护权移交给StrongLoop
  6. 主流搜索引擎闯入Linux命令行世界
  7. Android即将支持GO语言,从游戏开始
  8. 8款适合Linux用户使用的数据库管理工具!
  9. 用Javascript制造机器人和火箭
  10. 10个值得一用的CSS框架

 关键字 - JavaScript
  1. 如何用CSS将select/option文本居中或居右对齐
  2. 40行JavaScript代码实现的3D旋转魔方动画效果
  3. 使用Javascript将相对路径地址转换为绝对路径
  4. 给checkbox选择框设置不选中时的值
  5. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  6. JavaScript中怪异的地方
  7. 在JavaScript中创建命名空间的几种写法
  8. JavaScript中的继承,构造函数以及new关键字的作用
  9. 纽约时报使用Html5 WebRTC记录访问者IP地址
  10. 正则中test、exec、match的简单区别,以及括号的用法

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号