分类目录归档:移动web

创建高效media queries的七个好习惯

1. 内容决定转效点(Let content determine breakpoints)

从最小屏幕开始,逐渐扩大窗口,当效果丑陋不堪(like shit)时,此处就是breakpoint。

2. 把布局看作为增强行为(Treat layout as an enhancement)

作为移动优先的响应式设计策略的一部分,以移动优先的方式书写样式是非常重要的。样式代码更少、更简洁、更易维护。

/* Desktop-first styles: Avoid */
.column {
    float: left;
    width: 50%;
}

@media all and (max-width: 50em) {
    .column {
        float: none;
        width: auto;
    }
}
/* Mobile-first styles FTW */
@media all and (min-width: 50em) {
    .column {
        float: left;
        width: 50%;
    }
}

3. 使用主、次转效点(Use major and minor breakpoints)

  • 主转效点:效果显著变化,如一列变两列、三列。
  • 次转效点:某些特定元素的调整,或称为tweakpoint

使用Sass管理转效点

$bp-small : 24em;
$bp-small-2 : 29.75em;
$bp-small-3 : 39.8em;
$bp-med : 46.8em;
$bp-med-2 : 48em;
$bp-large : 50em;
$bp-large-2 : 54.5em;
$bp-xl : 60em;
$bp-xl-2 : 67em;

4. 使用相对单位(Use relative units)

media queries中使用相对单位,浏览器可以根据用户的缩放等级调整设计效果,避免出现横向滚动条,提供一个更加舒适和易于阅读的体验。

ems

5. 超越宽度(Go beyond width)

检测viewport width不是media queries的全部,可检测的媒体特性非常多,包括color, color index, aspect ratio, device aspect ratio, width, device width, height, device height, orientation, monochrome, resolution, scan, pixel-density等。

  • 使用pixel-density可以为视网膜屏或其他高分辨率屏幕有条件的提供大背景图片或icon sprites。
  • 使用height检测可用的屏幕高度,并相应的调整样式。
  • 使用orientation检测屏幕是处在横向还是竖向模式。

6. 条件装载(Use media queries for conditional loading)

7. 过犹不及(Don’t Go Overboard)

参考文献:

纯CSS实现响应式表格

先看DEMO

自从转岗至腾讯云后,项目中接触到大量的数据表格。多列数据表格在空间有限的手机屏幕下,难以完美呈现,需要做响应式处理。本文介绍一种使用纯CSS实现响应式表格的方法。

通常表格中的一行代表一条项目,每列代表项目的一个属性方面(即字段)。在屏幕空间充足的情况下,我们可以将表格的每列都完全显式在屏幕上,但在手机下,每列内容会拥挤不堪,甚至出现横向滚动条,用户快速了解每条项目基本情况的效率会大打折扣。

Snip20150407_5

Snip20150407_6

一种优化方法是:使用media queries监测屏幕viewport小于568px时,让单元格(td)独占一行,每行(tr)相互隔离,如同每条项目为一独立的表格,如下图:

Snip20150407_7

现在每条项目便于阅读了,但表头(th)与对应的单元格(td)隔离开了,单元格的具体意义难以理解。那么,隐藏掉表格的thead,单元格内容右对齐,在每个单元格前面插入对应的表头(th)即可解决这个问题,如下图:

Snip20150407_9

伪元素(:before)结合att()表达式(获取伪元素所依附元素的HTML属性值)可完成此任务。当然,我们首先要对每个单元格(td)元素改造:

Snip20150407_10

样式如下:

table {
    border: 1px solid #ccc;
    width: 100%;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
}

table tr {
    border: 1px solid #ddd;
    padding: 5px;
}

table th,
table td {
    padding: 10px;
    text-align: center;
}

table th {
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
}

/* <= 568px */
@media screen and (max-width: 35.5em) {
    table {
        border: 0;
    }
    table thead {
        display: none;
    }
    table tr {
        margin-bottom: 10px;
        display: block;
        border-bottom: 2px solid #ddd;
    }
    table td {
        display: block;
        text-align: right;
        font-size: 13px;
        border-bottom: 1px dotted #ccc;
    }
    table td:last-child {
        border-bottom: 0;
    }
    table td:before {
        content: attr(data-label);
        float: left;
        text-transform: uppercase;
        font-weight: bold;
    }
}

大功告成了吗?某些屏幕阅读器(如OSX 和iOS下voiceOver)可朗读伪类插入的内容,这 是否造成了过度提示,会不会影响屏幕阅读器用户的访问效率。而某些屏幕阅读器与浏览器的组合又不会朗读,如何优化呢?

参考资料:
Responsive Tables in Pure CSS

Retina显示屏下ICON优化方法

便于理解,先来了解几个名词:

  • dpi(dots per inch),每英寸的点数,用来测量任何设备的硬件分辨率。一个21”的屏幕可以拥有1680 X 1050 的分辨率,27”的屏幕也可以拥有相同的分辨率,那么大屏幕比小屏幕的dpi小。
  • dip(device independent pixels),设备独立像素,与160 dpi显示屏上的1px相等, 又称dp。
  • dppx(dots per ‘px’),每px单位上的点数。由于CSS英寸与CSS像素的固定比是1:96,那么1dppx=96dpi。
  • Device pixel ratio (DPR)是物理像素与CSS像素的比率。

