工作总结（七月11-七月15）

PC端的自适应布局

​
.nav {
  height: 71px;
  min-width: 1250px;//设置一个最小宽度
  box-shadow: 0px 23px 80px rgba(122, 122, 122, 0.07), 0px 6.93383px 24.1177px rgba(122, 122, 122, 0.0456112), 0px 2.87996px 10.0172px rgba(122, 122, 122, 0.035), 0px 1.04162px 3.62304px rgba(122, 122, 122, 0.0243888);
}

.nav-content {
  width: 1220px;//容器的宽度需要小于我们的最小宽度
  margin: 0 auto;//保证我们的content内容一直居中显示
  position: relative;
}

​

抗锯齿的实现

 text-rendering: optimizeLegibility;-webkit-font-smoothing: antialiased;

如何引入如字体文件

@font-face {

  font-family: 'Alibaba PuHuiTi 55';

  src: url("https://www.feigelaowu.com/privatefont/AlibabaPuHuiTi-2-55-Regular.ttf");

}

sass中伪元素如何去使用（在字体前面添加图标）

 &:before {
        background-image: url(../images/groupyyq_m/before_icon.png);
        background-color: rgba(0, 0, 0, 0);
        background-repeat: no-repeat;
        width: 13px;
        height: 13px;
        position: absolute;
        background-size: contain;//铺满整个容器
        left: 0;
        top: 50%;
        margin-top: -7px;
        font-weight: 600;
        display: inline-block;
        content: "";//必填项
    }

font-weight改变字号的大小

移动端的自适应需要用到自动转rem的插件

<script>
    ; (function (designWidth, maxWidth) { var doc = document, win = window, docEl = doc.documentElement, remStyle = document.createElement("style"), tid; function refreshRem() { var width = docEl.getBoundingClientRect().width; maxWidth = maxWidth || 540; width > maxWidth && (width = maxWidth); var rem = width * 100 / designWidth; remStyle.innerHTML = "html{font-size:" + rem + "px!important;}" } if (docEl.firstElementChild) { docEl.firstElementChild.appendChild(remStyle) } else { var wrap = doc.createElement("div"); wrap.appendChild(remStyle); doc.write(wrap.innerHTML); wrap = null } refreshRem(); win.addEventListener("resize", function () { clearTimeout(tid); tid = setTimeout(refreshRem, 300) }, false); win.addEventListener("pageshow", function (e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300) } }, false); if (doc.readyState === "complete") { doc.body.style.fontSize = "16px" } else { doc.addEventListener("DOMContentLoaded", function (e) { doc.body.style.fontSize = "16px" }, false) } })(375, 600);
  </script>

需要给我们的外层元素撑整个容器

 js部分

scroll-behavior: smooth;//让滚动条滚动的动画更平滑,设置滚动的锚点
 overflow-x: hidden;//让动画产生的横向滚动条消失

顶部吸顶条