金沙澳门官网网址_金沙国际登陆

欢迎加入金沙澳门官网网址体验更多不一样的精彩.,金沙国际登陆提供最丰厚回馈!,因为金沙澳门官网网址这里的游戏是多种多样的,为大家打造一个最专业的化的超级五星酒店。

金沙澳门官网网址 > 金沙澳门官网网址 > 前端框架,借助响应式图片来改进网站图片显示

原标题:前端框架,借助响应式图片来改进网站图片显示

浏览次数:127 时间:2019-10-13

处理图片

<picture> 元素在网页性能上效果显著,同时也给我们带来很大的便利,问题是,我们怎样去生产这些不同大小的图片呢?假如你需要多份不同的图片,怎样得到这些图片呢?庆幸的是,有一种简单的方法可以解决这个问题。

使用 Grunt 响应式图片插件可以自动处理、剪裁图片。假如你对 Grunt 任务不熟,也不知道怎样将它引用到你的工程,请参考我之前发表的这篇博文。 Grunt 官网也提供了非常好的教学资源帮助你立刻开始使用它。

npm install grunt-responsive-images –save-dev

配置好 Grunt ,并且保证它能在你机器上运行之后,打开你的网站,在命令行里输入以下命令来下载相应的包。

npm install grunt-responsive-images –save-dev

接下来你还需要安装 ImageMagick 或 GraphicsMagick 命令行工具,然后配置 gruntfile.js 文件。下面是一个参数配置例子,有很多配置选项,可以根据实际需求设定不同的参数。

XHTML

grunt.initConfig({ responsive_images: { myTask: { options: { sizes: [{ width: 320, height: 240 },{ name: 'large', width: 640 },{ name: "large", width: 1024, suffix: "_x2", quality: 60 }] }, files: [{ expand: true, src: ['assets/**.{jpg,gif,png}'], cwd: 'test/', dest: 'tmp/' }] } }, })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
grunt.initConfig({
  responsive_images: {
    myTask: {
      options: {
        sizes: [{
          width: 320,
          height: 240
        },{
          name: 'large',
          width: 640
        },{
          name: "large",
          width: 1024,
          suffix: "_x2",
          quality: 60
        }]
      },
      files: [{
        expand: true,
        src: ['assets/**.{jpg,gif,png}'],
        cwd: 'test/',
        dest: 'tmp/'
      }]
    }
  },
})

通过上面的参数设置,图片将生成 320 像素, 630 像素和 1024 像素的图片,每种像素的图片将放在不同的目录里。

现在,可以处理图片了。在命令行中运行 Grunt 命令,这个时候,可以看到目录下会新增加三个目录,每个目录中已经存在裁剪好了的图片! Hooray !

如果还在想什么工具可以自动帮助你生成相关的 HTML 标签的话,这个 Grunt 插件能替你做这些苦差事。把这个插件和 Grunt responsive images 插件结合起来用,会给你带来更多意外惊喜。

关于作者:cucr

图片 1

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

图片 2

PostCSS插件的配置

Webpack项目的.postcssrc.js最终的PostCSS插件的配置:

