sass初体验-一个简单版rem布局的H5页面

刚入前端时间不久，样式除了css写的最多的就是less，对sass这门css预处理语言还比较陌生，前段时间正好接受了公司的一个h5活动小项目，其实活动模板已经有了，跟后端交互的逻辑跟之前的一样，不同就是页面的皮肤和一些css样式。虽然只是非常简单的活，但是第一次接触sass，并且是用sass写的移动端rem布局，对sass对移动端rem布局也算是有点收获。一直以来移动端的布局方案就很多很多，作为一名新手，套用框架可以玩的溜，但是离开那些移动端ui框架就显得很吃力了，并且网上流传的方案五花八门，很多时候看了几遍貌似有些懂了，过了一阵子还是一头雾水。究其原因，还是由于缺乏实战的考验。 这里做了一个用sass写的H5demo页面，并没有考虑那些复杂的因素，比如dpr，一像素边距问题，可能更适合在移动端样式方面跟我一样菜或者更菜的新手参考，前端老司机不用看了，个人觉得基础差的同学从简单入手是一个更恰当的方法，对于移动端的样式问题，新手一上来就纠结在那些dpr，一像素边距等问题很可能会一头雾水，先做到了解有那些概念即可，等经过一些实践再回过头来看可能跟容易明白那些概念。

这个demo通过js控制了小屏下对html的font-size进行动态控制，在ipone 6/7/8等屏幕下 1rem=16px,在其他手机屏幕下等比例变化，在sass中写了一个转化函数rem（），相当于px转rem的函数，在后面的样式中会不断用到这个函数，我们只需填入实际想要的px单位值即可，比如以iphone 7 为基准，想让页面头部的高度为50px，那么写height:rem(50)即可。

html代码

 


    
    
    
    Document

<script src="demo1.js"></script>
<link rel="stylesheet" href="demo1.css">
复制代码

搜索

上海人民广场

用户

<main class="content">
    <div class="title"><h4>附近商家</h4></div>
    <ul class="merchant-list">
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/4/58/7967c10b9373bdb8bd684506609f4png.png" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/6/12/1bf0b22271fa3aa63b2c420efe961jpeg.jpeg" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/4/58/7967c10b9373bdb8bd684506609f4png.png" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/6/12/1bf0b22271fa3aa63b2c420efe961jpeg.jpeg" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/4/58/7967c10b9373bdb8bd684506609f4png.png" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
            <a href="javascript:;" class="left">
                <img src="https://fuss10.elemecdn.com/6/12/1bf0b22271fa3aa63b2c420efe961jpeg.jpeg" alt="">
            </a>
            <div class="right">
                <h4>焖饭大师(人民广场店)</h4>
                <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                <p class="other">￥15元起送/配送费2.5</p>
            </div>
            <div class="distance">742m/<span class="time">25分钟</span></div>
        </li>
        <li class="merchant-item">
                <a href="javascript:;" class="left">
                    <img src="https://fuss10.elemecdn.com/4/58/7967c10b9373bdb8bd684506609f4png.png" alt="">
                </a>
                <div class="right">
                    <h4>焖饭大师(人民广场店)</h4>
                    <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                    <p class="other">￥15元起送/配送费2.5</p>
                </div>
                <div class="distance">742m/<span class="time">25分钟</span></div>
            </li>
            <li class="merchant-item">
                <a href="javascript:;" class="left">
                    <img src="https://fuss10.elemecdn.com/6/12/1bf0b22271fa3aa63b2c420efe961jpeg.jpeg" alt="">
                </a>
                <div class="right">
                    <h4>焖饭大师(人民广场店)</h4>
                    <p class="info"><span class="star">★★★★★</span><span class="score">5.0</span><span class="total">月售2745单</span></p>
                    <p class="other">￥15元起送/配送费2.5</p>
                </div>
                <div class="distance">742m/<span class="time">25分钟</span></div>
            </li>
    </ul>
</main>

<footer class="footbar">
    <ul>
        <li>外卖</li>
        <li>搜索</li>
        <li>订单</li>
        <li>我的</li>
    </ul>
</footer>
复制代码

sass代码

 @function rem($px){
    @return ($px/16)*1rem
}
a{
    text-decoration: none;
}
img{
    max-width: 100%;
}
ul,li{
    list-style: none;
}
*{
    margin: 0;
    padding:0;
}
html,body{
    position: relative;
    height: 100%;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
  }

//   头部
.tophead{
    width: 100%;
    height: rem(54);
    padding: 0 rem(20);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(59, 122, 216);
    color: #fff;
    position: fixed;
    top: 0;
    z-index: 9999;
    a{
        color: #fff;
        font-size: rem(16); 
    }
}

//中间内容
.content{
   height: 100%;
   width: 100%;
   padding: rem(54) rem(14);
   overflow-y: scroll;
   .title{
       height: rem(30);
       margin-top: rem(10);
       h4{
           height: 100%;
           line-height: rem(30);
           color: #666;
           font-weight: normal;
           font-size: rem(16);
       }
   }
   .merchant-list{
       .merchant-item{
           position: relative;
           border-bottom: rem(1.6) solid #efefef;
           padding: rem(14) 0;
           &:last-child{
            border-bottom:none;
           }
           .left{
               position: absolute;
               left: 0;
               top: rem(14);
               width: rem(80);
               img{
                   vertical-align: bottom;
               }
           }
           .right{
               margin-left: rem(80);
               padding-left: rem(16);
               font-size: rem(14);               
               h4{
                   height: rem(30);
                   line-height: rem(30);
                   color: #333;
                   font-size: rem(16);
               }
               .info{
                   margin-bottom: rem(14);
               }
               .star{
                   color: #e9b035;
               }
               .score{
                   color: #f55207;
               }
               .total{
                   color: #464242;
               }
               .other{
                   color: #747064;
               }
               
               span{
                   margin-right: rem(6)
               }
           }
           .distance{
               position: absolute;
               right: rem(0);
               bottom: rem(14);
               font-size: rem(14);
               color: #746e6e;
               .time{
                color: #6898f1;
            }
           }
       }
   }
}

// 底部
.footbar{
   position: fixed;
   bottom: 0;
   width: 100%;
   background: #fefefe;
   height: rem(54);
   border-top: rem(1) solid #eaeaea;
   z-index: 9999;
   li{
       width: 24%;
       display: inline-block;
       height: rem(60);
       line-height: rem(60);
       text-align: center;
       font-size: rem(14);
   }
}

js代码(引入jquery)

if(typeof($)!=='undefined'){
    console.log(753)
    $.extend({
        setRemValue:function(windowSize){
            
            if($(window).width()