css clip属性剪裁元素

几乎忘了clip这个东西,很少用,但要用起来很好用^ ^。

解决溢出问题,习惯用标签把图片包起来,设定宽高,overflow hidden。

可是有一次,程序员同学完成开发后才知道需要图片剪裁,而那些图片外层木有加标签。要用overflow hidden的话,得要找忙碌的程序员同学修改html代码,还是不要了吧,不是有clip的吗?

<code>clip:rect(top,right,bottom,left)</code>

clip 的唯一合法形状值rect(left,right,bottom,left),元素必须为绝对定位(position:absolute)方能有效。

剪裁一张图片:

<code>img
{
position:absolute;
clip:rect(35px,260px,255px,95px);
}</code>

top, right, bottom, left 值参照下图,对号入座:

clip

浏览器支持情况:http://caniuse.com/#search=clip

去w3school试验一下:http://www.w3school.com.cn/tiy/t.asp?f=csse_clip

搜索框(Search)语音搜索

让搜索框多出一个话筒图标,实现语音搜索。

search

在input标签中加入x-webkit-speech即可。

<input type="text" class="" name="" id="" x-webkit-speech>

限制语音种类:

<input type="text" class="" name="" id="" x-webkit-speech lang="zh-CN">

去掉语音无意义词:

<input type="text" class="text" name="value_2" id="value_2" x-webkit-speech x-webkit-grammar="bUIltin:search">

以上办法只适用于webkit浏览器,并且html无法通过W3C验证 T T

js判断移动设备类型

media query根据屏幕尺寸显示相应css,当需求不止是需要判断用户的屏幕是否适合手机或平板的尺寸(因为有可能用户缩小浏览器进行浏览),而需要确切知道用户是否从移动端进入并执行相应动作时,可以用以下js进行简单判断:

 

$(document).ready(function () {
    var isMobile = {
        Android: function () {
            return navigator.userAgent.match(/Android/i) ? true : false;
        },
        BlackBerry: function () {
            return navigator.userAgent.match(/BlackBerry/i) ? true : false;
        },
        iOS: function () {
            return navigator.userAgent.match(/iPhone|iPad|iPod/i) ? true : false;
        },
        Windows: function () {
            return navigator.userAgent.match(/IEMobile/i) ? true : false;
        },
        any: function () {
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
        }
    };
    if (isMobile.any()) { //判断是否为android,BlackBerry,ios,windows
        //要执行的代码
    }
});

Less中的嵌套,混合,带参数混合,运算

Less如其名,是让css的繁琐编码变less的利器。一些基础用法便能解决项目中的多数问题。

1. 嵌套

以a标签为例,通常需要定义a标签及其hover,focus的样式。

css:

