[英]CSS media query not overriding styles
I'm a bit confused. 我有点困惑。 I design my page mobile first so if you open it on DevTools and see it on a mobile you'll see the design implemented on a device perfectly.
我首先设计移动设备页面,因此,如果您在DevTools上打开它,然后在移动设备上看到它,则可以完美地在设备上实现设计。 On the media queries on the file of grid.css I added the style rules for the desktop view but when opening it on desktop view it doesn't apply the media queries.
在grid.css文件的媒体查询上,我为桌面视图添加了样式规则,但是在桌面视图上打开样式规则时,它不应用媒体查询。 Here is a link if you want to check it out
https://repl.it/@GianinaSkarlett/API-Capstone
otherwise here's the snippet: 如果您想查看
https://repl.it/@GianinaSkarlett/API-Capstone
这是一个链接,否则为摘录:
This is the CSS styles (mobile first): 这是CSS样式(移动设备优先):
* {
font-family: 'Open Sans', sans-serif;
padding: 0;
}
.results {
padding: 10px;
}
.header {
border: solid 1px gainsboro;
padding: 0;
width: 100%;
height: 65px;
}
h1 {
font-size: 3em;
text-align: center;
margin: 0;
}
h2 {
text-align: center;
color: white;
}
.search-background-image {
background: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 3, 0)
) fixed ,url("https://image.ibb.co/nBhnQA/pexels-photo-1051075-
2.jpg");
background-repeat: no-repeat;
width: 100%;
height: 211px;
background-size: cover;
}
.search-type, .search-address {
background-color: white;
border-radius: 7px;
border: white solid;
position: absolute;
height: 26px;
top: 160px;
padding-left: 3px;
font-size: 9px;
}
.search-address {
width: 110px;
left: 190px;
}
.search-type {
left: 15px;
width: 151px;
}
.button {
background-color: white;
border-radius: 15px;
border: white solid;
position: absolute;
width: 150px;
height: 32px;
left: 90px;
top: 210px;
}
.landing-page, .about-page {
width: 100%;
}
.landing-img {
width: 100%;
border-radius: 10px;
}
.text {
display: inline-block;
text-align: center;
margin: 0;
font-size: 14px;
}
.section-title {
margin: 0;
font-size: 18px;
}
.clear {
clear: both;
}
This is my desktop media query: 这是我的桌面媒体查询:
/* Desktops and laptops ----------- */
@media only screen and (min-width : 1152px) {
/* Styles */
.landing-img {
width: 448.22px;
height: 635px;
border-radius: 10px;
}
.search-type, .search-address {
background-color: white;
border-radius: 7px;
border: white solid;
position: absolute;
height: 40px;
top: 376px;
padding-left: 10px;
}
.landing-page, .about-page {
width: 100%;
}
.section-container {
margin: auto;
}
.landing-img {
width: 448.22px;
height: 330.68px;
border-radius: 10px;
}
.text {
width: 50%;
padding: 20px 0 0 0;
margin: 0;
font-size: 26px;
}
.section-title {
width: 50%;
padding: 0 0 10px 0;
margin: 0;
font-size: 38px;
text-align: left;
}
.right {
float: right;
}
.left {
float: left;
}
.clear {
clear: both;
}
.search-type {
left: 150px;
width: 440px;
}
.search-address {
width: 380px;
left: 650px;
}
.button {
background-color: white;
border-radius: 15px;
border: white solid;
position: absolute;
width: 110px;
height: 40px;
left: 1100px;
top: 376px;
}
}
如果您希望grid.css
覆盖您的响应式样式, styling.css
在html文件头部的styling.css
链接之后放置grid.css
链接。
我通过删除现有的媒体查询并创建2个媒体查询来使其工作,其中一个针对最大宽度为800px的设备,另一个针对最小宽度为801px的设备。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.