业务线移动端适配方案总结

 
  /** 
 
 
   * sass的基本的使用reset.scss 
 
 
   * base.scss  
 
 
   * DOMContentLoaded:当Dom加载完成 
 
 
   * orientationchange:移动的时候和水平旋转的时候触发 
 
 
   * resize:当调整窗口的时候触发 
 
 
   * http://feg.netease.com/archives/570.html 具体的文档的说明  
 
 
   */ 
 
 
  // js加载 
 
 
  var 
  docEl = 
  doc. 
  documentElement; 
 
 
  var 
  resizeEvt = 
  "orientationchange" 
  in 
  window ? 
  "orientationchange" : 
  "resize"; 
 
 
  var 
  recalc = 
  function () { 
 
 
  var 
  clientWidth = 
  docEl. 
  clientWidth; 
 
 
  if ( 
  clientWidth >= 
  360 && 
  clientWidth < 
  375) { 
 
 
  clientWidth = 
  375 
 

   } 
 
 
  if (! 
  clientWidth) { 
  return } 
 
 
  docEl. 
  style. 
  fontSize = 
  312.5 * ( 
  clientWidth / 
  375) + 
  "%" 
 

   }; 
 
 
  if (! 
  doc. 
  addEventListener) { 
  return } 
 
 
  win. 
  addEventListener( 
  resizeEvt, 
  recalc, 
  false); 
 
 
  doc. 
  addEventListener( 
  "DOMContentLoaded", 
  recalc, 
  false); 
 

 
  // 为了防止js加载的问题，需要配合媒体查询 
 
 
  // 兼容部分机型采用js 设置根节点 font-size 不生效问题 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 320 
  px) { 
  html{ 
  font - size: 
  266.667 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 360 
  px) { 
  html{ 
  font - size: 
  312.5 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 375 
  px) { 
  html{ 
  font - size: 
  312.5 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 400 
  px) { 
  html{ 
  font - size: 
  333.333 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 440 
  px) { 
  html{ 
  font - size: 
  366.667 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 480 
  px) { 
  html{ 
  font - size: 
  400 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 520 
  px) { 
  html{ 
  font - size: 
  433.333 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 560 
  px) { 
  html{ 
  font - size: 
  466.667 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 600 
  px) { 
  html{ 
  font - size: 
  500 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 640 
  px) { 
  html{ 
  font - size: 
  533.333 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 680 
  px) { 
  html{ 
  font - size: 
  566.667 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 720 
  px) { 
  html{ 
  font - size: 
  600 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 760 
  px) { 
  html{ 
  font - size: 
  633.333 %; } } 
 

   @ 
  media 
  screen 
  and( 
  min - 
  width: 800 
  px) { 
  html{ 
  font - size: 
  666.667 %; } } 
 

 
  // SASS的项目写法总结 
 

 
  // 基本的使用SASS: 
 
 
  // http://www.ruanyifeng.com/blog/2012/06/sass.html接下来项目实践 
 
业务线移动端适配方案总结

猜你喜欢
