zoukankan      html  css  js  c++  java
  • CSS响应式网站开发

    <html>

    <head>

    //当设备屏幕最大宽度小于1024px时加载如下CSS内容

    @media screen and (max- 1024px){
                body{
                    1024px;
                }
                #main{
                 background-image:url(img/bg1.jpg);
                }
            }

    //all代表所有类型的设备

    @media all and (max- 1024px){
                body{
                    1024px;
                }
                #main{
                 background-image:url(img/bg1.jpg);
                }
            }

    //简写

    @media and (max- 1024px){
                body{
                    1024px;
                }
                #main{
                 background-image:url(img/bg1.jpg);
                }
            }

    //可以使用and, or, not进行运算

    //判断方向是否为纵向

    @media and (max- 1024px) and (orientation:portrait){
                body{
                    1024px;
                }
                #main{
                 background-image:url(img/bg1.jpg);
                }
            }

    </head>

    <body>

    <div id=”main”>

    </div>

    </body>

    </html>

    记录下来,留待后查,也方便别人。

    联系我:renhanlinbsl@163.com

    2016.7.25

    11:38

  • 相关阅读:
    .NET:CLR via C# A Brief Look at Metadata
    在容器中运行 Jenkins pipeline 任务
    Azure AI 服务之文本翻译
    linux journalctl 命令
    容器化的 DevOps 工作流
    System V IPC 之消息队列
    System V IPC 之信号量
    System V IPC 之共享内存
    减小容器镜像的三板斧
    linux chroot 命令
  • 原文地址:https://www.cnblogs.com/ives/p/cssMedia.html
Copyright © 2011-2022 走看看