zoukankan      html  css  js  c++  java
  • 移动 WEB 布局方式之 rem 适配布局 ---- 苏宁首页案例制作

    一、技术选型

    在这里插入图片描述

    二、搭建相关文件夹结构

    在这里插入图片描述

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

    在这里插入图片描述

    四、设置公共common.less 文件

    在这里插入图片描述

    common.less

    //设置常见的屏幕尺寸大小,修改里面的html 文字大小
    //因为在 pc 端也可以打开苏宁的移动端网页
    //我们默认字体大小为 50 px 
    html {
        font-size: 50px;
    }
    //注意:这句话一定要写在最上面
    
    //定义划分的份数 15等份
    @no:15;
    //320 大小的屏幕
    @media screen and (min-320px){
        html{
            font-size: 320px / @no;
        }
    }
    
    //360 大小的屏幕
    @media screen and (min-360px){
        html{
            font-size: 360px / @no;
        }
    }
    
    // 375 大小的屏幕 iPhone6/7/8的屏幕大小尺寸
    @media screen and (min-375px){
        html{
            font-size: 375px / @no;
        }
    }
    
    // 384
    @media screen and (min- 384px) {
        html {
            font-size: 384px / @no;
        }
    }
    
    // 400
    @media screen and (min- 400px) {
        html {
            font-size: 400px / @no;
        }
    }
    // 414
    @media screen and (min- 414px) {
        html {
            font-size: 414px / @no;
        }
    }
    // 424
    @media screen and (min- 424px) {
        html {
            font-size: 424px / @no;
        }
    }
    
    // 480
    @media screen and (min- 480px) {
        html {
            font-size: 480px / @no;
        }
    }
    
    // 540
    @media screen and (min- 540px) {
        html {
            font-size: 540px / @no;
        }
    }
    // 720
    @media screen and (min- 720px) {
        html {
            font-size: 720px / @no;
        }
    }
    
    // 750
    @media screen and (min- 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- 320px;
         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;
         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;
         15rem;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #FFC001;
        display: flex;
        .classify {
             44rem / @baseFont;
            height: 70rem / @baseFont;
            background-color: pink;
            margin: 11rem / @baseFont 25rem / @baseFont 7rem / @baseFont 24rem / @baseFont;
        }
        .search {
            flex: 1;
            background-color: purple;
    
        }
        .login {
            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;
         15rem;
        position: fixed;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: #FFC001;
        display: flex;
        .classify {
             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 {
                 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 {
            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{
                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 {
         750rem / @baseFont;
        a {
            float: left;
             150rem / @baseFont;
            height: 140rem / @baseFont;
            text-align: center;
            img {
                display: block;
                 82rem / @baseFont;
                height: 82rem / @baseFont;
                margin: 10rem / @baseFont auto 0;  
            }
            span {
                font-size: 25rem / @baseFont;
                color: #333;
            }
        }
    }
    

    在这里插入图片描述

  • 相关阅读:
    Python类属性的延迟计算
    解析Python编程中的包结构
    解析Python编程中的包结构
    Python查询Mysql时返回字典结构的代码
    VS2010中如何查看DLL的导出接口
    C++ 简单的日志类
    ilmerge工具合并多个DLL或EXE
    基于InstallShield2013LimitedEdition的安装包制作
    c# 操作注册表
    Source Insight 常用设置和快捷键大全
  • 原文地址:https://www.cnblogs.com/Chinatsu/p/14130701.html
Copyright © 2011-2022 走看看