zoukankan      html  css  js  c++  java
  • css 响应式布局

    方法一: 用meta标签

    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">

    贴上完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
        <title>Document</title>
        <style>
            body {
                background: #abcdef;
            }
        </style>
    </head>
    <body>
        
    </body>
    </html>
    View Code

    方法二: 用Media Query(rem,配合媒体查询)

    贴上完整代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            body {
                background: #abcdef;
            }
            @media screen and (max- 1024px) {
                html {
                    font-size: 20px;
                }
            }
            @media screen and (max- 768px) {
                html {
                    font-size: 16px;
                }
            }
            @media screen and (max- 375px) {
                html {
                    font-size: 12px;
                }
            }
            @media screen and (max- 320px) {
                html {
                    font-size: 10px;
                }
            }
            .main {
                font-size: 4rem;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="main">看我响应了!</div>
    </body>
    </html>
    View Code

    效果图:

    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    测试用例编写思路
    pipenv和virtualenv
    HTTP协议
    性能测试实践
    性能测试
    JS创建类和对象
    servlet的转发与重定向
    早晚得看算法
    安卓开始啦
    写于大三下开学前(即将休学)
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/10939260.html
Copyright © 2011-2022 走看看