移動 WEB 佈局方式之 rem 適配佈局 ---- 蘇寧首頁案例製做

時間 2020-12-14

標籤 javascript css html java less 佈局字體 flex url spa 欄目無線简体版

原文原文鏈接

1、技術選型

2、搭建相關文件夾結構

3、設置視口標籤以及引入初始化樣式

4、設置公共common.less 文件

common.lessjavascript

//設置常見的屏幕尺寸大小，修改裏面的html 文字大小
//由於在 pc 端也能夠打開蘇寧的移動端網頁
//咱們默認字體大小爲 50 px 
html {
    font-size: 50px;
}
//注意：這句話必定要寫在最上面

//定義劃分的份數 15等份
@no:15;
//320 大小的屏幕
@media screen and (min-width:320px){
    html{
        font-size: 320px / @no;
    }
}

//360 大小的屏幕
@media screen and (min-width:360px){
    html{
        font-size: 360px / @no;
    }
}

// 375 大小的屏幕 iPhone6/7/8的屏幕大小尺寸
@media screen and (min-width:375px){
    html{
        font-size: 375px / @no;
    }
}

// 384
@media screen and (min-width: 384px) {
    html {
        font-size: 384px / @no;
    }
}

// 400
@media screen and (min-width: 400px) {
    html {
        font-size: 400px / @no;
    }
}
// 414
@media screen and (min-width: 414px) {
    html {
        font-size: 414px / @no;
    }
}
// 424
@media screen and (min-width: 424px) {
    html {
        font-size: 424px / @no;
    }
}

// 480
@media screen and (min-width: 480px) {
    html {
        font-size: 480px / @no;
    }
}

// 540
@media screen and (min-width: 540px) {
    html {
        font-size: 540px / @no;
    }
}
// 720
@media screen and (min-width: 720px) {
    html {
        font-size: 720px / @no;
    }
}

// 750
@media screen and (min-width: 750px) {
    html {
        font-size: 750px / @no;
    }
}

5、新建index.less文件

index.lesscss

//導入 common.less文件
@import "common";
//文件後綴名可寫可不寫

index.htmlhtml

<link rel="stylesheet" href="css/index.css">

6、蘇寧首頁 body 樣式設置

body {
    min-width: 320px;
    width: 15rem;
    //750像素下，一個rem就是 html的 font-size 也就是 50px 
    //那麼15rem就是 750px，
    margin: 0 auto;
    line-height: 1.5;
    font-family: Arial,Helvetica;
    background: #F2F2F2;
}

7、蘇寧首頁 search-content 模塊佈局

index.htmljava

<body>
 <!-- 頂部部分   -->
 <div class="search-content">123</div>
</body>

index.lessless

// 頂部模塊
// 頁面元素rem計算公式： 頁面元素的px / html 字體大小 50
@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
}

8、蘇寧首頁 search-content 內容佈局

index.html佈局

<div class="search-content">
     <div class="classify">1</div>
     <div class="search">2</div>
     <div class="login">3</div>
</div>

index.less字體

@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
    display: flex;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        background-color: pink;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
    }
    .search {
        flex: 1;
        background-color: purple;

    }
    .login {
        width:75rem / @baseFont ;
        height: 70rem / @baseFont;
        background-color: blue;
        margin: 10rem / @baseFont;
    }
}

9、蘇寧首頁 search-content 內容製做

index.htmlflex

<div class="search-content">
     <div class="classify"></div>
     <div class="search">
        <form action="">
            <input type="search" value="雙十一預售 定金10倍翻">
        </form>
     </div>
     <div class="login">登陸</div>
</div>

index.lessurl

@baseFont:50;
.search-content{
    height: 88rem / @baseFont;
    width: 15rem;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: #FFC001;
    display: flex;
    .classify {
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        // background-color: pink;
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        background-size: 44rem / @baseFont 70rem / @baseFont;

    }
    .search {
        flex: 1;
        // background-color: purple;
        input {
            width: 100%;
            height: 66rem / @baseFont;
            background-color: #FFF2CC;
            border-radius: 33rem / @baseFont;
            margin-top: 12rem / @baseFont;
            padding-left: 55rem / @baseFont;
            font-size: 25rem / @baseFont;
            outline: none;
            border: 0;
            color: #757575;
        }
    }
    .login {
        width:75rem / @baseFont ;
        height: 70rem / @baseFont;
        // background-color: blue;
        margin: 10rem / @baseFont;
        font-size: 25rem / @baseFont;
        color: #ffff;
        text-align: center;
        line-height: 70rem / @baseFont;
    }
}

index.htmlspa

<!-- 廣告部分 -->
<div class="ad">
    <a href=""><img src="upload/ad1.gif"/></a>
    <a href=""><img src="upload/ad2.gif"/></a>
    <a href=""><img src="upload/ad3.gif"/></a>
</div>

index.less

// 廣告部分
.ad {
   display: flex;
   a {
       flex: 1;
       img{
           width: 100%;
       }
   }
}

可實現自適應效果

11、nav內容製做

index.html

<!-- nav 部分 -->
<nav>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>
    <a href="#">
        <img src="upload/nav1.png" alt="">
        <span>爆款手機</span>
    </a>

</nav>

index.less

// nav 部分
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        text-align: center;
        img {
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;  
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}