Tag: css

Rails 3中的移动样式切换，辅助方法与媒体查询: 我正在研究为移动应用设计Rails应用程序的方法。这个想法很常见，使用一组样式用于移动浏览器，另一套用于传统浏览器。据我所知，在Rails中有两种基本的方法：使用帮助程序方法检测用户代理，然后执行切换。 application_controller.rb private def mobile? request.user_agent =~ /Mobile|webOS/ end helper_method :mobile? application.html.erb 或者在样式表中使用媒体查询 body { // basic styles } @media all and (max-width: 600px) { body { // extra styles for mobile } } @media all and (min-width: 600px) { body { // extra styles for desktop } } 我的问题是什么是权衡？一种方法通常更好还是两者都有良好的用例。提前致谢

部署到Heroku时，Rails custom.css无法正常工作: 知道为什么我的custom.css在我的开发环境中会完美运行，但在部署到Heroku时无法正常工作吗？有财产的东西显示：无; 在部署时出现，但在开发时适当隐藏。谢谢！

如何在rails 3.1中的水平表中显示条目: 我想在Rails中显示电子商务页面的项目，而不是标准的垂直列表，我想从左到右的标题和图像，大约4跨，然后继续列表添加：即。第1项第2项第3项第4项第5项入门6 …. 我的第一个猜测是为每个列创建一个范围 – 我可以将条目跳过4倍，但我想知道是否有更好的解决方案使用CSS或任何其他技巧？

将LESS版本的Bootstrap-Material-Design集成到Rails项目中: 我正在使用这个gem bootstrap-material-design ，它是https://github.com/FezVrasta/bootstrap-material-design库的sass版本，但最近我注意到sass版本不再维护了。问题我面对的这个gem是它不会将按钮和flash消息转换为素材样式。这里建议的一个解决方案： https ： //github.com/FezVrasta/bootstrap-material-design/issues/535是使用LESS版本，但我不知道如何集成此库的LESS版本。有人已经这样做了吗？更新：如果有人想要将Bootstrap-Material-Design添加到他们的网站而不使用任何框架或服务器端语言，如Ruby，PHP等……，只需使用HTML5，CSS3和JS。他们可以按照以下说明操作：安装和下载bootstrap-material文件夹 bower install bootstrap-material-design 在head标记下链接bootstrap css和material css minified file 链接Javascript文件最后，您必须在身体底部使用此脚本初始化一些材质组件 $(document).ready(function() { $.material.init(); });

RefineryCMS 2.1.0和Zurb 4顶级菜单，带有下拉导航: 我正在尝试使用Zurb粉底来设计使用最新版炼油厂构建的应用程序。我开始遵循本指南 http://blog.flatironschool.com/post/54511602806/build-a-blog-based-site-with-refinerycms 但最新版本的炼油厂使用“menu-presenter”来布局菜单。我到目前为止： module ApplicationHelper def zurb_menu menu_items = Refinery::Menu.new(Refinery::Page.in_menu) presenter = Refinery::Pages::MenuPresenter.new(menu_items, self) presenter.css = “top-bar-section” presenter.dom_id = nil presenter.menu_tag = :section presenter.list_tag = “ul class=’left'” presenter end end 这种工作，但元素不太正确，主要问题是我不知道如何或在何处添加下拉类以使子元素下拉。使用上面的代码，子元素只是一直在扩展。谢谢你的帮助

application.css不作为资产: 编辑4,5和6 8个小时，欢迎任何更多的想法:)也许这个bug已经知道并解决了，但是我得到了我在编辑2和3中描述的行为，当你在app / assets / stylesheets中的.css.erb文件中有这个时： li { background-image: url(); } 问题部分似乎是asset_path方法调用，但.css.scss也打破了它： li { background-image: url(image-path(“logo_80px_80px.png”)); } 我的GemFile是： source ‘http://rubygems.org’ gem ‘rails’, ‘3.1.3’ gem ‘pg’, ‘0.11.0’ gem ‘gravatar_image_tag’, ‘1.0.0.pre2’ gem ‘will_paginate’ gem ‘rake’ gem ‘jquery-rails’ gem ‘nested_form’ gem ‘acts-as-taggable-on’ gem ‘sass-rails’ group :assets do gem ‘coffee-rails’, ‘~> 3.1.0’ gem ‘uglifier’, ‘>= 1.0.3’ end group :development […]

使用多个SASS文件: 我想将我的（巨型）全局css文件分成多个文件。我正在使用sass。有没有一种简单的方法可以让sass观看多个文件？我想我可以使用@import，但只是想知道是否有另一种（更好的）方式。提前致谢。

如何将css / sass样式表与rails中的视图相关联？: 这是一个非常普遍的问题，我还没有找到一个简单的答案。我正在处理凌乱的遗留代码，它为相同的类/视图多次指定样式。我在app/styles有.sass文件，在public/stylesheets和public/css .css文件我不明白哪些样式表包含哪些样式，或者它们是否包括哪些样式表。如何将样式表匹配到rails中的特定视图？如何定义样式之间的层次结构，以便可以覆盖其他层次？将样式与视图匹配的rails默认是什么？我没有在应用中看到任何stylesheet_link_tag

在rails项目中添加外部样式表: 我正在使用Rails 3.2.1。如何在rails应用程序中添加外部样式表？我尝试了以下答案但无济于事：如何链接到Ruby on Rails中的外部样式表？ – 但答案中给出的链接不起作用。如何在rails应用程序中使用带ruby的CSS？ – 表示在公共/样式表中添加样式表，但我没有名为public/stylesheets文件夹。我有一个公用文件夹，但我在/vendor/assets下有样式表文件夹。 css @import外部样式表 – 但目前还不清楚。

Heroku和@ font-face – 嵌入式字体不会在Heroku上显示: 我使用CSS @font-face标签将一些许可字体嵌入到我的Rails应用程序中。这些字体位于我的Rails 3应用程序中的”../Public/Fonts/”路径中，并在我下拉回购并运行的任何本地计算机上完美呈现。但是，当我将我的应用程序推送到Heroku时，它似乎无法找到字体。你可以告诉它它正在查看字体目录，但永远不能访问它们。我在哪里放置字体或者如何在@ font-face声明中键入字体路径似乎并不重要。我的字体位于#{RAILS.root}/public/fonts/ChunkFive 这是我的@ font-face声明： @font-face { font-family: “ChunkFive”; src: url(“../fonts/ChunkFive/ChunkFive-webfont.eot”); src: local(“?”), url(“../fonts/ChunkFive/ChunkFive-webfont.woff”) format(“woff”), url(“../fonts/ChunkFive/ChunkFive-webfont.ttf”) format(“truetype”), url(“../fonts/ChunkFive/ChunkFive-webfont.svg”) format(“svg”); } 这是我为每种字体获得的404资源未找到消息： Request URL:http://thedanbarrett.heroku.com/fonts/ChunkFive/ChunkFive-webfont.woff Request Method:GET Status Code:404 Not Found Request Headers Referer:http://thedanbarrett.heroku.com/home User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10 (KHTML,like Gecko) Chrome/8.0.552.224 Safari/534.10 Response Headers Age:0 Connection:keep-alive Content-Length:727 […]