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;//让动画产生的横向滚动条消失
顶部吸顶条