新手问题 rails 怎么实现根据分辨率切换 css 文件这样的响应式？
新手问题，求各位前辈解答： 不使用用库，因为所有 scss 文件最后都会被 application.scss 打包成一个 css 文件，所以不知道怎么实现最初静态页面中的
<link rel="stylesheet" media="(min-width: 992px)" href="css/nav.css"> <!-- 大于992px，加载正常css -->
<link rel="stylesheet" media="(max-width: 992px)" href="css/nav_m.css"> <!-- 小于992px，加载移动css -->
这样的响应式效果。
myApp.config(function($routeProvider, $cssProvider) {
angular.extend($cssProvider.defaults, {
breakpoints: {
mobile: '(max-width: 480px)',
tablet: '(min-width: 768px) and (max-width: 1024px)',
desktop: '(min-width: 1224px)'
}
});
$routeProvider
.when('/my-page', {
templateUrl: 'my-page/my-page.html',
css: [
{
href: 'my-page/my-page.mobile.css',
breakpoint: 'mobile'
}, {
href: 'my-page/my-page.tablet.css',
breakpoint: 'tablet'
}, {
href: 'my-page/my-page.desktop.css',
breakpoint: 'desktop'
}
]
});
});
Rei
#5
2015年04月20日
因为所有 scss 文件最后都会被 application.scss 打包成一个 css 文件
config.assets.precompile += ['nav.css', 'nav_m.css']
<%= stylesheet_link_tag "nav", media: "(min-width: 992px)" %>
<%= stylesheet_link_tag "nav_m", media: "(max-width: 992px)" %>
