第十三周第一天笔记之less

less知识

• 简书链接
  • less使用总结：less基础知识
  • less使用总结2：less使用总结
• 单位px,em,rem讲解
  • 链接文档：分析单位文档;
  • 任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。
  • 一般浏览器在设置时，给html或body设置font-size:百分数;
    • font-size: 62.5%;:指的是当前浏览器中的字体高度为62.5%*16px=10px;即：1em=10px;
    • font-size: 87.5%;:指的是当前浏览器中的字体高度为87.5%*16px=14px;即：1em=14px;
  • em单位是相对于当前对象内文本的字体尺寸，如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸，国外使用比较多
  • rem单位是相对于html根标签的字体大小进行取值；
  • 在一般的PC端网页制作过程中，px和em用的比较多，在移动端一般采用rem。
  • 以上的算法，指的是所有浏览器下的字体值都是定值，不适用于不同的浏览器中；
  • 实际开发中会规定好在制定屏幕下的字体大小；一般在320px的浏览器屏幕中，会放大一倍，即640px屏幕下制作，然后设置的字体大小为定值，通过比例，让其在不同的屏幕下，也按比例缩放；

   //获取可视区域的宽度
   var $screenWidth=$(window).width();
   //在实际开发中会规定好在制定屏幕下的字体大小；一般在320px的浏览器屏幕中，会放大一倍，即640px屏幕下制作，然后设置的字体大小为定值，通过比例，让其在不同的屏幕下，也按比例缩放；
   var kfWidth=640;
   var fSize=100;
   //jQuery中获取html根标签
   var $html=$("html");//在原生JS中获取html标签：document.documentElement;
   var $htmlFont;
   $htmlFont=$screenWidth/kfWidth*fSize;
   //jQuery中设置html的字体大小
   $html.css("fontSize",$htmlFont);
   //原生JS中设置字体大小
   document.documentElement.style.fontSize=$htmlFont+"px";