전쟁 클래스 시리즈 II에 대한 모바일 단말 렘의 레이아웃

기타 2020-03-18 08:37:57 독서 시간: null

시간 파리, 시간이 난다. 당신에게 행복한 주말! 시간이 지나면 이번 주, 우리는 이동 단말기의 레이아웃을 배웠습니다.
카자흐스탄 대해 간략히, 상기 이동 단말기 레이아웃 개의 단순한 레이아웃으로 분할된다 :

  1. 레이아웃 흐름.
    그 장점은 대형 스크린의 경우에 더 많은 콘텐츠를 표시 할 수있다.
    단점은 우리의 와이드 화면 종횡비의 경우에 위화감하게한다는 것이다.

  2. 렘 레이아웃.
    음, 오늘은 레이아웃 렘 여기에하고 싶은 말!
    그 이점 (즉, 화면의 크기) 콘텐츠 구조는 다른 장치에 더 많은 코디 될 것이다. 즉, 화면의 크기와 콘텐츠 저울입니다.
    물론! 무시하고 이익인가, 많이 변경되지 않습니다 우리의 큰 화면의 경우에 표시되는 내용입니다.

렘 원칙 및 사용을 레이아웃.

음! 다음으로, 우리는 간단하게 REM 배치 원칙과 사용법을 소개합니다.
우선 살펴 보자 REM 수면은 단위, 특별한 때문에 REM 수면은, 확실히 단위 그것에서 다른 것입니다! 하하!

  1. 그 폭과 높이의 단위 램 레이아웃 "VW", "VH"이다. 우선, 내 마음을하자 거기에 관계없이 모바일 단말기 화면입니다 아이디어가, 100 개 복사, 폭 100 개, 복사, 우리의 한 폭스 바겐로 간주 전체 폭의 한 부분 많이있다가 (또한, 1 %라고 할 수있다).
    이제 우리는 가정에서 볼 :
    우리는 화면 크기가 375px (사과 6)이라고 가정 -> 100 폭스 바겐 -> 1 VW == 3.75px.
    우리는 화면 크기가 414px (애플 6P) 인 것을 가정 -> 100 폭스 바겐 -> 1 VW == 4.14px.
    위에서 언급 한 변환을 통해 획득 된 다양한 화면 크기가 화소 사이즈 1vw와 동일하다.
    애플 6 - 그것의 수> HTML 글꼴 크기와 동일?
    우선 1vw == 3.75px, 다음 VW 100 픽셀의 수와 동일? 우리가 100 픽셀 / 3.75px GET 결과는 100 픽셀 == 26.66667vw 즉, 26.66667입니다.
    REM 수면에> PX - - 변환을 용이하게하기 위해, 우리는 플러그인 vsCode를 다운로드 갈 수> 해당 글꼴 크기 설정에서 설정합니다. -> ALT + Z : PX 턴은 REM을 동작한다. 26.66667vw 적색 영역 (PX)의 개수와 동일하다. 그림
    그림 삽입 설명 여기

  2. 단지 간단한 단위로 폭스 바겐은 렘의 레이아웃을 구현하는 방법입니다. 우리는 또한 자동 도구의 화면 크기를 인식 할 수있는 방법이 필요합니다.
    자바 스크립트 언어를
    배울 수 있기 때문에, 단순히 사진으로 표현 여기입니다. 도 :
    그림 삽입 설명 여기
    화소 크기 내부 이미지는 동일한 내부 1vw 3.75 애플 6이다. 그것은 교체 할 수 있습니다.

다음은 예입니다, 참조 :

