CSS-媒体查询和移动端适配

1、滚动

鼠标滚动一定距离之后浏览器最上方显示一个固定定位搜索框，小于这个距离隐藏搜索框

jquery实现：

<style type="text/css">
    .fixedtopnav{
	display: block;
	position: fixed;
	top: 0;
    }
</style>
<div class="fixedtop"></div>
<script type="text/javascript">
    $(function() {
        $(window).scroll(function() {
	        if ($(document).scrollTop() >= 600) {
	            $(".fixedtop").addClass("fixedtopnav");
	        } else {
	            $(".fixedtop").removeClass("fixedtopnav");
	        }
        })
    })
</script>

原生JS实现：

<script type="text/javascript">
    let fixedtop = document.querySelector(".fixedtop");
    window.onscroll = function() {
        let sY = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop;
        if (sY >= 600) {
            fixedtop.classList.add("fixedtopnav");
        }else{
            fixedtop.classList.remove("fixedtopnav");
        }
    }
</script>

2、暗锚

主体内容前加一个暗锚，可以实现锚点跳转到指定地方时离浏览器上方有一段距离

<!-- 锚点-->
<a href="#seckill">
......

<!-- 给锚点要跳转到的div前面增加一个暗锚-->
<a id="seckill" class="anmao1"></a>
<div class="seckill">
    ......
</div> 
 

将锚点进行偏移，并隐藏占位

.anmao1 {
    position: relative;
    top: -80px;
    display: block;
    height: 0px;
    overflow: hidden;
}

3、媒体查询

<style type="text/css" media="screen">
    @media screen and(min-width:1200px) {
	    div {
	        width: 500px;
	        height: 300px;
	        background-color: red;
	        font-size: 100px;
	    }
    }

    @media screen and(min-width:800px) and(max-width:1200px) {
	    div {
            width: 300px;
            height: 100px;
            background-color: skyblue;
            font-size: 80px;
	    }
    }

    @media screen and(max-width:800px) {
	    div {
            width: 100px;
            height: 300px;
            background-color: yellow;
            font-size: 0px;
	    }
    } 
</style>

4、移动端自适应布局

核心代码：

<script type="text/javascript">
  (function(doc, win) {
     var docEl = doc.documentElement,
	resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
	recalc = function() {
	    var clientWidth = docEl.clientWidth;
	    if (!clientWidth) return;
	    if (clientWidth >= 640) {
		    docEl.style.fontSize = '100px';
	    } else {
	        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
	    }
	};
     if (!doc.addEventListener) return;
     win.addEventListener(resizeEvt, recalc, false);
     doc.addEventListener('DOMContentLoaded', recalc, false);
  })(document, window);
</script>

使用方式：将调试界面的产品宽度375进行100×375÷640≈58.594，之后计算标签的宽高使用标签实际宽高px÷58.594，得到的结果以rem为单位就能实现手机端适配。

        

比如下面这个盒子宽高为273.2px，30px，手机端宽度为273.2÷58.594=4.663rem，高度为30÷58.594=0.512rem

        

5、px、em、rem区别

px：相对长度单位。相对于显示器屏幕分辨率而言的；

em：相对长度单位。相对于当前元素的字体大小来计算，若当前对象中的字体大小未设置，就会从父元素中继承其大小，父元素也没有设置，就一直上溯，直到浏览器默认字体大小，任意浏览器默认字体高都是16px

rem：相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px。如果html根节点设置字体font-size为100px，则1em=100px，2em=200px，跟父级字体无关。