zoukankan      html  css  js  c++  java
  • CSS 媒体查询

    使用媒体查询,容器宽度会随着窗口宽度的改变而改变

    没有缩放的效果

    缩放后的效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>媒体查询</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                height: 1200px;
                width: 100%;
                background: pink;
                margin: 0 auto;
            }
          /*媒体查询的条件也可以是and or:@media (min-758px) and (max-1000px) */
    @media (min- 768px) { /*这里的代码只有当(min- 768px)才会执行*/ .container{ width: 750px; } } @media (min- 992px) { /*这里的代码只有当(min- 992px)才会执行*/ .container{ width: 970px; } } @media (min- 1200px) { /*这里的代码只有当(min- 1200px)才会执行*/ .container{ width: 1170px; } } </style> </head> <body> <div class="container"></div> </body> </html>

  • 相关阅读:
    1869六度分离
    1162Eddy's picture
    hdu2544
    3549Flow Problem
    1272小希的迷宫
    2112HDU Today(Dijkstra)
    1878欧拉回路
    hdu1116Play on Words
    2112HDU Today(SPFA)
    在程序中动态创建视图
  • 原文地址:https://www.cnblogs.com/alex-xxc/p/9739331.html
Copyright © 2011-2022 走看看