移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作

一、技术选型

二、搭建相关文件夹结构

三、设置视口标签以及引入初始化样式

四、设置公共common.less 文件

common.less

//设置常见的屏幕尺寸大小，修改里面的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;

    }

}

五、新建index.less文件

index.less

//导入 common.less文件

@import "common";

//文件后缀名可写可不写

index.html

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

六、苏宁首页 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;

}

七、苏宁首页 search-content 模块布局

index.html

<body>

 <!-- 顶部部分   -->

 <div class="search-content">123</div>

</body>

index.less

// 顶部模块

// 页面元素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;

}

八、苏宁首页 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;

    }

}

九、苏宁首页 search-content 内容制作

index.html

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

        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;

    }

}

十、banner 和广告内容制作

index.html

<!-- 广告部分 -->

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

       }

   }

}

可实现自适应效果

十一、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;

        }

    }

}

巴特西

移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作

一、技术选型

二、搭建相关文件夹结构

三、设置视口标签以及引入初始化样式

四、设置公共common.less 文件

五、新建index.less文件

六、苏宁首页 body 样式设置

七、苏宁首页 search-content 模块布局

八、苏宁首页 search-content 内容布局

九、苏宁首页 search-content 内容制作

十、banner 和广告内容制作

十一、nav内容制作

最新文章

热门文章

巴特西

移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作

一、技术选型

二、搭建相关文件夹结构

三、设置视口标签以及引入初始化样式

四、设置公共common.less 文件

五、新建index.less文件

六、苏宁首页 body 样式设置

七、苏宁首页 search-content 模块布局

八、苏宁首页 search-content 内容布局

九、苏宁首页 search-content 内容制作

十、banner 和 广告内容制作

十一、nav内容制作

最新文章

热门文章

十、banner 和广告内容制作