Quote

响应式设计移动优先原则(mobile first)

起初,响应式设计以桌面版为重点,并自适应小屏幕尺寸,如缩小图片,隐藏不必要内容。而最近一种创新的移动优先的响应式设计方式开始悄然流行。

相比从大的、臃肿的桌面版开始设计并不断缩小、丢弃内容以适应小屏幕设备,从移动优先显得更有意义。移动优先有个很重要的优势,就是你可以将注意力集中在网页的核心内容,也就是内容优先,无需将精力分散在侧边栏那些不是必不可少的元素上。

“At first, responsive design was applied to existing desktop-centric websites to allow the layout to adapt to smaller screen sizes. But more recently it has been combined with another innovative approach called mobile first.

Rather then starting with the big, bloated desktop site and then scaling down for smaller devices, it makes more sense to start with the constraints of the small screen and then scale up for larger viewports. Using this approach, your layout grid, your large images and your media queries are applied on top of the pre-existing small-screen design. It’s taking progressive enhancement to the next level.

One of the great advantages of the mobile-first approach is that it forces you to really focus on the core content of your page. It might be more accurate to think of this as a content-first approach. You don’t have the luxury of sidebars or multiple columns to fill up with content that’s just nice to have rather than essential.”

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