gpt4 book ai didi

html - 在 ruby​​ on rails 中忽略媒体查询

转载 作者:太空宇宙 更新时间:2023-11-04 01:14:13 25 4
gpt4 key购买 nike

我正在 Cloud9 Ruby on Rails 中创建一个元素。我在 index.html.erb 中只有一个 css 文件:

<!DOCTYPE html>
<html>
<head>
<title>Workspace</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>

<%= yield %>

</body>
</html>

我在 Application.css 中放置了一个媒体查询:

@media only screen and (min-width: 290px) and (max-width: 640px) and  (-webkit-device-pixel-ratio: 2) { 
.container2 {
position:relative;
background-color:red;
text-align: center;
width:100%;
height:100%;
border-bottom-style: ridge;
border-top-style: ridge;
border-width:10px;
}
#list {
font-size: 50px;
}


}

如果您访问链接:https://todo-app-back-end-prospeed.c9users.io/?_c9_id=livepreview0&_c9_host=https://ide.c9.io ,你会看到 .container2 在达到 600px 时没有变红。

最佳答案

您的查询工作正常。检查时需要进行一些调整。我希望您使用 Chrome 来检查行为。

如果您选择桌面,那么您的 CSS 将正常工作,否则它不会。测试时不要忘记将 DPR 设置为 2.0

enter image description here

要修复,只需在 <head> 下添加以下内容标签。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

关于html - 在 ruby​​ on rails 中忽略媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50555002/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com