视口viewport与单位rem的本质

结论:

  视口viewport的设置是为了让字的显示在不一样的屏幕下保持一致.

 单位rem的使用是为了让页面中的布局元素的比例在不一样的屏幕下显示的比例保持一致.

现象:

  咱们看电脑时候的网页的时候的字体大小假如是font-size:20px,可是一换到手机上的时候显示字体就会变得太小,这是由于viewport的关系.

 viewport概念:决定一个屏幕可以显示的最大布局宽度,若是一个ipone6手机的可视视图为375像素,但让它的布局宽度以960px去显示就会适当的缩小总体布局来容纳可视视图,也就是可视视图的1个像素对应布局视图的960/375px个像素,因此虽然css中font-size:20px没有变化可是物理上的像素产生了变化

 

 

 那若是咱们把viewport设置为可视界面的宽度,那么布局视图的px与可视视图的px意义对应,字体也不会缩小

 

 若是viewport=device-width可否说明布局视图的大小就是不会超出设备的宽度了呢,视图的宽度确实是不会超出设备的宽度可是元素的长度若是超出375的范围了仍是会有滚动条的.

状况1:(设置viewport=device-width的时布局页面与设备宽度的比例状况)

 

 

 

状况2:(设置viewport=device-width的时布局页面溢出时与设备宽度的比例状况)

 

 

 

 

状况2:(不设置viewport=device-width时view-port的布局页面与设备宽度的比例状况)

 

    咱们该如何解决上述问题呢,就是当设计在ipne6的上页面在ipone4的页面上也能显示出来,并且不会出现超出的滚动条,这就须要舍弃px固定单位,采用rem的单位

 rem单位的简述,能够根据网页的根元素来设置字体大小的相对单位来改变.

 一般咱们设置640的html{font-size:100px}这样咱们能够轻松的写出关于设计稿上的1px转换成rem就是0.01rem

    咱们须要知足如下关系式  640/320 = 100/fs    求出fs得出相应须要改变的font-size,而一旦改变了根元素font-size的值,之前定义的rem单位的值也会随之发生改变,无需一个一个的去修改,rem的做用就是经过修改一个html下的font-size元素,其余用rem的元素宽度也会同时改变.并且这个关系的fs能够经过js来动态获取,这样咱们就见简单的实现了移动的自适应.

1 <script>
2     var des = 640; //设计搞的宽度
3     var winW = document.documentElement.clientWidth; //当前设备的物理宽度
4     document.documentElement.style.fontSize = winW/desW*100+"px"; //获取以font-size的100px为基准的相对比例字体大小
5 </script>