Res.js 响应式Web开发的瑞士军刀

Swiss Army Knife For Responsive Sites. 可以检测屏幕大小，浏览器类型，操作系统和布局列数等。

responsive

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2394
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

case 'mobile':
      $('.box').each(function(){
        $(this).css('width',r.grid.colSpan[4]);
        $(this).css('top',80*$(this).index()+'px');
        $(this).css('left',r.grid.col[0]); 
      });
      break;
    case 'small':
      $('.box').css('top','0px'); 
      $('.box').css('width',r.grid.colSpan[6]);
      $('.box:eq(0)').css('left',r.grid.col[0]);
      $('.box:eq(1)').css('left',r.grid.col[6]);
      $('.box:eq(2)').css('top',$('.box:eq(0)').height()+20);
      $('.box:eq(2)').css('left',r.grid.col[0]); 
      $('.box:eq(3)').css('top',$('.box:eq(0)').height()+20); 
      $('.box:eq(3)').css('left',r.grid.col[6]);  
      break;
    case 'desktop':       
      $('.box').css('width',r.grid.colSpan[4]);
      $('.box').css('top','0px');                       
      $('.box:eq(0)').css('left',r.grid.col[0]);
      $('.box:eq(1)').css('left',r.grid.col[4]);  
      $('.box:eq(2)').css('left',r.grid.col[8]); 
      $('.box:eq(3)').css('left',r.grid.col[12]); 
      break;      
    }  
};
window.addEventListener('stateChange',function(ev){
    updateLayout();
});

// usually res.js dispatches the stateChange event on initialization, but for some reason this does not work here in codepen
updateLayout();

编译

CSS

HTML

Swiss Army Knife For Responsive Sites. 可以检测屏幕大小，浏览器类型，操作系统和布局列数等。

responsive

编辑器支持Emmet

快捷键

Swiss Army Knife For Responsive Sites. 可以检测屏幕大小，浏览器类型，操作系统和布局列数等。

responsive

使用css flexbox（弹性框）实现的响应式布局网站模板

CSS3 动态高度梯田样式的响应式标签集

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：