<head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./食物库/iconfont/iconfont.css">
        <style>
            *{margin: 0;padding: 0;}
            ul , li{list-style: none;}
            a{text-decoration: none;}
            input{background:none;outline:none;border:0px;}
            img{width: 100%;display: block;}
            /* html{font-size: 26.66667vw;} */

            .conment{width: 345px;margin: 0 auto;}

            #header{height: 64px;background:#02D1C5 ;}
            #header .header-top{height: 15px;}
            #header .header-name{height: 49px;position: relative;}
            #header .header-name a{display: inline-block;position: absolute;left: 13px;bottom: 13px;font-size: 18px;color: white;}
            #header .header-name li{font-size: 18px;color: white;position: absolute;left: 160px;bottom: 13px;}


            #nav .nav-sousuo{width: 250px;height: 25px;border-radius: 12px;background-color:#AAAAAA ;position: relative;margin: 9px 48px 16px 47px;opacity: .3;}
            #nav .nav-sousuo a{position: absolute;color: gray;font-size: 20px;left: 8px;bottom: 2px;}
            #nav .nav-sousuo input{width: 250px;height: 25px;position: absolute;text-align: center;}

            #list{height: 35px;}
            #list .list-column{display: flex;justify-content: space-between;}
            #list .list-column a{color:#AAAAAA;font-size: 16px;font-weight: 400;font-family: PingFangSC-Regular;position: relative;}
            #list .list-column a.active:after{ content:""; width:100%; height:3px; display: block;  border-radius: 2px; position: absolute; bottom:-4px; left:50%; transform: translateX(-50%);background:rgba(241,151,22,1);}
            #list .list-column a.active{color: #02D1C5;}

            #shop{}
            #shop > div{height: 70px;border-bottom: 1px solid #AAAAAA;}
            #shop .shop-1{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-1 div:first-of-type{display: flex;}
            #shop .shop-1 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-1 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-1 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-1 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-1 div:last-of-type{width: 15px;height: 15px;background: red;border-radius: 50%;}

            #shop .shop-2{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-2 div:first-of-type{display: flex;}
            #shop .shop-2 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-2 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-2 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-2 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-2 div:last-of-type{width: 15px;height: 15px;background: yellow;border-radius: 50%;}

            #shop .shop-3{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-3 div:first-of-type{display: flex;}
            #shop .shop-3 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-3 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-3 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-3 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-3 div:last-of-type{width: 15px;height: 15px;background: yellow;border-radius: 50%;}
            
            #shop .shop-4{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-4 div:first-of-type{display: flex;}
            #shop .shop-4 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-4 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-4 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-4 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-4 div:last-of-type{width: 15px;height: 15px;background: green;border-radius: 50%;}

            #shop .shop-5{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-5 div:first-of-type{display: flex;}
            #shop .shop-5 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-5 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-5 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-5 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-5 div:last-of-type{width: 15px;height: 15px;background: green;border-radius: 50%;}

            #shop .shop-6{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-6 div:first-of-type{display: flex;}
            #shop .shop-6 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-6 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-6 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-6 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-6 div:last-of-type{width: 15px;height: 15px;background: green;border-radius: 50%;}

            #shop .shop-7{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-7 div:first-of-type{display: flex;}
            #shop .shop-7 div:first-of-type > a{width: 40px;height: 40px;display: block;}
            #shop .shop-7 div:first-of-type ul{margin-left: 9px;}
            #shop .shop-7 div:first-of-type ul li:first-of-type{font-size: 14px;color: #333333;}
            #shop .shop-7 div:first-of-type ul li:last-of-type{font-size: 12px;color: #666666;}
            #shop .shop-7 div:last-of-type{width: 15px;height: 15px;background: red;border-radius: 50%;}
        </style>
    </head>
    <body>
        <div id="main">
            <div id="header">
                <div class="header-top"></div>
                <div class="header-name">
                    <a href="#" class="iconfont icon-zuojiantou 
                    "></a>
                    <li>食物库</li>
                </div>
            </div>
            <div id="nav" class="conment">
                <li class="nav-sousuo">
                    <a href="#" class="iconfont icon-sousuo"></a>
                    <input type="text" placeholder="搜索食物热量">
                </li>
            </div>
            <div id="list" class="conment">
                <ul class="list-column">
                    <a href="#" class="active">主食</a>
                    <a href="#">蔬菜</a>
                    <a href="#">水果</a>
                    <a href="#">肉蛋类</a>
                    <a href="#">豆制品 </a>
                </ul>
            </div>
            <div id="shop" class="conment">
                <div class="shop-1">
                    <div>
                        <a href="#"><img src="./img/list-1.png" alt=""></a>
                        <ul>
                            <li>玉米（鲜）</li>
                            <li>112卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-2">
                    <div>
                        <a href="#"><img src="./img/list-2.png" alt=""></a>
                        <ul>
                            <li>油条</li>
                            <li>388卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-3">
                    <div>
                        <a href="#"><img src="./img/list-3.png" alt=""></a>
                        <ul>
                            <li>花卷</li>
                            <li>214卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-4">
                    <div>
                        <a href="#"><img src="./img/list-4.png" alt=""></a>
                        <ul>
                            <li>红薯</li>
                            <li>61卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-5">
                    <div>
                        <a href="#"><img src="./img/list-5.png" alt=""></a>
                        <ul>
                            <li>燕麦片</li>
                            <li>338卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-6">
                    <div>
                        <a href="#"><img src="./img/list-6.png" alt=""></a>
                        <ul>
                            <li>小米粥</li>
                            <li>46卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
                <div class="shop-7">
                    <div>
                        <a href="#"><img src="./img/list-7.png" alt=""></a>
                        <ul>
                            <li>米饭</li>
                            <li>468卡/100克</li>
                        </ul>
                    </div>
                    <div></div>
                </div>
            </div>
        </div>
    </body>