方法一:media queries & background-size

查看demo

/*
** 注意:background-size的值是sprite.png的尺寸,而不是每个icon的尺寸
*/
.sprite-icon{
    background-image:url(sprite.png);
    background-size:98px 65px;       
}

/*
** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个
*/
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}

/* 
** 2x图片要是1x图片的准确2倍
** sprite中图标之间的间隙,也应是2倍
** 每个图标无需重新写background-position
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .sprite-icon{
        background-image:url(sprite@2x.png); 
    }  
}

方法二:background-image:img-set( url(a.png) 1x, url(a@2x.png) 2x )

媒体查询(media queries)已经可以解决高密度显示问题,为什么还需要image-set? 问的好。 使用image-set的两个主要好处:

  • 与媒体查询不同的是,image-set没有告诉浏览器使用哪个图片,而是提供了一些选项。我希望将来在低网速下使用高密度设备,能够告诉浏览器使用低分辨率图片。如果浏览器能够根据当前的网络状况智能地选择使用的图片,那就更好了。 媒体查询的问题是没有给浏览器任何自由裁决权,它明确的指明,如果像素密度大于1或者2,浏览器就使用特定的图片。 我知道,这只是理论上(更是“意淫“出来)的好处。如今支持“image-set”的浏览器只是简单将图片源与显示密度相匹配,并没有提供额外的功能。但我坚信,同一张图片需要不同分辨率时,让浏览器去选择合适的图片是方向。
  • CSS编码好处:将不同分辨率的图片源集中在一起。

查看demo

/* ** 注意: ** 图片要求:2x图片要是1x图片的准确2倍,sprite中图标之间的间隙也应是2倍 ** 无需写background-size,浏览器自动处理 ** */ 
.sprite-icon{ 
    background-image:url(sprite.png); 
    background-image: -webkit-image-set( url('sprite.png') 1x, url('sprite@2x.png') 2x ); 
}

/* ** 每个icon的background-positon只需写一次,即icon相对与1x图片的位置,在@2x图片中的位置也是这个 */ 
.icon-1{
     background-position:0 0; 
} 
.icon-2{ 
    background-position:-33px 0; 
} 
.icon-3{ 
    background-position:-66px 0; 
} 
.icon-4{ 
    background-position:0 -33px; 
} 
.icon-5{ 
    background-position:-33px -33px; 
} 
.icon-6{ 
    background-position:-66px -33px; 
}

方法三: media queries & background-size,适用于仅部分图标提供了2x图,且icon位置不对应,可能是由工具生成的sprite。

查看demo

.sprite-icon{
    background-image:url(more.png);
}
.icon-1{
    background-position:0 0;
}
.icon-2{
    background-position:-33px 0;
}
.icon-3{
    background-position:-66px 0;
}
.icon-4{
    background-position:0 -33px;
}
.icon-5{
    background-position:-33px -33px;
}
.icon-6{
    background-position:-66px -33px;
}
.icon-7{
    background-position:0 -66px;
}

/* 
** 每个icon的backgroud-size是2x图片的一半
** 每个icon的backgroud-position是相对与2x图片的位置除以2
*/
@media (min-resolution:2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio:2)  /* Safari & Android Browser */
{
    .icon-1{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:0 0;
    }
    .icon-2{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-33px 0;
    }
    .icon-3{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-66px 0;
    }
    .icon-4{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-99px -33px;
    }
    .icon-5{
        background-image:url(portion@2x.png); 
        background-size:197px 65px;
        background-position:-132px -33px;
    }
    .icon-6{
        background-image:url(portion@2x.png);
        background-size:197px 65px;
        background-position:-165px -33px;
    }

}

one-device-pixel border


2014-12-31更新:
截至到IOS8.1,safari仍不支持@supports
待safari支持@supports, 就可以利用0.5px了!


2014-7-25更新:
1. 修正dpr = 1.5 机器下四角边框的缩放比例;
2. 修正右边框(rBor)的transform-origin为100%, 100%;
3. 添加对 dpr = 3 机器的支持; 通过以下机器验证:小米1(dpr = 1.5)、SAMSUNG S3(dpr = 2)、NEXUS 5(dpr =3) 测试地址:

Snip20140726_16


移动web开发,总避免不了1设备像素边框的问题。本文参考了half-point css border in ios 一文。

理想的

div{
   border:1px solid black;
}

@media (-webkit-min-device-pixel-ratio: 2){
 div{
    border-width:0.5px;
 }
}

仅有 Firefox和Safari 8 (introduced in OS X Yosemite)支持。twitter有位哥们听到这个消息时,已经不知所云。

psb

现实的

原理简单介绍:content属性与:before 及:after 伪元素配合使用,来插入生成内容,即所需边框。使用transform scale方法将生成内容的边框(或高度或宽度),缩小至合适大小(如0.5倍)。另外,处理好transform-origin值至关重要,下图可以帮助你更好地理解origin值。 transform-15 查看代码或查看此gist,并奉上demo继续阅读one-device-pixel border