집 > 기사 > 웹 프론트엔드 > 모바일 레이아웃: 적응형 사각형 상자 작성

모바일 레이아웃: 적응형 사각형 상자 작성

WBOY원래의: 2016-09-22 08:42:151947검색

모바일 레이아웃에서는 div가 비례적으로 배치되고 너비는 백분율로 표시됩니다. 높이와 너비는 동일합니다. 즉, div는 정사각형이 됩니다.

최근에 작은 프로그램을 작성하다가 레이아웃 문제에 직면했습니다. div의 너비 비율이 너비:20%입니다(예: 화면 너비의 20%). div를 정사각형으로 만드는 방법은 무엇입니까? 우리는 모바일 터미널에서 작업하고 있기 때문에 화면 너비가 가변적이며 div 상자의 너비와 높이가 동일하고 정사각형으로 나타나기를 원합니다. 효과는 다음과 같습니다.

이제 찾은 솔루션을 요약해 보겠습니다.

옵션 1: JavaScript/jQuery 방법:

<code> <style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    ul{
        width: 100%;
        list-style: none;
    }
    li{
        width: 20%;
        float: left;
    }
    li:first-child{
        background: red;
    }
    li:nth-child(2){
        background: green;
    }
    li:nth-child(3){
        background: blue;
    }
    li:nth-child(4){
        background: yellow;
    }
    li:nth-child(5){
        background: pink;
    }
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<script src="wjs/lib/jquery/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(window).on('resize', function () {
            $('li').css('height',$('li').css('width'));
        }).trigger('resize');
    })
</script>
</code>

옵션 2: CSS의 패딩 상단 또는 하단 패딩을 통해 상자를 받칩니다

<code><style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    ul{
        width: 100%;
        list-style: none;
    }
    li{
        width: 20%;
        float: left;
        padding-top: 20%;
    }
    li:first-child{
        background: red;
    }
    li:nth-child(2){
        background: green;
    }
    li:nth-child(3){
        background: blue;
    }
    li:nth-child(4){
        background: yellow;
    }
    li:nth-child(5){
        background: pink;
    }
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</code>

옵션 3: vw/vh 단위를 사용하지만 vw/vh 단위는 상위 상자가 아닌 현재 뷰포트의 너비/높이를 100개의 동일한 길이로 나누기 때문에 계산해야 한다는 점에 유의해야 합니다. 🎜>

<code><style>
    *{
        margin: 0;
        padding: 0;
    }
    html,body{
        width: 100%;
        height: 100%;
    }
    ul{
        width: 80%;
        margin: 0 auto;
        list-style: none;
    }
    li{
        width: 16vw;
        height: 16vw;
        float: left;

    }
    li:first-child{
        background: red;
    }
    li:nth-child(2){
        background: green;
    }
    li:nth-child(3){
        background: blue;
    }
    li:nth-child(4){
        background: yellow;
    }
    li:nth-child(5){
        background: pink;
    }
</style>
</head>
<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</code>

요약: vw/vh 장치의 출현은 의심할 여지 없이 다양한 너비의 화면에 적응할 수 있는 더 나은 솔루션을 제공하지만 일부 모델에서는 지원되지 않을 수 있으므로 때로는 모든 사람이 여전히 Bar를 필요로 합니다.

성명：

이전 기사：CSS를 처음부터 시작하기(1 2016/9/21)다음 기사：CSS를 처음부터 시작하기(1 2016/9/21)

모바일 레이아웃: 적응형 사각형 상자 작성

모바일 레이아웃에서는 div가 비례적으로 배치되고 너비는 백분율로 표시됩니다. 높이와 너비는 동일합니다. 즉, div는 정사각형이 됩니다.

관련 기사