时间戳

首页 > 技术文章 > rem适配布局---6. 方案1：苏宁首页制作2

rem适配布局---6. 方案1：苏宁首页制作2

deer-cen 2020-01-03 15:20 原文

1 在index.less中书写具体样式

1.1 其他的公共样式可以继续往common.less文件中缀加

1.2 body样式

//首页样式的less文件

//将刚写好的common.less引入到index.less里面 common可以加后缀名less,也可以不加
@import "common.less";
//若在common.less中新添加了内容，建议从新写一遍@import "common.less";防止具体内容未被加载到index.css中
body {
    min-width: 320px;
    //15rem就是750px
    //750px划分15等分就是50px(font-size),也就是50px=1rem--->15rem=750px
    //这里不写最大宽度而写定宽度成15rem的原因：
    //之前限定好了html中的文字最大就是50px，所以15rem最大也就代表750px,所以就不用写maxi-width,同时由于单位是rem，还可以缩放
    width: 15rem;
    //有了宽度之后就可以居中对齐了
    margin: 0 auto;
    //苏宁原版样式
    line-height: 1.5;
    font-family: Arial, Helvetica;
    background-color: #f2f2f2;
}

1.2 整体结构搭建

1.3 顶部搜索模块


分成三个部分：左、中、右。左右宽度高度给固定大小；中间flex:1，独占剩余空间一份;

<!-- 顶部搜索框 -->
<div class="search-content">
    <!-- 左 -->
    <a href="#" class="classify"></a>
    <!-- 中 -->
    <div class="search">
        <form action="">
            <input type="search" value="厨卫保暖季 哒哒哒">
        </form>
    </div>
    <!-- 右 -->
    <a href="#" class="login">登陆</a>
</div>

index.less文件

//顶部搜索框

//定义1rem代表多少px的变量 
@baseFont: 50;
.search-content {
    display: flex;
    //固定定位一定要有宽度
    position: fixed;
    top: 0;
    //定位的盒子无法用margin：0 auto;
    left: 50%;
    transform: translateX(-50%);
    width: 15rem;
    //height: 88px 
    // 750/15=50px(1rem)  88/50rem
    height: 88rem / @baseFont;
    background-color: #ffc001;
    .classify {
        // 实测 宽44px 高70px
        width: 44rem / @baseFont;
        height: 70rem / @baseFont;
        background: url(../images/classify.png) no-repeat;
        //背景缩放 父盒子多大背景就多大
        background-size: 44rem / @baseFont 70rem / @baseFont;
        //margin: 11px 25px 7px 24px
        margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
    }
    .search {
        //宽高填满所有剩余区域
        flex: 1;
        input {
            // 消除默认的边框
            border: 0;
            //消除聚焦时候的蓝色边框
            outline: none;
            //注意宽度100%，否则若input太大肯会超过父盒子从而挤压左右两边的盒子
            width: 100%;
            height: 66rem / @baseFont;
            border-radius: 33rem / @baseFont;
            background-color: #fff2cc;
            margin-top: 12rem / @baseFont;
            font-size: 25rem / @baseFont;
            padding-left: 55rem / @baseFont;
            color: #757575
        }
    }
    .login {
        width: 75rem / @baseFont;
        height: 70rem / @baseFont;
        margin: 10rem / @baseFont;
        //字体大小可从psd文件中获得
        font-size: 25rem / @baseFont;
        text-align: center;
        color: #fff;
        line-height: 70rem / @baseFont;
    }   
}

1.4 banner部分

<!-- banner部分 -->
<div class="banner">
    <img src="upload/banner.gif" alt="">
</div>

//banner部分
//banner.jpg图片的实际大小是750px*368px  (css像素) 不写以下样式的时候默认是不随着屏幕缩放的,图片一直保持750*368px
.banner {
    width: 750rem / @baseFont;
    height: 368rem / @baseFont;
    img {
        width: 100%;
        height: 100%;
    }
}

1.5 广告部分

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

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

为什么这里flex布局也适应的屏幕的宽度

1.6 导航栏nav部分

750px宽的大盒子里面装了10个a，每个a的宽高都写定用rem单位

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

// nav模块
nav {
    width: 750rem / @baseFont;
    a {
        float: left;
        width: 150rem / @baseFont;
        height: 140rem / @baseFont;
        // 让span里面的文字在a盒子里居中对齐
        text-align: center;
        img {
            // 将行内元素转换成块级元素才可以用margin,auto实现居中对齐
            display: block;
            width: 82rem / @baseFont;
            height: 82rem / @baseFont;
            margin: 10rem / @baseFont auto 0;
        }
        span {
            font-size: 25rem / @baseFont;
            color: #333;
        }
    }
}

推荐阅读