电商商城首页总结

1.首先需要看设计稿是多少(750px)，根据设计稿在设置rem，也就是设置html的字体大小，25*30=750

<!-- 在HTML开头就引入动态获取屏幕宽度 -->

<!-- rem实现适配 -->
    <script type="text/javascript">
        // 页面打开 立即计算
        document.querySelector('html').style.fontSize = window.screen.width / 25 + 'px';
        // 尺寸更改也会重新计算
        // 这里 写这个事件的目的是 是为了 让我们在 桌面端测试时 可以自动计算 移动端
        window.onresize = function() {
            document.querySelector('html').style.fontSize = window.screen.width / 25 + 'px';
        }
    </script>

在scss文件中设置rem
　　@function p2r($size) {
　　@return ($size/30) *1rem;
　　}

2.少用弹性布局，有兼容性问题，最好用浮动，float:left或者left，再用为元素清除法clearfix

.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
    line-height: 0;
    height: 0;
    clear: both;
    visibility: hidden;
}　

3.轮播图使用swiper来制作，并且轮播图变量需要不一样，并且需要给设置overflow:hidden

4.顶部和顶部使用mui框架来固定起来

5.用mui框架的地方a链接就不能跳转了，需要加一段js代码，才能使其调转，但是没有了单击事件，可以用span标签代替，

mui(‘body‘).on(‘tap‘,‘a‘,function(){document.location.href=this.href;});

6.页面需要css初始化比如normailze.css，在加公共css文件比如base.css，在把这两个引入的main.js中

@charset "utf-8";
// 引入 normalize
@import 'normalize.scss';
//引入base
@import 'base.scss';

7.文字超出文字怎么增加省略号

//超出一行的
div{
overflow: hidden; 
white-space: nowrap;
text-overflow:ellipsis;
}
//超出两行增加省略号
div{
word-break:break-all;
display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
}