Html 媒体查询不工作
我想在我的网页上制作一个滑块。我使用媒体查询图像大小。这是我的css代码Html 媒体查询不工作,html,css,Html,Css,我想在我的网页上制作一个滑块。我使用媒体查询图像大小。这是我的css代码 #myCarousel .item { height:400px; }#slide1{ background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat; } #slide2{ background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top ce
#myCarousel .item {
height:400px;
}#slide1{
background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
}
#slide2{
background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
}
#slide3{
background:url("bdpics/CoxBazar/new folder/coxE_4-avrg.jpg") top center no-repeat;
}
/* -------------------Media queries--------------------------------*/
/* ----- portrait and landscape phone------------------------------------*/
@media(max-width: 480px){
#myCarousel .item {
height:270px;
width:100%;
}
#slide1{
background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
background-size:100% 100%;
min-width: 100%;
height: 675px;
}
#slide2{
background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
background-size:100%;
}
#slide3{
background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
background-size:100%;
}
}
/* ----- landscape phone and portrait tablet----------------------------*/
@media(max-width: 768px){
#myCarousel .item {
height:420px;
width:100%;
}
#slide1{
background:url("../bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
min-width: 100%;
height:420px;
}
#slide2{
background:url("../bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
min-width: 100%;
height:480px;
background-size:100% 100%;
}
#slide3{
background:url("../bdpics/CoxBazar/new folder/cox_24_md.jpg") top center no-repeat;
min-width: 100%;
height:480px;
background-size:100% 100%;
}
}
@media(max-width: 1200px){
#myCarousel .item {
height:580px;
width:100%;
}
#slide1{
background:url("../bdpics/CoxBazar/new folder/cox_3_lg.jpg") top center no-repeat;
min-width: 100%;
height:580px;
background-size:100% 100%;
}
#slide2{
background:url("../bdpics/CoxBazar/new folder/coxE_4_lg.jpg") top center no-repeat;
min-width: 100%;
height: 580px;
background-size:100% 100%;
}
#slide3{
background:url("../bdpics/CoxBazar/new folder/cox_24_lg.jpg") top center no-repeat;
min-width: 100%;
height: 580px;
background-size:100% 100%;
}
它运行良好@介质(最大宽度:1200px)
。但是屏幕宽度小于768px,它加载的是大图像,而不是中图像或小图像。。
我想知道我的错误在哪里 您必须限制将应用的范围:
@media(max-width: 480px){
...
}
@media(min-width: 481px) and (max-width: 768px){
...
}
@media(min-width: 769px) and (max-width: 1200px){
...
}
更有效的方法是使用移动优先策略,将移动规则放在第一位,并覆盖它们以获得更高的分辨率,如:
#slide1{
background:url("image1.jpg"); /* mobile image */
}
@media(max-width: 768px){
#slide1{
background:url("image2.jpg"); /* image for 768px+ */
}
}
@media(max-width: 1200px){
#slide1{
background:url("image3.jpg"); /* image for 1200px+ */
}
}
参考资料:-嗨,这对你有用吗
#myCarousel .item {
height:400px;
}
#slide1 {
background:url("bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
}
#slide2 {
background:url("bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
}
#slide3 {
background:url("bdpics/CoxBazar/new folder/coxE_4-avrg.jpg") top center no-repeat;
}
/* -------------------Media queries--------------------------------*/
/* ----- portrait and landscape phone------------------------------------*/
/* #### Mobile Phones Portrait #### */
@media screen and (max-device-width: 480px) and (orientation: portrait){
#myCarousel .item {
height:270px;
width:100%;
}
#slide1 {
background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
background-size:100% 100%;
min-width: 100%;
height: 675px;
}
#slide2 {
background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
background-size:100%;
}
#slide3 {
background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
background-size:100%;
}
}
@media screen and (max-device-width: 640px) and (orientation: landscape){
#myCarousel .item {
height:270px;
width:100%;
}
#slide1 {
background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
background-size:100% 100%;
min-width: 100%;
height: 675px;
}
#slide2 {
background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
background-size:100%;
}
#slide3 {
background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
background-size:100%;
}
}
/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
#myCarousel .item {
height:270px;
width:100%;
}
#slide1 {
background:url("../bdpics/CoxBazar/new folder/cox_3_sm.jpg") top center no-repeat;
background-size:100% 100%;
min-width: 100%;
height: 675px;
}
#slide2 {
background:url("../bdpics/CoxBazar/new folder/coxE_4_sm.jpg") top center no-repeat;
background-size:100%;
}
#slide3 {
background:url("../bdpics/CoxBazar/new folder/cox_24_sm.jpg") top center no-repeat;
background-size:100%;
}
}
/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
#myCarousel .item {
height:420px;
width:100%;
}
#slide1 {
background:url("../bdpics/CoxBazar/new folder/cox_3_md.jpg") top center no-repeat;
min-width: 100%;
height:420px;
}
#slide2 {
background:url("../bdpics/CoxBazar/new folder/coxE_4_md.jpg") top center no-repeat;
min-width: 100%;
height:480px;
background-size:100% 100%;
}
#slide3 {
background:url("../bdpics/CoxBazar/new folder/cox_24_md.jpg") top center no-repeat;
min-width: 100%;
height:480px;
background-size:100% 100%;
}
}
}
@media(min-width: 1024px) {
#myCarousel .item {
height:580px;
width:100%;
}
#slide1 {
background:url("../bdpics/CoxBazar/new folder/cox_3_lg.jpg") top center no-repeat;
min-width: 100%;
height:580px;
background-size:100% 100%;
}
#slide2 {
background:url("../bdpics/CoxBazar/new folder/coxE_4_lg.jpg") top center no-repeat;
min-width: 100%;
height: 580px;
background-size:100% 100%;
}
#slide3 {
background:url("../bdpics/CoxBazar/new folder/cox_24_lg.jpg") top center no-repeat;
min-width: 100%;
height: 580px;
background-size:100% 100%;
}
}
`
将@介质(最大宽度:1200px){
替换为@介质(最大宽度:1200px,最小宽度:768px){
以便提供最小宽度