HTML问题

xuegaoxiansen 14天前 16

<!DOCTYPE html>
<html lang="zn-cn"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        
        .box {
            width: 100%;
            height: 100%;
        }
        
        .boxx {
            float: left;
            width: 30%;
            height: 0;
            padding-top: 30%;
            border: 1px solid red;
            margin-left: 5px;
            margin-top: 5px;
        }
    </style>
</head><body>
    <div class="box">
        <div class="boxx"></div>
        <div class="boxx"></div>
        <div class="boxx"></div>
        <div class="boxx"></div>
    </div>
</body></html>怎么让这四个方块居中,并随着屏幕变大,而自适应变大呢大大们,没电脑,麻烦会的帮忙改好,谢谢
最新回复 (25)
  • Culaccino 14天前
    引用 2
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html><html lang="zn-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        html,        body {            padding: 0;            margin: 0;            box-sizing: border-box;        }                .box {            display: flex;            width: 60%;            margin: 0 auto;            flex-wrap: wrap;        }                .boxx {            width: 48%;            padding-top: 48%;            border: 1px solid red;            margin: .4%;        }    </style></head><body>    <div class="box">        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>    </div></body></html>
  • Ldfd 14天前
    引用 3
    本身就是自适应变大吧
  • html都忘完了,有个居中的代码(百度)和Bootstrap框架就可以响应式了
  • [HTML] 纯文本查看 复制代码
    <!DOCTYPE html><html lang="zn-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        html,        body {            width: 100%;            height: 100%;                    }        *{padding: 0;            margin: 0;}<!-- 关键 start -->body{display: flex;align-items: center;justify-content: center;}<!-- 关键 end -->        .box {            width: 50%;            height: 50%;font-size: 0;        }        <!-- box-sizing -->        .boxx {display: inline-block;width: 50%;height: 50%;border: solid 1px red;box-sizing: border-box;        }    </style></head><body>    <div class="box">        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>    </div></body></html>
  • 楼主 xuegaoxiansen 14天前
    引用 6
    没事玩玩破解 发表于 2020-6-27 22:25
    [mw_shl_code=html,true]

    大大,就是可以让这四个方块一直保持正方形么
  • 如果既要随着页面缩放,又要保持正方形的话,估计就需要写JS了
    多写几套css:使用@media 根据屏幕的长宽来确定大小,这样应该可以了,比js简单,但是比较死板
  • Gask 14天前
    引用 8
    建议利用@media定大小,简单明了
  • 今晚不熬夜_ 14天前
    引用 9
    要保持一直正方形,需要做屏幕适配
  • 就是他 14天前
    引用 10
    <!DOCTYPE html>
    <html lang="zn-cn"><head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            *{
                    margin: 0 auto;
                    padding: 0;
            }
            .box {
                width: 50%;
                height: 100%;
                margin: auto;
                padding: 0;
            }
            
            .boxx {
                width: 40%;
                height: 0;
                padding-top: 30%;
                border: 1px solid red;
                margin-left: 5px;
                margin-top: 5px;
                display:inline-block;
                
            }
        </style>
    </head><body>
        <div class="box">
            <div class="boxx"></div>
            <div class="boxx"></div>
            <div class="boxx"></div>
            <div class="boxx"></div>
        </div>
    </body></html>
  • 离不开好 14天前
    引用 11
    宽高 用vw试试[HTML] 纯文本查看 复制代码
    <!DOCTYPE html><html lang="zn-cn">        <head>        <meta charset="UTF-8">        <meta name="viewport" content="width=device-width,initial-scale=1">        <title>Document</title>        <style>body,html{width:100vw;height:100vh;padding:0;margin:0}.box{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.boxx{width:10vw;height:10vw;border:1px solid red;margin:5px}</style>    </head>        <body>        <div class="box">            <div class="boxx"></div>            <div class="boxx"></div>            <div class="boxx"></div>            <div class="boxx"></div>        </div>    </body></html>
    乱写的 不会 哈哈哈
  • 处女-大龙猫 14天前
    引用 12
    rem可以适配.
  • 引用 13
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html><html lang="zn-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        html,        body {            width: 100%;            height: 100%;        }        * {            padding: 0;            margin: 0;        }        body {            display: flex;            align-items: center;            justify-content: center;        }        .box {            width: 50%;            height: 50%;            font-size: 0;            display: flex;            flex-flow: wrap;            justify-content: center;        }        /* < !-- box-sizing --> */        .boxx {            display: inline-block;            border: solid 1px red;            box-sizing: border-box;            padding: 5px;            margin: 5px;            width: 33%;        }    </style></head><body>    <div class="box">        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>        <div class="boxx"></div>    </div></body></html>
  • 有妖气223 14天前
    引用 14
    楼主加油
  • 井右寺 14天前
    引用 15
    直接宽高 用vw单位
    比如 width:49vw;height:49vw
  • linguo2625469 14天前
    引用 16
    vm rem flex布局基本都可以吧 我菜就不献丑了
  • 引用 17
    别急,  我现在给你写
  • 楼主 xuegaoxiansen 14天前
    引用 18
    小白白爱吃糖 发表于 2020-6-28 07:56
    [mw_shl_code=html,true]

    大大,我试了一下,在320的屏幕就变成长方形了,可以一直保持正方形随屏幕变大么
  • 楼主 xuegaoxiansen 14天前
    引用 19
    离不开好 发表于 2020-6-27 22:54
    宽高 用vw试试[mw_shl_code=html,true]

    大大,随屏幕放大效果是对了,就是能不上面两个正方形,下面两个正方形排列呢,是需要改哪里呢
  • 楼主 xuegaoxiansen 14天前
    引用 20
    Culaccino 发表于 2020-6-27 21:53
    [mw_shl_code=html,true]

    感谢大大帮助
  • 引用 21
    [JavaScript] 纯文本查看 复制代码
    <!DOCTYPE html><html lang="zh-cn"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>    <style>        html, body {            width: 100%;            height: 100%;        }        *{            padding: 0;            margin: 0;        }        .box {            width: 10rem;            height: 10rem;            display: flex;            position: fixed;            top: 0;            left: 0;            right: 0;            bottom: 0;            margin: auto;            flex-wrap: wrap;        }        .list{            flex: 0 0 50%;            position: relative;        }        .list:after{            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            content: "";            border: 1px solid red;        }    </style></head><body><div class="box">    <div class="list"></div>    <div class="list"></div>    <div class="list"></div>    <div class="list"></div></div></body><script>    (function (doc, win) {        var docEl = doc.documentElement,            isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),            dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,            dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放            dpr = 1,            scale = 1 / dpr,            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';        docEl.dataset.dpr = dpr;        var metaEl = doc.createElement('meta');        metaEl.name = 'viewport';        metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;        docEl.firstElementChild.appendChild(metaEl);        var recalc = function () {            var width = docEl.clientWidth;            if (width / dpr > 1920) {                width = 1920 * dpr;            }            // 乘以100,px : rem = 100 : 1            docEl.style.fontSize = 100 * (width / 1920) + 'px';        };        recalc();        if (!doc.addEventListener) return;        win.addEventListener(resizeEvt, recalc, false);    })(document, window);</script></html>
  • 离不开好 14天前
    引用 22
    xuegaoxiansen 发表于 2020-6-28 09:36
    大大,随屏幕放大效果是对了,就是能不上面两个正方形,下面两个正方形排列呢,是需要改哪里呢

    每两个boxx用一个div套起来就ok了
  • 楼主 xuegaoxiansen 13天前
    引用 23
    好多解决方法,看一下哪个精简
  • 楼主 xuegaoxiansen 13天前
    引用 24
    Gask 发表于 2020-6-27 22:43
    建议利用@media定大小,简单明了

    这个应该是媒体查询吧,我之前也是用它,可是从320到1920,我感觉要做很多个
  • Gask 13天前
    引用 25
    xuegaoxiansen 发表于 2020-6-28 19:46
    这个应该是媒体查询吧,我之前也是用它,可是从320到1920,我感觉要做很多个

    没有,你就适应几个大小就行了,像Bootstrap那样750px,970px,1170px
    其实用Bootstrap栅格基本解决自适应问题了
  • 楼主 xuegaoxiansen 13天前
    引用 26
    Gask 发表于 2020-6-28 21:27
    没有,你就适应几个大小就行了,像Bootstrap那样750px,970px,1170px
    其实用Bootstrap栅格基本解决自适 ...

    我按F12从320-360-411-414-768这些都做了,但是缩放屏幕,这样就不友好了
    Bootstrap还没学,我努力一下
  • 游客
    27
返回