WEB前端--viewport、rem、CSS新增单位 和 visibility

viewport

移动端适配 viewport 元标签,可以结合比例控制大小来完成移动端适配。

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
统一手机端设备的分辨率比例,不允许缩放.

属性值说明：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale：初始缩放比例，也是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。禁止缩放 因为缩放 页面布局会乱
user-scalable：用户是否可以手动缩放 yes /no

rem

rem布局思想

rem是字体大小单位

和我们的em单位很像1em =16px；

假如给一个div标签设置字体大小为20px,里面的子元素字体大小就是20px,里面的1em也就是20px;

rem（root elemnet em根元素）是相对于根元素,如果html元素没有设置font-size,则默认1rem=16px.

<style>
        html{
           font-size: 50px;        /*html 是根标签*/
        }
         div{         
           font-size:.5rem;      /*字体大小完全统一,  相当于视口 html 的50%*/
        }
 </style>

<div class="wrap">
        <div class="son1">1234
            <div class="son2">4567
                <div class="son3">6789
                    <div class="son4">8910   
                    </div>
                </div>
            </div>
        </div>
    </div>

效果图

rem:html 根标签的字体大小的倍数,值是完全统一的标准的衡量单位,通常用于移动端开发

不同设备中默认字体大小不一致,但是,看上去是一样大的, 和页面成比例.

​ 根据不同设备设计的字体大小,来统一页面的大小

​ html标签的字体大小可以关联当前的设备大小

​ html字体大小,就可以用来进行页面开发布局

同样的内容,使用rem进行布局,如果我在一个较小的设备A上显示为宽度的一半,那换到较大的设备B之后同样也会是宽度的一半.

​ rem统一了不同设备的分辨率,使得同一个rem在不同设备占比一致

• 上面说HTML标签大小可以关联到当前设备大小,怎么关联的呢?

​ JS 控制查询设备宽度,提供 JS 获取的屏幕宽度,设置html标签的字体大小,让页面效果统一.

​ 学会获取屏幕宽度,就可以设置HTML的字体大小了.

rem适配

	<script>
        var html = document.querySelector('html');

        function changeRem() {
            var width = html.getBoundingClientRect().width;
            html.style.fontSize = width / 10 + "px"
        }
        
        changeRem();
        
        window.addEventListener('resize', changeRem)
    </script>

em

em : 是子类与父类的关系，它是表示子元素是父元素的多少倍。

<style>
        html{
           font-size: 50px;   /*html 是根标签*/
        }
        div{
           font-size:.8em;    /*字体大小会依次减小*/
       }
</style>
    <div class="wrap">
        <div class="son1">1234
            <div class="son2">4567
                <div class="son3">6789
                    <div class="son4">8910
                    </div>
                </div>
            </div>
        </div>
    </div>

效果图

css新增单位

VW / VH

1VW = 设备视口1%宽度
1VH = 设备视口1%高度
视口也就是浏览器你所能够看到的区域

.hh{
           width:50vw;            /*宽度为视口的 50%*/
           height:50vh;           /*高度为视口的 50%*/
           background-color:pink;
       }
       .ww{
           width:50vw;            /*宽度为视口的 50%*/
           height:50vh;           /*高度为视口的 50%*/
           background-color:blue;
       }

 <div class="hh">1234</div>
 <div class="ww">1233</div>

效果

vmin 和 vmax

1vmin 每次改变视口大小都在视口的宽度和高度之间取一个最小的值将其乘以1/100

 div{
			width: 50vmin;    /*宽度以视口小的进行缩放*/
			height: 50vmin;   /*高度以视口小的进行缩放*/
			background-color:green;
	}

1vmax 每次改变视口大小都在视口的宽度和高度之间取一个最大的值将其乘以1/100

div{
			width: 50vmax;   /*宽度以视口大的进行缩放*/
			height: 50vmax;   /*高度以视口大的进行缩放*/
			background-color:green;
		}

vmin、vmax和百分比的区别

​ 百分比会受父级元素的限制

