• 酷炫的响应式布局


    在css文件中可以添加筛选条件,告诉css在何种条件下用何种css代码,这可以用来实现响应式布局。

    实现途径有两种,一种是通过控制引入的css文件来实现:

    <link type="text/css" rel="stylesheet" href="a.css" media="screen and (min-400px)" />

    media是条件筛选语句,screen表示媒体类型,and表示并且,min-400px表示屏幕大于等于400px的时候引入a.css。

    又如

    <link type="text/css" rel="stylesheet" href="b.css" media="screen and (max-800px) and (min-400px)" />

    表示屏宽在400px和800px之间时引入b.css

    媒体类型css2中给出了十种,screen表示彩色电脑屏幕,具体可见http://www.w3.org/TR/CSS2/media.html#media-types,列举如下:

    all 所有设备

    aural 听觉设备

    braille 点字触觉设备

    handle 便携设备,如手机,平板电脑

    print 打印预览图等

    projection 投影设备

    screen 显示器、笔记本等

    tty 如打字机等终端设备

    tv 电视机等

    embossed 盲文打印机

    and表示条件关系,表示并且,另外还有not(排除某种设备),only(限定某种设备)

    第二种方法是在css文件中写入,关键字是@media,@media之后为条件选择语句,例如:

    @media (min-400px) and (max-800px){

        .left{

            float:left;

         }

    }

    表示在屏宽介于400px和800px之间时.left有float:left的属性。

    另附demo:

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="jquery-1.11.1.js"></script>
        <style>
            .left{
                background: lightcoral;
            }
            .right{
                background: lightgoldenrodyellow;
            }
            .middle{
                background: lightsalmon;
            }
            @media (min-980px) {
                .left{
                    float:left;
                    width: 33%;
                    height: 600px;
                }
                .right{
                    float:left;
                    width: 33%;
                    height: 600px;
                }
                .middle{
                    float:left;
                    width: 33%;
                    height: 600px;
                }
            }
            @media (max-980px) and (min- 600px) {
                .left, .middle{
                    float:left;
                    width: 50%;
                    height: 600px;
                }
                .right{
                    width: 100%;
                    height: 600px;
                    float: left;
                }
            }
            @media (max- 600px){
                .left, .middle, .right{
                    width: 100%;
                    float: left;
                    height: 200px;
                }
            }
        </style>
    </head>
    <body>
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
    </body>
    
    </html>

    最后,感谢http://www.cnblogs.com/mofish/archive/2012/05/23/2515218.html 作者的详细讲解!

  • 相关阅读:
    第20届国际生物信息学会议(InCoB 2021)将于11月6日至8日 中国云南省昆明市
    DNN整合基因组谱
    linux入门篇:查看系统用户信息,以及修改用户密码
    Python-接口开发入门
    Ant design vue 表格设置defaultExpandAllRows无效
    laravel-mix + antdv 国际化处理 cdn引入
    已知IP地址,如何计算其子网掩码,默认网关地址,网络地址等。
    GitLab 在线合并解决冲突后反向合并的问题
    Redisson 分布式锁实战与 watch dog 机制解读
    linux 部署tomcat
  • 原文地址:https://www.cnblogs.com/it-snail/p/3935694.html
Copyright © 2020-2023  润新知