移动Web开发指南 6.移动web界面样式

2015-04-10 21:34:45:  
1. CSS3

    *属性选择器

        完全匹配  [id=article]{ color : red; }

        包含匹配  [id*=article]{ color : red; }

        首字母匹配  [id^=article]{ color : red; }

        尾字母匹配  [id$=article]{ color : red; }

    *伪类选择器

        before  元素标签 : before{ content : "插入内容"; }

        after  元素标签 : after{ content : "插入内容"; }

        li : first-child{ color : red; }  // 指定元素列表的第一个元素的样式

        li : last-child{ color : red; }  // 指定元素列表的最后一个元素的样式

        li : nth-child(2){ color : red; }  // 指定元素列表的第2个元素的样式

        li : nth-last-child(2){ color : red; }  // 指定元素列表的倒数第2个元素的样式

        li : nth-child(even){ color : red; }  // 指定偶数个元素

        li : nth-last-child(odd){ color : red; }  // 指定奇数个元

    2. Media Queries移动设备样式

    *viewport

        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalabel=0" />

    该代码主要是自定义虚拟窗口,并指定虚拟窗口的width宽度为device-width,初始缩放比例大小为1倍,同时不允许用户手动缩放。

    max-device-width指的是设备整个渲染区宽度(设备的实际宽度)


 *用法:

        1. <link rel="srtylesheet" media="screen and(min-width:600px) and (max-width:800px)" href="600-800.css" />

        2. @media screen and(min-width:600px){

                .demo{

                    backgroud-color : #ccc;

                }

            }

精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程