다른 해상도 크기에 배경색을 추가하여 축소 중에 변경 사항을 더 쉽게 확인할 수 있습니다. 현상 창을 축소하거나 확대하면 색상 변화가 일어나는 것을 볼 수 있습니다. 따라서 책임감은 개발에 효과적입니다. 프로젝트를 프로덕션에 보낼 때 휴대폰이나 태블릿이 사용자 지정 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;
다음은 head 태그가 포함 된 application.html.erb 파일입니다.
<!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. 이렇게하면 코드를 프로덕션에 푸시 할 때 자산이 자동으로 사전 컴파일됩니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다