그림 삽입 설명 여기

지금 코드 페이지 REM로 변환 후의 코드가 다음에 이동 단말 코드 단위로하여 미리 VW, 표시이다 (여기서 CSS 코드 만, 본체 내부의 일반적인 코드 위)

 <style>
            *{margin: 0;padding: 0;}
            ul , li{list-style: none;}
            a{text-decoration: none;}
            input{background:none;outline:none;border:0rem;}
            img{width: 100%;display: block;}
            html{font-size: 26.66667vw;}

            .conment{width: 3.45rem;margin: 0 auto;}

            #header{height: 0.64rem;background:#02D1C5 ;}
            #header .header-top{height: 0.15rem;}
            #header .header-name{height: 0.49rem;position: relative;}
            #header .header-name a{display: inline-block;position: absolute;left: 0.13rem;bottom: 0.13rem;font-size: 0.18rem;color: white;}
            #header .header-name li{font-size: 0.18rem;color: white;position: absolute;left: 1.6rem;bottom: 0.13rem;}


            #nav .nav-sousuo{width: 2.5rem;height: 0.25rem;border-radius: 0.12rem;background-color:#AAAAAA ;position: relative;margin: 0.09rem 0.48rem 0.16rem 0.47rem;opacity: .3;}
            #nav .nav-sousuo a{position: absolute;color: gray;font-size: 0.2rem;left: 0.08rem;bottom: 0.02rem;}
            #nav .nav-sousuo input{width: 2.5rem;height: 0.25rem;position: absolute;text-align: center;}

            #list{height: 0.35rem;}
            #list .list-column{display: flex;justify-content: space-between;}
            #list .list-column a{color:#AAAAAA;font-size: 0.16rem;font-weight: 400;font-family: PingFangSC-Regular;position: relative;}
            #list .list-column a.active:after{ content:""; width:100%; height:0.03rem; display: block;  border-radius: 0.02rem; position: absolute; bottom:-0.04rem; left:50%; transform: translateX(-50%);background:rgba(241,151,22,1);}
            #list .list-column a.active{color: #02D1C5;}

            #shop{}
            #shop > div{height: 0.7rem;border-bottom: 0.01rem solid #AAAAAA;}
            #shop .shop-1{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-1 div:first-of-type{display: flex;}
            #shop .shop-1 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-1 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-1 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-1 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-1 div:last-of-type{width: 0.15rem;height: 0.15rem;background: red;border-radius: 50%;}

            #shop .shop-2{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-2 div:first-of-type{display: flex;}
            #shop .shop-2 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-2 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-2 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-2 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-2 div:last-of-type{width: 0.15rem;height: 0.15rem;background: yellow;border-radius: 50%;}

            #shop .shop-3{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-3 div:first-of-type{display: flex;}
            #shop .shop-3 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-3 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-3 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-3 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-3 div:last-of-type{width: 0.15rem;height: 0.15rem;background: yellow;border-radius: 50%;}
            
            #shop .shop-4{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-4 div:first-of-type{display: flex;}
            #shop .shop-4 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-4 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-4 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-4 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-4 div:last-of-type{width: 0.15rem;height: 0.15rem;background: green;border-radius: 50%;}

            #shop .shop-5{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-5 div:first-of-type{display: flex;}
            #shop .shop-5 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-5 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-5 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-5 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-5 div:last-of-type{width: 0.15rem;height: 0.15rem;background: green;border-radius: 50%;}

            #shop .shop-6{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-6 div:first-of-type{display: flex;}
            #shop .shop-6 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-6 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-6 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-6 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-6 div:last-of-type{width: 0.15rem;height: 0.15rem;background: green;border-radius: 50%;}

            #shop .shop-7{display: flex;justify-content: space-between;align-items: center;}
            #shop .shop-7 div:first-of-type{display: flex;}
            #shop .shop-7 div:first-of-type > a{width: 0.4rem;height: 0.4rem;display: block;}
            #shop .shop-7 div:first-of-type ul{margin-left: 0.09rem;}
            #shop .shop-7 div:first-of-type ul li:first-of-type{font-size: 0.14rem;color: #333333;}
            #shop .shop-7 div:first-of-type ul li:last-of-type{font-size: 0.12rem;color: #666666;}
            #shop .shop-7 div:last-of-type{width: 0.15rem;height: 0.15rem;background: red;border-radius: 50%;}
        </style>

그림 삽입 설명 여기봐가,이 위에 표시된 렘의 아이 패드 후 페이지 레이아웃로 변환, 기하학적 스케일링, 그리고 불균형 문제가 발생하지 않습니다. 물론, 이것은 전체지도를 절단하지 않은 장비 이유로 인해, 우리는 여기에있다, 하, 하, 여기에 칭찬 하이다 "자비가 분명하다"그림의 부분입니다!

마지막으로 요약합니다. 우리가 REM 수면 레이아웃을 수행 할 때 쓰기 코드 유닛 내부에 REM으로 시작 할 필요가없는 경우. 당신이 생각하는 플로우 레이아웃 아이디어를 사용할 수 있습니다. 마지막 CSS 코드 통일 선택을 눌러 "ALT + z는"물론, 사전에 우리의 가치 내부 코드를 디버깅 할 때까지 우리는 위 기다립니다.

			新人小白，如有问题，欢迎评论指点，谢谢。
왕 타오
게시 10 개 원래 기사 · 원의 찬양 (11) · 전망 (452)
개인 편지 우려

추천

출처blog.csdn.net/Anber_wang/article/details/104588915
추천
행
.netcoreapi 컨테이너와 컨테이너의 MySQL을 고정 표시기-구성
com.google.firebase.database.DatabaseException는 : 롱 타입 java.lang.String의 값을 변환하는 데 실패
국내 휴대전화 왕이 미국 통신사 시장 1위를 차지했지만 국내 휴대전화 4위는 아니다.
트랜잭션 격리 수준의 네 가지
오늘 chatgpt 시도
부하 분산
【FFMpeg】源码编译
우분투 sudo를 무료로 접착
자바 8 스트림 API - 어떤 상태 중간 동작을 보증 새로운 소스 수집합니까?
CF161BDiscounts
아카이브
기타
2020-04-08(1460)
2020-04-07(1517)
2020-04-06(1499)
2020-04-05(1440)
2020-04-04(1629)
2020-04-03(1644)
2020-04-02(1572)
2020-04-01(1665)
2020-03-31(1639)
2020-03-30(1334)

코드 세계

© 2018 codetd.com