a{color:#000;}
a:hover{color:#fff;}
a:focus{color:#ff0000;}

真正的项目中,a标签或许拥有一个类名,并且这个类名较长。

于是复制粘贴类名->写样式->再粘贴类名->加上:hover->写入样式->再粘贴类名->加上focus->写入样式。

或者再有visited样式,接着复制。。。而Less不需要我们这样做。

Less:

a{
  color:#000;
  &amp;:hover{
    color:#fff;
  }
  &amp;:focus{
    color:#ff0000;
  }
}

只需要&:hover, &:focus,不管类名是长是短,是好是坏,再也不用复制它了!”&”是链接符:

有“&”:

a{
  &amp;.tag{
    color:#fff;
  }
}

编译为css(类名为tag的a标签):

a.tag{
  color:#fff;
}

无“&”:

a{
  .tag{
    color:#fff;
  }
}

编译为css(a标签下面的类名为tag的标签):

a .tag{
  color:#fff;
}

2. 混合

定义一个class,里面包含样式代码,如:

.filter{
    filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h3{
   color:red;
   .filter;
}

编译为css:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}

3. 多参数混合

像上面的混合,可以在其他标签同样调用.filter。但上例的透明度值为80%,而其他地方调用的时候需要改变这个值而其他不变,就需要将值以参数形式传入。

.filter(@percent: 80, @float:0.8){
    filter:alpha(opacity=@percent);
    -moz-opacity:@float;
    -khtml-opacity: @float;
    opacity: @float;
}
h3{
    color:red;
    .filter;
}
h4{
    color:blue;
    .filter(50,0.5);
}

h4中,将透明度的值以变量的形式传入。编译为css如下:

h3{
   color:red;
   filter:alpha(opacity=80);
    -moz-opacity:0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}
h4{
   color:blue;
   filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
}

无需复制长串css,随意更改参数,随意调用吧^ ^

4.运算

响应式设计中常常需要计算百分比用于大小、定位,Emmet能够帮助计算,但只能保留最多两位小数,并且需要快捷键把结果计算出来,必要的时候手动改成百分比。Less只需写好表达式,编译时会计算结果,于是再也不用关心结果是多少。

div{
   width:550/810;
}

这样的结果是:0.6790123456790124。可是计算宽度,肿么可以用小数点咧??

于是(参考:http://lesscss.org/functions/#math-functions-percentage

div{
   width:percentage(550/810);
}

结果为67.90123456790124%。正是我想要的!够精确!

 

Less中国官网:http://lesscss.net/article/home.html

 

初识yeoman

最近写Less,写着写着发现重复性的、繁琐的工作越来越多,less找软件编译,图片找软件压缩,文件找地方合并。。。于是搜索有一些前端自动化开发的工具,试了几天Grunt,几行命令一切搞定,果然是提高效率,节省体力的神器。

Grunt,一个javascript任务运行工具,可以帮助编译less,sass,压缩图片,合并js文件等等等等。现在有很多介绍Grunt的文章,比如: Grunt 入门教程一:开始使用Grunt(翻译自官方教程)Grunt教程——Gurnt任务的配置。当初接触的时候,也是这些文章一篇篇读下来的。

Grunt有很多实用插件,根据项目需要,其中的contrib-less、contrib-imagemin用得最多,因为写Less,contrib-less能迅速帮助编译并且压缩,再也不需要把编译软件打开,再把less文件选中然后点击编译了。当然,这还是小事,一个项目通常五六个到十多个页面,每次写less,html里面要写上style.less,并且加入编译less的js,可是less编译成css后,还得手动把html里面的style.less改成style.css。当然,DW里面批量修改,没问题,可是真心觉得活干多了!怎么办呢?yeoman!!

由于基础不好,yeoman也是研究了数个星期才弄到可以顺利开展项目。yeoman,前端开发自动化流程的利器,别的不说,至少能解决自己目前项目的所需。

前端项目可以更简单—Yeoman入门指南(1)这篇文章真心不错,不仅介绍了yeoman是什么,还有分享了安装教程。于是,我也想要分享一下自己的使用心得,因为刚开始时遇到真心不明白的问题。

1. “Yeoman其实是三个工具的集合:YOGRUNTBOWER” –前端项目可以更简单—Yeoman入门指南(1)

所以,要安装yo、grunt-cli、bower。在安装grunt-cli之前,先要安装node.js。因为Grunt和Grunt的插件都是通过Node.js的包管理器npm来安装和管理的。

下载安装好node.js后,可以查看node.js版本,

按住Win+R,输入命令:node -v

node

2. 接下来用npm安装yo、grunt-cli、bower。

命令:npm install -g yo grunt-cli bower

看到下面的提示,那就安装成功了:

yo

3. 上面的完成之后就可以安装工程模板。

webapp模板是基于sass的,由于个人是Less使用者,所以拿lessapp举例。

安装lessapp模板,输入命令: npm install -g generator-lessapp

less

 

完成!以上命令全部在根目录运行。

4. 模板安装好以后,需要进入项目目录(输入命令:cd “项目路径”),为你的项目创建一个less app模板。

项目目录而不是根目录下,输入命令:yo lessapp

选择项目中要用的工具、框架:

lessapp

去到项目文件夹,可以看到创建好的less app模板:

folder

终于完成啦!!看看是否成功,输入命令:grunt server,于是浏览器会自动弹出一个欢迎界面。

可是。。可是。。。为什么弹出来的页面没有样式!!百思不得其解啊!

后来才发现,在app这个文件夹下,应该有一个名为bower_components的文件夹,里面有bootstrap、jquery、modernizr(如果你勾选了的话)文件,而我的文件夹里面并没有!怎么回事呢?

在根目录下输入命令 bower -v,版本号为1.3.1,说明bower已经安装成功,可是它并没有为我安装bower_components文件。再用bower安装font-awesome试试,进入项目目录:bower install font-awesome,出现如下提示:

bower ENOGIT git is not installed or not in the PATH

原来如果用windows安装bower时,必须要正确安装msysgit,参考:A note for windows users

安装msysgit后,再一次 yo lessapp,查看app文件夹,如下:

app

输入命令 grunt server,欢迎界面有样式了!

welcome

立即进入coding状态!

 

参考:

Grunt:任务自动管理工具 

前端项目可以更简单—Yeoman入门指南(1)

Yeoman:Web 应用开发流程与工具

【Yeoman】热部署web前端开发环境

如何在 Windows 平台安裝與使用 Yeoman 1.0 相關工具

前端工程构建工具——Yeoman

Yeoman:强大的web构建工具

javascript 案例二(网页换肤)

今日案例,一个简单的网页换肤,即切换样式表。经过上一修改元素样式的案例,这个写得更为轻松了。

css:

<style>
#container{text-align:center;color: #333}
#nav li{display: inline-block; padding: 8px 20px;margin: 0 10px;cursor: pointer;border-radius: 10px;}
.green{background-color: #16977d;}
.blue{background-color: #3c999c;}
.white{background-color: #f4f4f4;}
.content{margin-top: 100px;font-size: 34px}
</style>

分别写了三个样式表:

green.css, blue.css, white.css

html:

<div id=”container”>
<ul id=”nav”>
<li class=”green”>Green</li>
<li class=”blue”>Blue</li>
<li class=”white”>White</li>
</ul>
<h1 class=”content”>Here is test page</h1>
</div>

js:

var themeList = [‘green’,’blue’,’white’]; //将样式表的名称写在数组里
var tarObj=document.getElementById(‘stylefile’); //获得页面中的样式表
var navName=document.getElementById(‘nav’);
var navList=navName.childNodes;//获得点击对象
window.onload = actFun;
function actFun() {
for(var i=0; i<navList.length; i++){
navList[i].onclick=function(){
tarObj[‘href’]=’css/’+this.className+’.css’
}
}

}

查看DEMO

javascript 案例一(控制元素属性)

改变元素样式

目标是修改div的宽度,高度,背景色,显示隐藏。

html:
<style>
#btn{text-align:center;}
#btn input{margin:10px;}
#div1{width:100px;background-color: #000;height:100px;margin:20px auto;}
</style>

<div id=”container”>
<div id=”btn”>
<input type=”button” value=”width” id=”width”>
<input type=”button” value=”height” id=”height”>
<input type=”button” value=”backgroundcolor” id=”backgroundcolor”>
<input type=”button” value=”hide” id=”hide”>
<input type=”button” value=”reset” id=”reset”>
</div>
<div id=”div1″></div>
</div>
以下为黑暗中摸索的js:

//获得每个按钮

var mainDiv = document.getElementById(‘div1’)
,cWidth = document.getElementById(‘width’)
,cHeight = document.getElementById(‘height’)
,cColor = document.getElementById(‘backgroundcolor’)
,cHide = document.getElementById(‘hide’)
,cReset = document.getElementById(‘reset’);
window.onload = actFun;
//绑定每个按钮的点击事件
function actFun() {
cWidth.onclick = function(){
mainDiv.style.width=’150px’;
}
cHeight.onclick = function(){
mainDiv.style.height=’200px’;
}
cColor.onclick = function(){
mainDiv.style.backgroundColor=’#ff0000′;
}
cHide.onclick = function(){
mainDiv.style.display=’none’;
}
cReset.onclick = function(){
mainDiv.style.width=’100px’;
mainDiv.style.height=’100px’;
mainDiv.style.backgroundColor=’#000′;
mainDiv.style.display=’block’;
}
}

很显然,如果再添加五个要修改的样式,还得再给5个按钮绑定事件。处于还没入门,刚找到门缝的我,也只能写成这样。

于是,借鉴别人的代码,重新写了一遍:

//既然要给按钮绑定事件,并且做的同一件事都是修改样式,那么就把它写成一个函数,若再需要绑定事件,则无需再写。

function actFun(tar,pro,value){
tar.style[pro]=value;
}
window.onload = function(){
var getButton=document.getElementsByTagName(‘input’);//获得所有按钮
var getTar=document.getElementById(‘div1’);//获得要修改的元素
var proArr=[‘width’,’height’,’background’,’display’,’display’];//把要修改的属性放在数组
var tarArr=[‘150px’,’200px’,’#ff0000′,’none’,’block’];//修改的值放在一起
for(var i=0; i<getButton.length; i++){//将按钮循环一遍
getButton[i].index=i;
getButton[i].onclick=function(){
if(this.index == getButton.length-1){
getTar.style.cssText=””;//如果是最后一个按钮,即reset,就把样式清除掉
};
actFun(getTar,proArr[this.index],tarArr[this.index]);//调用函数
}
}
}

查看DEMO

虽然很简单,很基础,但偶还是得花更多的时间去理解和练习并且掌握好它(怀着一颗迷茫又敬畏的心),原因你懂的。

 

原生javascript实现星级评分

作为资深菜鸟一枚,对javascript表示无力掌控,但自始至终坚定信念,自强不息,挖粪涂墙。

自知网络已有无数星级评分之案例教程,但星级评分对我来说,就如同Hello world一样,简约、经典、永恒,是入门的必备案例。在最近奋斗的途中,我也写了一小段javascript用于实现简单的星级评分。

基本思路:星级评分只做一件事,就是无论鼠标划过或点击某颗星星,就点亮这颗星星及之前的星星,并熄灭这颗星星之后的星星。

代码如下:

HTML:

span即每颗星星,共10颗。

<div id=”star”>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>

CSS:

顺便练习css3,于是用css写星星的形状。

#star{
text-align: center;
padding-top: 30px;
}
#star span{
margin: 50px 0;
position: relative;
display: inline-block;
color: #999;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
-o-transform: rotate(35deg);
}
#star span:before {
border-bottom: 30px solid #999;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position: absolute;
height: 0;
width: 0;
top: -18px;
left: -23px;
display: block;
content:”;
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
#star span:after {
position: absolute;
display: block;
color: #666;
top: 3px;
left: -34px;
width: 0px;
height: 0px;
border-right: 30px solid transparent;
border-bottom: 20px solid #999;
border-left: 30px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content:”;
}

/*用于点亮星星的class名为rated*/
#star span.rated,
#star span.rated:before,
#star span.rated:after
{
color:#ff0000;
border-bottom-color:#ff0000;
}

javascript隆重出场:

var starGroup = document.getElementById(‘star’).children,
clickIndex; //定义一个全局变量用于储存被点击星星的索引值

window.onload = starFunc;

function starFunc() {
for (var i = 0; i < starGroup.length; i++) {//将每颗星星循环出来
starGroup[i].onmouseover = starHover;//绑定鼠标划到星星上的事件
starGroup[i].onclick = starClick;//绑定点击星星事件
starGroup[i].onmouseout = starOut;//绑定鼠标移出星星事件
starGroup[i].index = i;//获得每颗星星的索引
};
}

function starHover() {
var curIndex = this.index;//鼠标划过星星时,获得当前星星索引值
starLight(curIndex);//传入点亮星星的函数,从而执行点亮和熄灭动作
}

function starClick() {
var curIndex = this.index;//获得当前被点击星星的索引值
starLight(curIndex);//传入点亮星星的函数
clickIndex = curIndex;//将被点击星星的索引值记录下来
}

function starOut() {
//如果点击事件发生,被点击星星索引传入点亮星星函数,鼠标划出时将恢复点击时的状态,如果点击事件没有发生,星星将全部熄灭
starLight(clickIndex);
}

function starLight(index) {//点亮星星函数,当mouse over和点击事件发生时,将当前星星索引值传入,用以执行星星的点亮和熄灭动作
for (var i = 0; i < starGroup.length; i++) {
if (i <= index) {
starGroup[i].className = “rated”;//点亮星星
} else {
starGroup[i].className = “”;//熄灭星星
};
};
}

星级评分完成!

当然,这样的星级评分并不够完整和严谨,仅作学习之用。

查看在线DEMO

 

 

让滚动的内容在IOS上滚动动作更平滑

默认情况下,网页在IOS上的scroll滚动就像在冰面上推冰球,轻轻一推,它会自动滚动并且减慢速度直至停止。而网页内容中同样需要将溢出内容以scroll的方式展示,直接使用overflow:auto并不能达到同样的效果,用手指触摸滑动时会变得生涩卡壳。于是需要给元素加上这样一个特殊属性:

-webkit-overflow-scrolling: touch;

例:

HTML:

<div class=”touch”>
<h3>Smooth</h3>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>

CSS:

.touch{
width: 300px;
height: 200px;

overflow-y: scroll; /* 重点:必须是scroll而不是auto */
-webkit-overflow-scrolling: touch;/*关键*/
}

 

原文链接(查看案例):http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

关于响应式设计

响应式网页设计responsive web design(RWD)的流行已经有挺长一段时间了,过去的2012年,响应式设计已深入人心,2013年仍是网页设计的一大热门并且是将来的一种趋势。当用移动设备浏览网页看到的是普通电脑缩小版的网页并且无法使用阅读器时,多数人通常的做法是直接离开。关于响应式设计研究的文章不尽其数,比如前端观察的响应式网页设计这篇文章,是我认识响应式设计的第一篇文章,介绍得比较全面。Web designer wall 三步实现响应式设计教你快速入门。

由于工作需要,自己也做了一些响应式的web app,公司的开发模式属于快速开发,于是2012年中旬开始认识响应式设计的我目前对它的研究并不深,只是在工作中碰到不少问题,面对这些问题,google是个不错的选择,不知是否搜索技巧有问题,总觉得找的答案并不恰恰就是我想要的,于是决定把一些问题和解决方案及从别人那里学到的有用的小经验分享出来,希望能获得更大的进步。

实现响应式的网页,我主要依赖于css3的Media Queries, 虽说一些人痛恨Media Queries, 也有人提出,响应式设计不应该只是Media Queries(还有图片处理技术<img srcset>和<picture>),但不得不承认,这几乎是我展开工作的全部。

一般响应式网页设计会有一个基础html框架: header, navigation, content, aside, footer. 作为响应式设计,其核心是根据屏幕尺寸保留网页主要内容(content),相应隐藏其他非重要内容,以保证网站内容的可读性(个人意见)。而一个web app,设计感更浓重,图片更多更大,其响应的难度要远远大于一个博客式的website。

1.字体。

web app要求内容的趣味性,设计师通常会使用一些与设计风格相匹配的字形(而这些字体通常不是google web font),如果目标用户非移动用户,这个可以用图片来解决(css sprite),但如果需要一个responsive的web app,这是个非常糟糕的选择。css sprite对其背景定位和大小尺寸需要相当准确,无法适应对尺寸要求极度宽松的响应式,并且多而大的图片对加载速度影响很大。因此,建议使用google web font(上面有很多漂亮的字形,限英文)或系统默认字体。当然也有嵌入字体只说,但如果是中文,可要考虑字库大小哦~

对于字号,应至少设置为14px,通常网页上的12px在移动设备上浏览还是有些吃力的。

2.图片。

对于背景图的设计,应尽量使用可以平铺的小图案,或者规律的渐变,这些渐变可以用css3来实现,也可以使用那些即使被切掉也无关紧要的图片,以减少屏幕尺寸变换时对图片的频繁切换。

3.导航。

导航在引导用户浏览网站或者app中起着非常重要的作用,除了导航数量少,字数简短的情况下,一般导航在电脑版切换到移动版时,需要更适合的UI。这里教你如何创建合适的响应式导航。

4.移动应用的特性:touch。

不同于website, web app 在手机上的需求更高,例如浏览一个图片slider,网页上通常通过点击左右键来切换图片,而在手机上,左右滑动的手势更符合用户习惯,因此可以选择一些响应式的jquery插件,例如FlexSlider

5.禁止缩放。

<meta content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ name=”viewport”>

width                      – viewport的宽度

height                     – viewport的高度

initial-scale          – 初始的缩放比例

minimum-scale  – 允许用户缩放到的最小比例

maximum-scale – 允许用户缩放到的最大比例

user-scalable       – 用户是否可以手动缩放

6.IOS中Safari允许全屏浏览。

<meta content=”yes” name=”apple-mobile-web-app-capable”>

7.IOS中Safari顶端状态条样式

<meta content=”black” name=”apple-mobile-web-app-status-bar-style”>

content=”black”即设置为黑色。

8.忽略将数字变为电话号码

<meta content=”telephone=no” name=”format-detection”>

9.IOS中Safari设置保存到桌面图标

<link rel=”apple-touch-icon” href=”custom_icon.png”>

添加到主屏幕UI:图标参考:

图标会自动添加高亮效果,如果不需要,可以在plist中明确指定UIPrerenderedIcon的键值去掉

57像素的普屏的iPhone图标,图标圆角的半径为10像素

114像素Retina屏的iPhone图标,图标圆角的半径为20像素

512像素的用于iTunes/App Store的图标,在实际显示是会被缩放到175像素进行显示(但提交是不可以提交175像素)

72像素的普屏iPad图标,图标圆角的半径为13像素

144像素Retina屏iPad图标,图标圆角的半径为26像素

50像素iPad的Spotlight搜索图标的最终视觉大小是48像素,原因是iOS会对图标的每个边去掉1个像素,添加阴影效果

100像素Retina屏的Spotlight搜索图标的最终视觉大小是96像素,原因同上,这次是每边减2个像素

10.关闭Input键盘默认首字母大写

autocapitalize=”off”

例如: <input type=”text” value=“” name=”” autocapitalize=”off” />

根据需要设置,因为有一些输入框还是需要首字母大写的,如姓名。

11.去除Android平台中对邮箱地址的识别

<meta content=”email=no” name=”format-detection” />

12.-webkit-box-sizing

在 移动设备开发过程中我们通常会对文本框定义为宽度100%,将其定义为块级元 素以实现全屏自适应的样式,但此时你会发现,该元素的边框(左右)各1个像 素会溢了文档,导致出现横向滚动条,为解决这一问题,我们可以为其添加一个特殊 的样式-webkit-box-sizing:border-box;用来指定该盒子的大小包括边框的宽度。

13.禁止iphone字体大小调整

html { -webkit-text-size-adjust: none; }

14.图片在retina高清屏下的显示

为了保证图片在retina下的高清显示,需要准备一张原始图和一个比原图大一倍的图。

 image{ background-image:url( image_url );/*用于普通屏幕*/
/* ———— Retina ———— */
@media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */
only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */
only screen and (min-resolution: 240dpi),                    /* 标准 */
only screen and (min-resolution: 2dppx)                      /* 标准 */
{
image{
background-image:url( image_url );
background-size: 50% 50%;
}
}
另外,无图片(no images)是开发的趋势,圆形,三角,渐变,阴影,如果是移动应用开发,请把它们变成css代码,因为它的灵活性足够适应不同尺寸的屏幕并且图像质量不会下降。