我在做一个元素时遇到了一个问题。 我将通过以下演示示例向您展示:
这是CSS代码:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
@media only screen and (max-width: 600px) {
div {
background: blue;
}
}
@media only screen and (min-width: 601px) and (max-width: 1000px) {
div {
background: green;
}
}
@media only screen and (min-width: 1001px) {
div {
background: red;
}
}
所以我的 div 应该是:
相反，它是:
为什么？似乎 (min-width:) 不包含在内。
所以我尝试了:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
@media only screen and (max-width: 600px) {
div {
background: blue;
}
}
@media only screen and (min-width: 600px) and (max-width: 1000px) {
div {
background: green;
}
}
@media only screen and (min-width: 1000px) {
div {
background: red;
}
}
所以我的 div 应该是:
相反，它是:
为什么？现在看来 (min-width:) 是包容性的。
但如果我尝试:
*, *::after, *::before {
box-sizing: border-box;
margin: 0;
border: 0;
}
@media only screen and (max-width: 601px) {
div {
background: blue;
}
}
@media only screen and (min-width: 601px) and (max-width: 1001px) {
div {
background: green;
}
}
@media only screen and (min-width: 1001px) {
div {
background: red;
}
}
似乎 (min-width:) 再次不包含:
我很困惑。
最佳答案
'min' 和 'max' 前缀都包含在内。引用 the spec :
Most media features accept optional ‘min-’ or ‘max-’ prefixes to express "greater or equal to" and "smaller or equal to" constraints.
问题有点不同:虽然您希望像素尺寸是整数，但它并不总是这样。 This article相当详细地描述了问题:
You might think "Half a pixel? That's not possible", and for the most part it's not. But if you use Ctrl+ or Ctrl- to change your browser zoom then you'll often end up with non-integer viewport sizes, and that non-integer viewport size can be used by the browser when working out which media queries to apply to the page [...]
On Windows 7 and higher, there is a zoom level used by the operating system for things like text and icons, and on larger screens (1920px wide for example) this will automatically be set to a 125% zoom. But IE, Edge and Firefox all inherit this 125% value in their own way and end up applying it as browser zoom, creating the conditions for this bug to appear by default on most Windows machines with decent resolution screens in the past five or six years.
查看在 similar issue 上打开的讨论在 Bootstrap 中。一个有说服力的引述:
Chrome does not report decimal viewport widths even when zoomed, I assume it rounds the values when applying media queries.
我想很方便。
简而言之，我会在此处删除 max-width 或 min-width 并使用重叠规则，让后者规则成为决定因素。
关于html - 奇怪的 CSS 媒体查询逻辑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50837701/
我正在用Ruby编写一个简单的程序来检查域列表是否被占用。基本上它循环遍历列表，并使用以下函数进行检查。require'rubygems'require'whois'defcheck_domain(domain)c=Whois::Client.newc.query("google.com").available?end程序不断出错(即使我在google.com中进行硬编码)，并打印以下消息。鉴于该程序非常简单，我已经没有什么想法了-有什么建议吗？/Library/Ruby/Gems/1.8/gems/whois-2.0.2/lib/whois/server/adapters/base.
我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h
我在MiniTest::Spec和Capybara中使用以下规范:find_field('Email').must_have_css('[autofocus]')检查名为“电子邮件”的字段是否具有autofocus属性。doc说如下:has_css?(path,options={})ChecksifagivenCSSselectorisonthepageorcurrentnode.据我了解，字段“Email”是一个节点，因此调用must_have_css绝对有效!我做错了什么？ 最佳答案 通过JonasNicklas得到了答案:No
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择
我知道我可以指定某些字段来使用pluck查询数据库。ids=Item.where('due_at但是我想知道，是否有一种方法可以指定我想避免从数据库查询的某些字段。某种反拔？posts=Post.where(published:true).do_not_lookup(:enormous_field) 最佳答案 Model#attribute_names应该返回列/属性数组。您可以排除其中一些并传递给pluck或select方法。像这样:posts=Post.where(published:true).select(Post.attr
我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.
我只想对我一直在思考的这个问题有其他意见，例如我有classuser_controller和classuserclassUserattr_accessor:name,:usernameendclassUserController//dosomethingaboutanythingaboutusersend问题是我的User类中是否应该有逻辑user=User.newuser.do_something(user1)oritshouldbeuser_controller=UserController.newuser_controller.do_something(user1,user2)我
我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'
我有一个div，它根据表单是否正确提交而改变。我想知道是否可以检查类的特定元素？开始元素看起来像这样。如果输入不正确，添加错误类。 最佳答案 试试这个:browser.div(:id=>"myerrortest").class_name更多信息:http://watir.github.com/watir-webdriver/doc/Watir/HTMLElement.html#class_name-instance_method另一种选择是只查看具有您期望的类的div是否存在browser.div((:id=>"myerrortes