​ vw 和 vh不会受到父级元素的限制

visibility

现在我有一个需求,想让鼠标放在这个盒子时右边出现另外一个盒子.该如何实现呢？

方法一：用display实现
缺点：不能实现淡出、淡入效果

<div class="wrap">
		<div class="content"></div>
	</div>	
	.wrap{
			width: 200px;
			height: 200px;
			background-color:pink;
		}
/*是不是需要在盒子里面去写上另外一个盒子用 hover*/

	.wrap{
			position: relative;
			width: 100px;
			height: 100px;
			background-color:pink;
		 }
		.son{
			display: none;
			position: absolute;
			left: 100px;
			width:300px;
			height: 300px;
			background-color: skyblue;	
		 }
		.wrap:hover > .son{
			display: block;
		 }
	/*现在鼠标放在左边,右边会显示,放在右边,右边不会消失.*/

.son{
		transition: .6s;
		opacity: 0;	
}
.wrap:hover > .son{
			display: block;
			opacity: 1;
		}
    /*依然不会支持.*/

这个代码没有生效是因为display不支持transition;

方法二：用动画实现
缺点：当鼠标移进时会有淡入、淡出的效果，但是当鼠标移出后效果就实现不了

.son{
		animation:show .6s;	
	}
    @keyframes show{
			from{
				opacity: 0;
			}
			to{
				opacity: 1;
			}
		}
	/*现在这个淡入淡出的效果也能实现.
	但是我个人觉得这样的实现效果优点差强人意*/

方法三：用visibility实现
优点：无论鼠标是移入、移出都会有淡入淡出的效果

.son{
			visibility: hidden;
			position: absolute;
			left: 100px;
			width:200px;
			height: 200px;
			background-color: skyblue;
			transition: .6s;
			opacity: 0;
			}
.wrap:hover > .son{
			visibility:visible;
			opacity: 1;
		}
/*现在鼠标无论是离开还是移入都有淡入淡出的效果.
不同于上面我们鼠标移开的时候整个元素的display设置为了none而导致没有移开的效果了
*/

visibility和display的区别

display:none：
1）不显示,不渲染,没有交互; 产生reflow和repaint(回流与重绘) 开关状态只有真或者假,不存在状态的改变过程；
2）其是个相当惨无人道的声明，子孙后代全部搞死（株连性），而且连块安葬的地方都不留（不留空间），导致全体民众哗然（渲染与回流）。

visibility（两个值hidden 和 visible）
visibility:hidden
1）不显示,渲染占据空间,有交互; 存在一个改变过程,上面透明度就像是0慢慢变到1的过程;
2）visibility具有继承性，给父元素设置visibility:hidden;子元素也会继承这个属性。但是如果重新给子元素设置visibility: visible,则子元素又会显示出来。这个和display: none有着质的区别
3）其具有人道主义关怀，虽然不得已搞死子孙，但是子孙可以通过一定手段避免（伪株连性），而且死后全尸，墓地俱全（占据空间），国内民众比较淡然(无渲染与回流)。

opacity和visibility结合一起使用
opacity:会显示渲染.为0的话在页面显示为透明,可以触发交互.

设置了display：none 之后，元素相当于从页面中被踢出去了，transition效果就不生效了，绑定在这个元素上的效果也就不存在了。

而设置了opacity：0 之后，元素位置依然被保留，所以transition效果依然存在，绑定在这个元素上的效果也存在。

但是设置了visibility:hidden之后，元素位置依然被保留，但是元素的transition效果就不会生效了，绑定在这个元素上的事件也不会被触发。

很多时候，我们要让一个元素保留位置的同时不触发绑定在这个元素上的事件，此时要结合visibility、opacity、transition一起用才能实现这样的效果。

（不得不说opacity和visibility结合一起使用，使得同一个元素产生淡进淡出的效果很好用）

• visibility: hidden不会影响计数器的计数

	<ol>
		<li style="visibility:hidden;">元素一</li> 将元素一隐藏
		<li>元素二</li>
		<li>元素三</li>
	</ol>

效果图