zoukankan      html  css  js  c++  java
  • 移动端媒体查询

    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--屏幕宽度小于400px,就加载a1.css-->
    <link rel="stylesheet" href="a1.css" media="screen and (max-device-400px)">
    <!--屏幕宽度大于600px小于400px,就加载a2.css-->
    <link rel="stylesheet" href="a2.css" media="screen and (min-400px) and (max-device-600px)">
    <style>
    @media (max- 1500px) {
    body{
    background: red;
    font-size: 160px;
    }
    }
    @media (min- 700px) and (max- 1000px) {
    body{
    background: pink;
    font-size: 160px;
    }
    }
    @media (min- 350px) and (max- 700px) {
    body{
    background: black;
    font-size: 160px;
    }
    }
    /* 如果是横屏,背景将是浅蓝色 竖屏portrait*/
    @media only screen and (orientation: landscape) {
    body{
    background-color: lightblue;
    }
    }
    /*屏幕小于400px,显示小图*/
    body{
    background-image: url(img_smalltu.jpg);
    }
    /*屏幕大于等于400px,显示大图*/
    @media only screen and (min-400px) {
    body{
    background-image: url("img_tu.jpg");
    }
    }




    </style>
    </head>
    <body>
    <div class="box">haohao</div>
    </body>
  • 相关阅读:
    【BZOJ2329】括号修复(splay)
    连接数据库
    文件锁
    带进度条的输入流
    文件对话框
    使用Scanner来解析文件
    IO流(数据流
    IO流(随机流,数组内存流
    IO流文件字符输入输出流,缓冲流
    IO流(文件字节输入输出
  • 原文地址:https://www.cnblogs.com/zr123/p/8086200.html
Copyright © 2011-2022 走看看