快捷搜索:

金沙第一娱乐娱城官网

当前位置:金沙第一娱乐娱城官网 > 金沙第一娱乐娱城官网 > 不必考虑各浏览器兼容前缀,响应式页面图片处

不必考虑各浏览器兼容前缀,响应式页面图片处

来源:http://www.dlksamusic.com 作者:金沙第一娱乐娱城官网 时间:2020-04-15 22:03

响应式布局,已经慢慢开始普遍了,但是响应式页面的性能问题就接踵而来了。今天就“响应式页面图片处理”来分析下,如何使得我们的响应式页面在PC和移动端快速的加载图片和修饰背景图,我们直接来点干货,从一些案例下手:

网页制作web前端之家文章简介:媒体查询与http请求

简介:

使用gulp-autoprefixer根据设置浏览器版本自动处理浏览器前缀。使用她我们可以很潇洒地写代码,不必考虑各浏览器兼容前缀。【特别是开发移动端页面时,就能充分体现它的优势。例如兼容性不太好的flex布局。】

测试一:img标签

Jason Grigsby发表了篇文章,《CSS Media Query for Mobile is Fool’s Gold》对媒体查询吐槽,大意是在移动设备上使用媒体查询会造成很多资源的浪费——浏览器请求到很多用不到的图片等资源,然后写了一些测试用例测试一些可用方法。然后Tim Kadlec写了篇《Media Query & Asset Downloading Results》,用js自动化的测试了Jason Grigsby的用例。

1、安装nodejs/全局安装gulp/项目安装gulp/创建package.json和gulpfile.js文件

1.1、gulp基本使用还未掌握?请参看: gulp详细入门教程

1.2、本示例目录结构如下:

图片 1

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下:

本文主要整理自Tim的这篇文章。我们来看看到底会不会浪费资源,并寻找下最优的方案。

2、本地安装gulp-autoprefixer

2.1、github:

2.2、安装:命令提示符执行 cnpm install gulp-autoprefixer --save-dev

2.3、注意:没有安装cnpm请使用 npm install gulp-autoprefixer --save-dev。 什么是cnpm,如何安装?

2.4、说明:--save-dev 保存配置信息至 package.json 的 devDependencies 节点。为什么要保存至package.json?

图片 2

@mediaalland{#test1{display:none;}}

测试一:img标签

3、配置gulpfile.js

3.1、基本使用

JavaScript

 

var gulp = require('gulp'),
    autoprefixer = require('gulp-autoprefixer');

gulp.task('testAutoFx', function () {
    gulp.src('src/css/index.css')
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'Android >= 4.0'],
            cascade: true, //是否美化属性值 默认:true 像这样:
            //-webkit-transform: rotate(45deg);
            //        transform: rotate(45deg);
            remove:true //是否去掉不必要的前缀 默认:true
        }))
        .pipe(gulp.dest('dist/css'));
});

 

3.2、gulp-autoprefixer的browsers参数详解 (传送门):

● last 2 versions: 主流浏览器的最新两个版本

● last 1 Chrome versions: 谷歌浏览器的最新版本

● last 2 Explorer versions: IE的最新两个版本

● last 3 Safari versions: 苹果浏览器最新三个版本

● Firefox >= 20: 火狐浏览器的版本大于或等于20

● iOS 7: IOS7版本

● Firefox ESR: 最新ESR版本的火狐

● > 5%: 全球统计有超过5%的使用率

3.3、发现上面规律了吗,相信这不难看出,接下来说说各浏览器的标识:

Android for Android WebView.

BlackBerry or bb for Blackberry browser.

Chrome for Google Chrome.

Firefox or ff for Mozilla Firefox.

Explorer or ie for Internet Explorer.

iOS or ios_saf for iOS Safari.

Opera for Opera.

Safari for desktop Safari.

OperaMobile or op_mob for Opera Mobile.

OperaMini or op_mini for Opera Mini.

ChromeAndroid or and_chr

FirefoxAndroid or and_ff for Firefox for Android.

ExplorerMobile or ie_mob for Internet Explorer Mobile.

测试结果

