个人中心
gpt4 book ai didi

css - 在我的 Rails 元素中，为什么我的媒体查询只在开发中响应？

转载 作者：行者123 更新时间：2023-11-28 09:00:22 25 4
gpt4 key购买 nike

我为不同的分辨率尺寸添加了背景颜色，这样我可以更容易地看到折叠期间的变化。当我在开发中缩小和扩大窗口时，我能够看到发生的颜色变化。所以responsivness在开发中是有效的。当我将元素发送到生产环境时，我们的手机或平板电脑无法接收自定义 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 &copy; 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

最佳答案

既然你说它在开发中而不是在生产中工作，而且你正在修改 Assets 这一事实让我相信这些 Assets 在服务器上得到了正确的服务。解决此问题的一种方法是在推送之前预编译 Assets ，但这会在一段时间后变得烦人。

使用 rails_12factor gem :

group :production do
  gem 'rails_12factor'
end

并运行 bundle install。当您将代码投入生产时，这将自动预编译 Assets 。

关于css - 在我的 Rails 元素中，为什么我的媒体查询只在开发中响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26942114/

25 4 0
文章推荐： css - 调整网络浏览器大小时如何使图像按钮保持原位
文章推荐： javascript newwindow.document.getElementById 有时不起作用
文章推荐： javascript - document.body.scrollTop 值停留在 0
文章推荐： css - 悬停图像效果 - 添加什么？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com