電商商城首頁總結

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