module.exports = { "plugins": { "postcss-import": {}, "postcss-url": {}, "postcss-aspect-ratio-mini": {}, "postcss-write-svg": { utf8: false }, "postcss-cssnext": {}, "postcss-px-to-viewport": { viewportWidth: 750, viewportHeight: 1334, unitPrecision: 3, viewportUnit: 'vw', selectorBlackList: ['.ignore', '.hairlines'], minPixelValue: 1, mediaQuery: false }, "postcss-viewport-units":{}, "cssnano": { preset: "advanced", autoprefixer: false, "postcss-zindex": false } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
module.exports = {
    "plugins": {
        "postcss-import": {},
        "postcss-url": {},
        "postcss-aspect-ratio-mini": {},
        "postcss-write-svg": {
            utf8: false
        },
        "postcss-cssnext": {},
        "postcss-px-to-viewport": {
            viewportWidth: 750,    
            viewportHeight: 1334,  
            unitPrecision: 3,      
            viewportUnit: 'vw',  
            selectorBlackList: ['.ignore', '.hairlines'],
            minPixelValue: 1,  
            mediaQuery: false  
        },
        "postcss-viewport-units":{},
        "cssnano": {
            preset: "advanced",
            autoprefixer: false,
            "postcss-zindex": false
        }
    }
}
 

对于这些PostCSS插件所起的作用和怎么配置,在其对应的GitHub上都有详细的描述。这里简要的描述一下,为什么在我们的项目中会采用这些PostCSS的插件:

postcss-importpostcss-url两个主要是用于处理引入的文件和资源路径的处理以及工作模式。如果你的项目也使用的是Vue,并且配置了vue-loader,并且配置了相关的参数,那就就具有类似的功能。

autoprefixer主要用来处理浏览器的私有前缀,这个已经是大家经常使用的一个PostCSS插件了。这里需要提出的是,如果你的项目中使用了postcss-nextcssnano,那么autoprefixer插件可以不引入,而且在postcss-nextcssnano两者中选择其一关闭autoprefixer,因为这两个插件都集成了autoprefixer插件的特性。

postcss-cssnext其实就是cssnext。该插件可以让我们使用CSS未来的特性,其会对这些特性做相关的兼容性处理。其包含的特性主要有:

图片 3

有关于cssnext的每个特性的操作文档,可以点击这里浏览。

cssnano主要用来压缩和清理CSS代码。在Webpack中,cssnanocss-loader捆绑在一起,所以不需要自己加载它。不过你也可以使用postcss-loader显式的使用cssnano。有关于cssnano的详细文档,可以点击这里获取。

注:由于cssnanopreset配置使用的是advanced,所以需要安装npm install cssnano-preset-advanced --save-dev。另外cssnextcssnano都具有autoprefixer的插件,因此在cssnano中将autoprefixer设置为false

postcss-write-svg插件主要用来处理移动端1px的解决方案。该插件主要使用的是border-imagebackground配合SVG绘制的矢量图来做1px的相关处理。后续将会专门花一节的内容来介绍postcss-write-svg或者说怎么能更好的使用SVG来处理移动端1px

postcss-aspect-ratio-mini主要用来处理元素容器宽高比。在项目当中很多地方会使用imgobject或者video,那么这个插件能更好的帮助我们完美处理宽高比的缩放。在实际使用的时候,具有一个默认的结构:

<div aspectratio> <div aspectratio-content></div> </div>

1
2
3
<div aspectratio>
    <div aspectratio-content></div>
</div>

在实际使用的时候,你可以把自定义属性aspectratioaspectratio-content换成相应的类名,比如:

<div class="aspectratio"> <div class="aspectratio-content"></div> </div>

1
2
3
<div class="aspectratio">
    <div class="aspectratio-content"></div>
</div>

我个人比较喜欢用自定义属性,它和类名所起的作用是同等的。结构定义之后,需要在你的样式文件中添加一个统一的宽度比默认属性:

[aspectratio] { position: relative; } [aspectratio]::before { content: ''; display: block; width: 1px; margin-left: -1px; height: 0; } [aspectratio-content] { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
[aspectratio] {
    position: relative;
}
[aspectratio]::before {
    content: '';
    display: block;
    width: 1px;
    margin-left: -1px;
    height: 0;
}
 
[aspectratio-content] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
 

如果我们想要做一个188:246188是容器宽度,246是容器高度)这样的比例容器,只需要这样使用:

[w-188-246] { aspect-ratio: '188:246'; }

1
2
3
4
[w-188-246] {
    aspect-ratio: '188:246';
}
 

有一点需要特别注意:aspect-ratio属性不能和其他属性写在一起,否则编译出来的属性只会留下aspect-ratio的值,比如:

<div aspectratio="" w-188-246="" class="color"></div>

1
<div aspectratio="" w-188-246="" class="color"></div>

编译前的CSS如下:

[w-188-246] { width: 188px; background-color: red; aspect-ratio: '188:246'; }

1
2
3
4
5
6
[w-188-246] {
    width: 188px;
    background-color: red;
    aspect-ratio: '188:246';
}
 

编译之后:

[w-188-246]:before { padding-top: 130.85106382978725%; }

1
2
3
4
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}
 

主要是因为在插件中做了相应的处理,不在每次调用aspect-ratio时,生成前面指定的默认样式代码,这样代码没那么冗余。所以在使用的时候,需要把widthbackground-color分开来写:

[w-188-246] { width: 188px; background-color: red; } [w-188-246] { aspect-ratio: '188:246'; }

1
2
3
4
5
6
7
8
[w-188-246] {
    width: 188px;
    background-color: red;
}
[w-188-246] {
    aspect-ratio: '188:246';
}
 

这个时候,编译出来的CSS就正常了:

[w-188-246] { width: 25.067vw; background-color: red; } [w-188-246]:before { padding-top: 130.85106382978725%; }

1
2
3
4
5
6
7
8
[w-188-246] {
    width: 25.067vw;
    background-color: red;
}
[w-188-246]:before {
    padding-top: 130.85106382978725%;
}
 

这个现象也算是一个天坑吧。而这个坑是该插件自己带来的,上面的处理方式只是治标而不能治本。所以在使用该插件的时候,需要特别注意这个细节。

目前采用PostCSS插件只是一个过渡阶段,在将来我们可以直接在CSS中使用aspect-ratio属性来实现长宽比。当然,如果你对cssnext熟悉的话,可以给其添加这样的一个PR,将CSS原生的aspect-ratio属性添加到cssnext特性当中,这样只要你使用postcss-next就可以忽略这个插件了。

剩下的postcss-px-to-viewportpostcss-viewport-units两个PostCSS插件主要是用于vw适配方案,算是这次项目中必不可少的PostCSS插件。其中,postcss-px-to-viewport插件主要用来把px单位转换为vwvhvmin或者vmax这样的视窗单位,也是vw适配方案的核心插件之一。

在配置中需要配置相关的几个关键参数:

"postcss-px-to-viewport": { viewportWidth: 750, // 视窗的宽度,对应的是我们设计稿的宽度,一般是750 viewportHeight: 1334, // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置 unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除) viewportUnit: 'vw', // 指定需要转换成的视窗单位,建议使用vw selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名 minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值 mediaQuery: false // 允许在媒体查询中转换`px` }

1
2
3
4
5
6
7
8
9
10
"postcss-px-to-viewport": {
    viewportWidth: 750,      // 视窗的宽度,对应的是我们设计稿的宽度,一般是750
    viewportHeight: 1334,    // 视窗的高度,根据750设备的宽度来指定,一般指定1334,也可以不配置
    unitPrecision: 3,        // 指定`px`转换为视窗单位值的小数位数(很多时候无法整除)
    viewportUnit: 'vw',      // 指定需要转换成的视窗单位,建议使用vw
    selectorBlackList: ['.ignore', '.hairlines'],  // 指定不转换为视窗单位的类,可以自定义,可以无限添加,建议定义一至两个通用的类名
    minPixelValue: 1,       // 小于或等于`1px`不转换为视窗单位,你也可以设置为你想要的值
    mediaQuery: false       // 允许在媒体查询中转换`px`
}
 

目前出视觉设计稿,我们都是使用750px宽度的,那么100vw = 750px,即1vw = 7.5px。那么我们可以根据设计图上的px值直接转换成对应的vw值。在实际撸码过程,不需要进行任何的计算,直接在代码中写px,比如:

.test { border: .5px solid black; border-bottom-width: 4px; font-size: 14px; line-height: 20px; position: relative; } [w-188-246] { width: 188px; }

1
2
3
4
5
6
7
8
9
10
11
.test {
    border: .5px solid black;
    border-bottom-width: 4px;
    font-size: 14px;
    line-height: 20px;
    position: relative;
}
[w-188-246] {
    width: 188px;
}
 

编译出来的CSS:

.test { border: .5px solid #000; border-bottom-width: .533vw; font-size: 1.867vw; line-height: 2.667vw; position: relative; } [w-188-246] { width: 25.067vw; }

1
2
3
4
5
6
7
8
9
10
11
.test {
    border: .5px solid #000;
    border-bottom-width: .533vw;
    font-size: 1.867vw;
    line-height: 2.667vw;
    position: relative;
}
[w-188-246] {
    width: 25.067vw;
}
 

在不想要把px转换为vw的时候,首先在对应的元素(html)中添加配置中指定的类名ignorehairlines(hairlines一般用于设置border-width:0.5px的元素中):

<div class="box haspx"></div>

1
<div class="box haspx"></div>

写CSS的时候:

.ignore { margin: 10px; background-color: red; } .box { width: 180px; height: 300px; }

1
2
3
4
5
6
7
8
9
.ignore {
    margin: 10px;
    background-color: red;
}
.box {
    width: 180px;
    height: 300px;
}
 

编译出来的CSS:

.box { width: 24vw; height: 40vw; } .ignore { margin: 10px; /*.box元素中带有.ignore,在这个类名写的`px`不会被转换*/ background-color: red; }

1
2
3
4
5
6
7
8
9
.box {
    width: 24vw;
    height: 40vw;
}
.ignore {
    margin: 10px; /*.box元素中带有.ignore,在这个类名写的`px`不会被转换*/
    background-color: red;
}
 

上面解决了pxvw的转换计算。

由于浏览器对vw还具有一定的兼容性,其在Android 4.4之下和iOS8以下的版本都存有一定的问题。为了让vwvhvminvmax这些viewport单位能更好的使用。其兼容方案就是使用viewport的polyfill:Viewport Units Buggyfill。

而在采用Viewport Units Buggyfill的时候,需要手动给使用viewport单位的样式中添加其对应的Hack代码,比如:

.box { top: 2vw; left: 1vw; content: 'viewport-units-buggyfill;top: 2vw;left: 1vw;'; }

1
2
3
4
5
6
7
.box {
    top: 2vw;
    left: 1vw;
 
    content: 'viewport-units-buggyfill;top: 2vw;left: 1vw;';
}
 

如果每一个都这样来做,那么将是灾难性的。幸运的是,可以使用postcss-viewport-units。其主要是给CSS的属性添加content的属性,配合viewport-units-buggyfill库给vwvhvminvmax做适配的操作。

另一个坑,使用postcss-viewport-units将会给具有content属性的元素造成一定的影响,比如你的项目中使用伪元素::before::after或者伪类:before:after之类。那么使用该插件,会自动替换你原来的content内容,为了避免该现象,需要在content的属性值末尾添加!important

上面这些PostCSS插件是在这次项目中使用的,也将会在后面的项目中继续使用,使用其主要原因是帮助我们解放双手能更好的撸。或许你对其中一些插件有更好的使用心得,欢迎和我们一起分享,如果你有更好的插件,能帮助我们解放双手,也欢迎分享给我们。

关于作者:yvonne

图片 4

简介还没来得及写 :) 个人主页 · 我的文章

图片 5

D3.js

数据可视化和图表是一种常见的 web 应用程序需求。D3.js 是任何数据操作和可视化的事实标准。它是 GitHub上最受欢迎的项目之一,被数以百计的组织使用。大量的图形,图表和可视化库在 D3 上构建。

D3 允许你操作任何来源的数据文档,转换成 DOM 或/和 SVG 或/和 CSS。D3 关注现代 web 标准,确保你不受任何专有格式的约束,比如 Flash 和 Silverlight。

何时使用 D3.js?在你需要任何形式的可视化的时候。

GitHub: 
当前版本: 3.5.6
网站: d3js.org

过年项目

手淘过年项目,事实上分为两个,其中一个叫红包开光,另一个是春晚抽奖的互动项目。

图片 6

上面两张图分别是红包开光和春晚互动的主界面视觉图。如果你参与过手淘过年互动的活动中,这两个界面应该对您来说并不会太陌生。

经过团队同学一起讨论,这次两个项目都基于Vue来开发,Vue只是一个JavaScript库而以,选择他并不没有太多的主要原因,而是想让团队在今后的项目开发的时候,JavaScript库能趋于统一,从而慢慢在项目中有所沉淀与积累。基于这个原因,我在其中主要做的事情,在这个脚手架中(也就是Vue-cli的基础)添加了以下三个部分:

  • PostCSS插件
  • vw适配方案
  • iPhone X 适配

OLDER BROWSERS

关注浏览器的新特性的同时,也要兼顾到老版本的浏览器。目前,只有 Chrome 38 和 Opera 支持 <picture> 元素。好消息是, <picture> 元素已经正式被 WHAT working group 接受,逐渐所有现代浏览器都会支持这个标签。通过 caniuse.com 可以查到,你喜欢的浏览器现在是不是支持它。

幸好,现在有一个插件可以解决大部分传统浏览器不支持 <picture> 元素的问题。 Filament Group 的团队开发出 picturefill.js 这个文件,这个插件可以使不支持 <picture> 元素的浏览器解析这个标签以及标签相关的属性。这意味着,你今天就可以开始使用 <picture> 元素了!

要使用这个插件,你需要在你的页面中添加这个 JavaScript 文件。

XHTML

<picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers."> <p>Accessible text.</p> </picture> <script> // Picture element HTML5 shiv for older browsers document.createElement( "picture" ); </script> <script src="picturefill.min.js" async></script>

1
2
3
4
5
6
7
8
9
10
11
12
<picture>
   <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
   <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
   <source srcset="dest/320/tiger.jpg">
   <img src="dest/640/tiger.jpg" alt="This picture loads on non-supporting browsers.">
   <p>Accessible text.</p>
</picture>
<script>
// Picture element HTML5 shiv for older browsers
document.createElement( "picture" );
</script>
<script src="picturefill.min.js" async></script>

再补充一句,这个插件和 picture 标签的功能是一样的。点击这个链接可以看到实例效果。在 Responsive Images Community Group 网站上还有很多例子。

Grunt & Gulp

为生产环境构建网站,通常涉及到提高性能的任务,比如 JavaScript 和 CSS 的压缩, CoffeeScript/TypeScript 的编译,单元测试,语法检查。也许你已经有一个为网站发布到生产环境的工具链,如果没有,你可以使用任务运行器,比如 Grunt 或Gulp。两者都有大量关于网站的任何转换的插件,为发布到生产环境做好准备。

何时使用 Grunt?当你喜欢写配置文件同时不介意你的任务运行器生成中间文件时。

Grunt GitHub: 
Grunt 当前版本: v0.4.5
Grunt 网址: gruntjs.com

何时使用 Gulp?当你喜欢在配置上写代码和利用 node.js 的流功能来加快任务执行时。

Gulp GitHub: 
Gulp 当前版本: v3.9.0
Gulp 网址: gulpjs.com

分享手淘过年项目中采用到的前端技术

2018/02/28 · CSS, JavaScript · 1 评论 · 前端技术

原文出处: 大漠   

当你陪着家人嗑着瓜子,和家人一起看着春晚,顺便拿着手淘参与春晚抽奖互动的时候,杭州还有两百多程序员还奋战在一线当中。现在年也过完了,奖也抽了,红包也拿了。也该好好回来工作的时候了。这次很荣幸,自己能参与手淘过年项目(红包开光和春晚互动项目)的项目中,虽然仅仅参与其中的部分工作,但事后感觉有些东西还是应该总结总结的,为之后的项目做准备。那么简单的来总结一下,我自己在参与项目中用到的一些前端技术。

这些技术其实也并不是什么鲜为人知的技术栈,因为这些技术点已经出现很久了,只不过大家习惯了自己的开发模式,加上项目时间紧,怕尝试新的东西。事实上我自己也是如此,害怕使用这些技术点,给项目带来其他的风险(本来项目时间就很紧),庆幸的是,接下来了到的一些东西,经住了项目的考验,虽然当中踩过一些坑,但总算是无惊无险。

附注

我第一次使用 picture 标签的时候,出现了这个错误:

“<source src> with a <picture> parent is invalid and therefore ignored. Please use <source srcset> instead.”

这次错误提示信息非常明确,在引用图片资源时不要使用 src 标签,使用 srcset 标签就可以了。

1 赞 1 收藏 评论

Underscore &lodash

有时候 JavaScript 内置的功能导致程序员的效率并不高。总是缺少一个工具函数或一个可以简化代码的函数。Underscore(和 lodash)是一个 JavaScript 库,它提供了一整套工具函数,不需要对内置 JavaScript 对象打补丁。两个库均提供超过 100 个功能助手和其他专用功能,包括 map,filter,invoke,reduce,template, throttle, bind, extend, pick, clone 等更多的函数。

何时使用 Underscore?当你需要一个单独的 JavaScript 文件,来立即提升程序员的工作效率时。

Underscore GitHub: 
Underscore 当前版本: 1.8.3
Underscore 网站: underscorejs.org

何时使用 lodash?当你需要模块化和性能稍强版本的 Underscore,同时更容易地支持 AMD 和社区插件时。

LodashGitHub: 

Lodash 当前版本: v3.10.1

Lodash 网站: lodash.com

第三步

添加前面提到的PostCSS插件的配置,当然,你可以只添加处理pxvwvw配合Viewport Units Buggyfill的两个PostCSS插件:postcss-px-to-viewportpostcss-viewport-units

PostCSS插件配置有一个强大之处,不管你使用的是什么脚手架,他的配置都非常的灵活,支持流行的配置工具,比如Webpack,gulp等。所以你不用担心不好配置。因为在使用Flexible时,也需要px2rem的PostCSS插件配置。

Web性能优化系列:借助响应式图片来改进网站图片显示

2015/06/22 · HTML5 · 响应式

本文由 伯乐在线 - yvonne 翻译,黄利民 校稿。未经许可,禁止转载!
英文出处:deanhume.com。欢迎加入翻译组。

开始使用 <picture> 元素

响应式网页设计太棒了,它改变了我们向手机端用户呈现内容的方式,无论用户使用何种尺寸的手机,我们都能够为其提供定制化的体验。响应式网页设计使用起来很灵活,也容易上手。然而,如果没有正确使用,它会对网页性能带来负面影响。

用于在 PC 端展示的图片对于手机来说太大了。我们知道,在手机设备上大尺寸高分辨率的图片会大大降低页面加载性能。响应式设计和非固定图片(fluid image)在保证正确显示的同时,也保证大图片在页面显示的性能大大提高。Tim Kaldec 对响应式图片的研究表明,使用响应式图片策略最多可以减少图片72%的负担。72%,这是一个相当大的数量。

过去这些年里,出现了一些响应式图片解决方案,开发人员也习惯了使用这些方案来解决响应式图片问题。但都现在看来,这些方法都有一点hacky的味道。这就是 <picture> 元素被引入的原因。

图片 7

<picture> 元素作为一种向不同设备输出高性能图片数据的客户端解决方案,目前已经纳入 WHATWG HTML 规范 。为了向大家展示 <picture> 元素的强大,我们一起来看一个简单的例子。

XHTML

<picture> <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg"> <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg"> <source srcset="dest/320/tiger.jpg"> <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element."> <p>This is some accessible text.</p> </picture>

1
2
3
4
5
6
7
<picture>
   <source media="(min-width: 1024px)" srcset="dest/1024/tiger.jpg">
   <source media="(min-width: 640px)" srcset="dest/640/tiger.jpg">
   <source srcset="dest/320/tiger.jpg">
   <img src="dest/640/tiger.jpg" alt="This picture will load on browsers that don't yet support the element.">
   <p>This is some accessible text.</p>
</picture>

浏览器在解析上面的 HTML 语句时会根据设备的屏幕分辨率来选取大小最合适的图片。点击这个链接观看实际效果。

图片 8

从上面的 HTML 代码可以看到, <picture> 元素由一组 <source> 标签组成。<source> 标签里面声明了设备的视口(viewport)宽度以及与之相应尺寸的图片。这样不同设备上的浏览器就可以根据这些信息选取最适合的图片源。这是一个出色的解决方案,因为所有的操作都是在客户端完成,开发者对展现给用户的图片具有控制权。

值得一提的是,通过设置 <img> 标签的 srcset 属性和 size 属性也可以达到相同的效果。这两个属性由 <img> 标签和 <source> 标签扩展而来,提供一系列图片资源和相应的图片大小。浏览器根据这些信息来选取最合适的图片。假如你不考虑图片的艺术美感,可以使用这种方法。

XHTML

<img src="dest/320/tiger.jpg" srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w" alt="A TIGER!!!">

1
2
3
<img src="dest/320/tiger.jpg"
  srcset="dest/1024/tiger.jpg 1024w, dest/640/tiger.jpg 640w, dest/320/tiger.jpg 320w"
  alt="A TIGER!!!">

如果你还想了解更多关于 <picture> 元素的历史和起源,推荐你读这篇文章。

Mocha& Chai

JavaScript 在很长一段时间内是非常烦人的。测试任何代码通常都被认为是恼人的,但它却是每个开发人员都应该做的事情。每个开发人员似乎总是蔑视和忽略它,而不测试他们的代码。这个恼人的东西有一个解决办法,那就是 Mocha 和 Chai。两个库的名字都来自美味的热饮料,它们都能帮你测试代码,但方式不同。 

Mocha 是一个 JavaScript 测试框架,使得你在 node 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试可以串联运行,可以为正确的测试用例添加异常跟踪的能力。

Chai 是一个行为驱动开发/测试驱动开发的断言库,可以搭配 Mocha 使用。它可以把你需要测试的东西用可读的风格简单地表达出来。

何时使用 Mocha & Chai?总是!请测试你的代码,让世界变得更美好。

Mocha 当前版本: 2.3.3
Mocha 网址: mochajs.org
Chai GitHub: 
Chai 当前版本: v3.4.1
Chai 网址: chaijs.com

第二步

在<head>`标签添加meta`标签:

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

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

为了兼容iPhone X的适配,在meta标签中添加了viewport-fit="cover"参数处理。有关于这方面的可以阅读《iPhone X的缺口和CSS》和《iPhone X的Web设计》。

Karma

既然已经把 Mocha 和 Chai 包含在这个列表中了,如果不包含用来运行这些测试或设置持续集成测试的测试运行器,那将是不完整的。Karma 是一款旨在帮助你在不同的浏览器上自动运行测试的工具。它可以帮助你在所有浏览器上运行 Mocha 和 Chai 测试。

不是每个浏览器都运行在所有平台,但幸运的是可以使用一些免费工具来测试其他浏览器,看看 Browser Screenshots。如果你正在 OS X 上运行代码,想测试 Edge 或 IE,可以 免费 使用这个工具。

何时使用 Karma?当你的应用程序有一个完善的测试套件,并希望确保测试在所有浏览器上通过时。

GitHub: 
当前版本: v0.13
网址: karma-runner.github.io

总结

最后感谢您花时间把这篇文章阅读完。上面介绍的内容就是我自己在手淘过年项目中采用到的部分前端技术,稍作整理与大家分享。如果其中有不对之处,烦请路过的大婶斧正。如果您在自己的项目中将采用上述提到的一些技术方案,踩到任何坑也欢迎一起探讨。

1 赞 4 收藏 1 评论

图片 9

本文由金沙澳门官网网址发布于金沙澳门官网网址,转载请注明出处:前端框架,借助响应式图片来改进网站图片显示

关键词:

上一篇:前端常见跨域技术方案,js完毕原生js拖拽效果及

下一篇:没有了