本测试尝试通过对img标签的父级元素使用display:none来隐藏图片。HTML和CSS代码如下:

4、执行任务

4.1、命令提示符执行:gulp testAutoFx

如果有一种应该100%避免的隐藏图片的方法,那就是display:none。它基本上是没有用的。貌似Opera Mobile和Opera mini不会下载图片,而其它浏览器都会下载。Opera可以比较好的控制资源的下载,对于用户看不到的内容,它不会预先下载。

123

123

@media all and  {#test1 { display:none; }}

5、结束语

5.1、本文有任何错误,或有任何疑问,欢迎留言说明。

 

浏览器

测试结果

原文地址:

请求图片

如果有一种应该100%避免的隐藏图片的方法,那就是display:none。它基本上是没有用的。貌似Opera Mobile和Opera mini不会下载图片,而其它浏览器都会下载。Opera可以比较好的控制资源的下载,对于用户看不到的内容,它不会预先下载。

Android 2.1+请求Blackberry +请求Chrome Mobile请求Fennec 请求Firefox 请求IE请求iOS 请求Opera 请求Opera Mini 不请求Opera Mobile 不请求RockMelt请求Safari 请求结论测试二:背景图片display:none

浏览器

在本例中,div被设置了background-image。如果屏幕宽度小于600px,div就被设置为display:none。HTML和CSS代码如下:

请求图片

#test2{background-image:url('images/test2.png');width:200px;height:75px;}@mediaalland{#test2{display:none;}}

Android 2.1+ 请求 Blackberry + 请求 Chrome Mobile 请求 Fennec 请求 Firefox 请求 IE 请求 iOS 请求 Kindle 请求 Opera Mini 不请求 Opera Mobile 不请求 RockMelt 请求 Safari 请求 结论测试二:背景图片display:none

测试结果

在本例中,div被设置了background-image。如果屏幕宽度小于600px,div就被设置为display:none。HTML和CSS代码如下:

结果和测试一一样:除了Opera mini和Opera Mobile和Firefox,所有浏览器都会下载图片。

1

12345678

#test2 {background-image:url;width:200px;height:75px;}@media all and  {#test2 {display:none;}}

浏览器

测试结果

请求图片

结果和测试一一样:除了Opera mini和Opera Mobile和Firefox,所有浏览器都会下载图片。

Android 2.1+请求Blackberry +请求Chrome Mobile请求Fennec 请求Firefox 不请求IE请求iOS 请求Opera 请求Opera Mini 不请求Opera Mobile 不请求RockMelt请求Safari 请求Silk请求结论

浏览器

同样:不要这样做。不过,像后面其它的测试,有其它的方法可以隐藏背景图片同时避免多余请求。

请求图片

测试三:背景图片的父级元素被设置为display:none

Android 2.1+ 请求 Blackberry + 请求 Chrome Mobile 请求 Fennec 请求 Firefox 不请求 IE 请求 iOS 请求 Kindle 请求 Opera Mini 不请求 Opera Mobile 不请求 RockMelt 请求 Safari 请求 Silk 请求 结论

本测试中,对一个div标签设置背景图片,然后对其父元素在浏览器宽度小于600px时设置display:none。HTML和CSS代码如下:

同样:不要这样做。不过,像后面其它的测试,有其它的方法可以隐藏背景图片同时避免多余请求。

#test3div{background-image:url('images/test3.png');width:200px;height:75px;}@mediaalland{#test3{display:none;}}

测试三:背景图片的父级元素被设置为display:none

测试结果

本测试中,对一个div标签设置背景图片,然后对其父元素在浏览器宽度小于600px时设置display:none。HTML和CSS代码如下:

表面上,这个测试貌似和测试二没太明显的区别,但是结论是这个方法是比较靠谱的。。。

123

12345678910

#test3 div {background-image:url;width:200px;height:75px;}@media all and  {#test3 {display:none;}}

本文由金沙第一娱乐娱城官网发布于金沙第一娱乐娱城官网,转载请注明出处:不必考虑各浏览器兼容前缀,响应式页面图片处

关键词: