The layout of the mobile terminal rem against the war Class Series II

Others 2020-03-18 08:37:49 views: null

Time flies, time flies. Happy weekend to you! After time this week, we learned the layout of the mobile terminal.
Briefly about Kazakhstan, the mobile terminal layout is divided into two simple layout:

  1. Flow layout.
    Its advantage is that in the case of large-screen, can display more content.
    The downside is that in the case of our wide-screen aspect ratio becomes incongruous.

  2. rem layout.
    Well, today I want to say to the layout rem it!
    Its advantage is (that is, the size of the screen) content structure would be more coordination in different devices. That is our content scales with the size of the screen.
    of course! Is neglected and Gains, is what is displayed in the case of our larger screen will not change much.

Rem layout principles and usage.

Well! Next, we briefly introduce rem layout principles and usage.
First, let's look rem is a unit, rem so special, it will certainly be different from the unit it! Haha!

  1. Rem layout in its width and height of the unit are "vw" "vh". First of all, let my mind there have an idea, that is, regardless of our mobile terminal screen is much, regarded them as 100 copies, 100 copies as wide, and our one vw is one part of the entire width (it can also be said to be 1%).
    Now we look at assumptions:
    We assume that the screen size is 375px (apple 6) -> 100 vw -> 1 vw == 3.75px.
    We assume that the screen size is 414px (Apple 6p) -> 100 vw -> 1 vw == 4.14px.
    The above is the different screen sizes obtained through the conversion is equal to the pixel size 1vw.
    Apple 6 -> html font-size equal to the number of it?
    First 1vw == 3.75px, then equal to the number of vw 100px it? The results we 100px / 3.75px get is 26.66667, that is 100px == 26.66667vw.
    To facilitate the conversion, we can go to download a plug-in vsCode -> px to rem -> set under the corresponding font-size settings. -> alt + z: px turn operates the rem. 26.66667vw red area is equal to the number of px. Figure
    Here Insert Picture Description

  2. Vw only by a simple unit is no way to implement the layout of the rem. We also need a way to let it automatically recognizes the screen size of the tool.
    JavaScript language
    because not learn, I am here to simply express it with pictures. Figure:
    Here Insert Picture Description
    pictures inside the pixel size is 3.75 Apple 6 inside the 1vw equal. It can be replaced.

The following is an example, see:

<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>

Here Insert Picture Description

Now code displayed page is a mobile terminal, no pre vw into code units, followed by the code after conversion into rem (where css code only, body and inside the above general code):

 <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>

Here Insert Picture DescriptionLook, this is converted into a page layout after rem ipad shown above, is the geometric scaling, and the imbalance problem does not occur. Of course, this is only part of the picture, due to equipment reasons did not cut the whole map, we are here is "Benevolence is evident," ha ha, here is the compliment Ha!

Finally, to sum up. When we do rem layout when there is no need to start with a rem inside the unit to write code. You can use flow layout ideas to think. We wait until the last css code unification selected press "alt + z", of course, you want to debug code inside our value in advance, above.

			新人小白，如有问题，欢迎评论指点，谢谢。
Wang Tao
Published 10 original articles · won praise 11 · views 452
Private letter concerns

Guess you like

Origin blog.csdn.net/Anber_wang/article/details/104588915
Recommended
Arc Browser for Windows 1.0 officially GA
A programmer born in the 1990s developed a video porting software and made over 7 million in less than a year. The ending was very punishing!
Ranking
1. Select Sort
Create a thread thread
3 press to play ball that reach 6
Programmation CUDA (4) : gestion de la mémoire
SpringBoot database connection pool Druid error
E Diudiu App redesign summary
4EVERLAND Hosting now supports SNS+IPFS
About HTTPS
[vue3+vite+ts+element-plu+sass] uses bug records in sass
Interpretation of HUAWEI CLOUD GaussDB (for Influx): Best Practice Data Modeling
Daily
More
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(36)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(32)
2024-04-24(30)

Code World

© 2018 codetd.com