我为不同的分辨率大小添加了背景色，以便可以更轻松地查看折叠过程中的变化。当我缩小和扩展开发中的窗口时，我能够看到颜色的变化。因此，责任感在发展中是有效的。当我将项目发送到生产环境时，我们的手机或平板电脑不会使用自定义CSS。我在标签上缺少什么吗？还是我执行错了？我尝试了以下
@media screen only ()
@media screen and ()
@media all and ()
他们都在开发中工作。。。。但是在生产中什么也没有发生。
这是我的bootstrap_and_overrides.css文件
@import "twitter/bootstrap/bootstrap";
.hero-unit{
background-color: green;
padding: 600px;
margin-bottom: 300px;
}
body {
padding-top: 41px;
}
.span12 {
background-color: white;
padding:0px;
}
.btn-primary {
background-image: none;
filter: none;
}
.form-horizontal{
/* text-align:right; */
text-align:left;
}
@media screen and (max-width: 1199px) {
#new_customer {background: green; margin-left:-20% !important; }
}
@media screen and (max-width: 1024px) {
#new_customer {background: black; margin-left:-20% !important; }
}
@media screen and (max-width: 767px) and (orientation:portrait) {
#new_customer {background: red; margin-left:8% !important; }
}
@media screen and (max-width: 480px) and (orientation:portrait); {
#new_customer {background: blue; margin-left: 21% !important; }
}
@import "twitter/bootstrap/responsive";
// Set the correct sprite paths
@iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
@iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: asset-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: asset-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: asset-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: asset-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: asset-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
@import "fontawesome/font-awesome";
// Glyphicons
//@import "twitter/bootstrap/sprites.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @linkColor: #ff0000;
这是我的application.html.erb文件，其中包含head标签
<!DOCTYPE html>
<html>
<head>
<title>Solano</title>
<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => true %>
<%= javascript_include_tag "application", "data-turbolinks-track" => true %>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="background-color:#93df75">
<div class="navbar navbar-default navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">SolanoSprinklers.net</a>
<div class="nav-collapse">
<ul class="nav pull-right">
<li><%= link_to "Home",home_index_path %></li>
<li><%= link_to "Sprinkler Services",home_services_path %></li>
<li><%= link_to "Testimonials",home_testimonials_path %></li>
<li><%= link_to "Contact Us",home_contact_path %></li>
</ul>
</div>
</div>
</div>
</div>
<!-- <div class="hero-unit" style="background-color:#93df75; height:15px">
<div class="container">
<h3>text will go here</h3>
</div>
</div>-->
<div class="container" style="padding-bottom:25px">
<div style="box-shadow: 10px 10px 10px #00cc00">
<%= image_tag 'Solano2.png' %>
</div>
</div>
<div class="container">
<div class="row">
<div class="span10">
<%= yield %>
</div>
</div>
</div>
<br>
<hr>
<footer style="background-image: url(assets\images\grass.png)">
<div class="container">
<div class="row">
<div class="span2">
<h6>Copyright © 2014 Solano Sprinklers</h6>
</div>
<div class="span4">
<h6>About Us</h6>
<p><b>South Chicagolands's Premiere Residential and Commercial Lawn Irrigation Installation and Repair</b> </p>
</div>
<div class="span4">
<h6>Navigation</h6>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Testimonial</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
<div class="span2">
<h6>Follow Us</h6>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Google Plus</a></li>
<li><a href="#">YouTube</a></li>
</ul>
</div>
</div>
</div>
</footer>
</body>
</html>
这是production.rb
Solano::Application.configure do
# Settings specified here will take precedence over those in config/application.rb.
# Code is not reloaded between requests.
config.cache_classes = true
# Eager load code on boot. This eager loads most of Rails and
# your application in memory, allowing both thread web servers
# and those relying on copy on write to perform better.
# Rake tasks automatically ignore this option for performance.
config.eager_load = true
# Full error reports are disabled and caching is turned on.
config.consider_all_requests_local = false
config.action_controller.perform_caching = true
# Enable Rack::Cache to put a simple HTTP cache in front of your application
# Add `rack-cache` to your Gemfile before enabling this.
# For large-scale production use, consider using a caching reverse proxy like nginx, varnish or squid.
# config.action_dispatch.rack_cache = true
# Disable Rails's static asset server (Apache or nginx will already do this).
config.serve_static_assets = true
# Compress JavaScripts and CSS.
config.assets.js_compressor = :uglifier
# config.assets.css_compressor = :sass
# Do not fallback to assets pipeline if a precompiled asset is missed.
config.assets.compile = true
# Generate digests for assets URLs.
config.assets.digest = true
# Version of your assets, change this if you want to expire all your assets.
config.assets.version = '1.0'
# Specifies the header that your server uses for sending files.
# config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
# config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx
# Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
# config.force_ssl = true
# Set to :debug to see everything in the log.
config.log_level = :info
# Prepend all log lines with the following tags.
# config.log_tags = [ :subdomain, :uuid ]
# Use a different logger for distributed setups.
# config.logger = ActiveSupport::TaggedLogging.new(SyslogLogger.new)
# Use a different cache store in production.
# config.cache_store = :mem_cache_store
# Enable serving of images, stylesheets, and JavaScripts from an asset server.
# config.action_controller.asset_host = "http://assets.example.com"
# Precompile additional assets.
# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
# config.assets.precompile += %w( search.js )
# Ignore bad email addresses and do not raise email delivery errors.
# Set this to true and configure the email server for immediate delivery to raise delivery errors.
# config.action_mailer.raise_delivery_errors = false
# Enable locale fallbacks for I18n (makes lookups for any locale fall back to
# the I18n.default_locale when a translation can not be found).
config.i18n.fallbacks = true
# Send deprecation notices to registered listeners.
config.active_support.deprecation = :notify
# Disable automatic flushing of the log to improve performance.
# config.autoflush_log = false
# Use default logging formatter so that PID and timestamp are not suppressed.
config.log_formatter = ::Logger::Formatter.new
end
最佳答案
既然您说它正在开发中而不是在生产中工作，并且您正在修改资产的事实使我相信这些资产已在服务器上正确使用。解决此问题的一种方法是在推送之前对资产进行预编译，但是一段时间后可能会很烦人。
使用rails_12factor宝石：
group :production do
gem 'rails_12factor'
end
并运行
bundle install。当您将代码推送到生产环境时，这将自动预编译资产。