马顿

立正,稍息。

© 马顿 | Powered by LOFTER

响应式设计的9个CSS技巧

1、取消下划线: a{ text-decoration:none; }

2、响应式视频

3、Rollover文本链接 :a:hover{color:blue;}

4、最大、最小宽度 

    .mainbody{

        width:960px;

        max-width:90%;

    }

    <!--使用IE7和IE9-->

    img{

        max-width:100%;

        height:auto;

    }

    <!--兼容IE8-->

    @media \0screen{

        img{ width:auto; }

    }

5、背景图片的设置

6、相对值: 包含布局的位置,字号(相对父容器),留白等。

7、突出边界(外框)

8、文本折行: .break-word{word-wrap:break-word;}

9、溢出(超出容器部分被隐藏):.container{overflow:hidden;}


评论
热度 ( 4 )